What still works when JavaScript is slow, hydration is delayed, the network is unstable,
the user double-clicks, the tab sleeps, the device goes offline, or the request result is unknown?

The browser is not only a render target.
The browser is already a distributed systems runtime.

Click handler with fetch() but no form fallback.
Route modal that cannot be deep-linked.
Mutation result only stored in local state.
Error page only exists as a toast.
Refresh loses the user's path or intent.

Can a user arrive at this URL, reload it, share it, submit the primary form,
and recover from an error without relying on hidden in-memory state?

<button onClick={async () => {
  await api.approveCase(caseId);
  setApproved(true);
  toast.success("Approved");
}}>
  Approve
</button>

<Form method="post" action={`/cases/${caseId}/approve`}>
  <input type="hidden" name="idempotencyKey" value={idempotencyKey} />
  <button type="submit">Approve</button>
</Form>

pending button state
optimistic label
loader revalidation
idempotency key
conflict handling
structured error display
analytics event

tooltip
local dropdown
UI-only filter
non-critical personalization

payment
approval
case escalation
file submission
legal acknowledgement
data correction
identity/security changes

/cases/123
/cases?status=open&assignee=me
/reports/monthly?period=2026-07

<form method="post" action="/cases/123/approve">
  <button type="submit">Approve</button>
</form>

pending state
field-level errors
optimistic draft preservation
scroll/focus management
revalidation without full reload

Idempotency-Key
If-Match / version
duplicate command detection
conflict response

"We could not confirm whether this succeeded. Refresh status."
"This change is queued and will sync when online."
"This item was already approved by another user."

What did the user try to do?
Did the browser send the request?
Did the server receive it?
Was it committed?
Was the UI revalidated?
What correlation ID ties these events together?

<div onClick={() => navigate(`/cases/${caseId}`)}>
  Open case
</div>

<Link to={`/cases/${caseId}`}>Open case</Link>

<a href="/cases/123">Open case</a>

user intent → URL → route match → data load → render → history entry

<a href="/projects/42">Open project</a>
<form method="post" action="/projects/42/archive">
  <button>Archive</button>
</form>

<Link to="/projects/42">Open project</Link>

<Form method="post" action="/projects/42/archive">
  <button>Archive</button>
</Form>

The server endpoint must remain meaningful.
The client enhancement may improve the path but must not be the only path.

<Form method="post" action="/cases/new">
  <label>
    Title
    <input name="title" required minLength={3} />
  </label>

  <label>
    Priority
    <select name="priority" defaultValue="normal">
      <option value="low">Low</option>
      <option value="normal">Normal</option>
      <option value="high">High</option>
    </select>
  </label>

  <button type="submit">Create case</button>
</Form>

export async function action({ request }: ActionFunctionArgs) {
  const form = await request.formData();

  const input = {
    title: String(form.get("title") ?? ""),
    priority: String(form.get("priority") ?? "normal"),
  };

  const validation = validateCreateCase(input);
  if (!validation.ok) {
    return data({ errors: validation.errors }, { status: 400 });
  }

  const created = await createCase(input);
  return redirect(`/cases/${created.id}`);
}

function NewCasePage() {
  const actionData = useActionData<typeof action>();
  const navigation = useNavigation();
  const isSubmitting = navigation.state === "submitting";

  return (
    <Form method="post">
      <label>
        Title
        <input
          name="title"
          required
          minLength={3}
          aria-invalid={Boolean(actionData?.errors?.title)}
        />
      </label>
      {actionData?.errors?.title ? (
        <p role="alert">{actionData.errors.title}</p>
      ) : null}

      <button disabled={isSubmitting}>
        {isSubmitting ? "Creating..." : "Create case"}
      </button>
    </Form>
  );
}

loading → success | error

Something went wrong. Try again.

transfer money
submit legal filing
approve enforcement action
send notification
create external ticket
upload evidence

We could not confirm whether the approval completed.
Checking the latest case status...

async function approveCase(caseId: string) {
  const idempotencyKey = crypto.randomUUID();

  try {
    await api.post(`/cases/${caseId}/approve`, {
      headers: { "Idempotency-Key": idempotencyKey },
      timeoutMs: 8_000,
    });

    await queryClient.invalidateQueries({ queryKey: caseKeys.detail(caseId) });
  } catch (error) {
    if (isTimeoutLike(error) || isNetworkUnknown(error)) {
      const latest = await api.get(`/cases/${caseId}`);

      if (latest.status === "approved") {
        return { state: "confirmed-after-reconcile" };
      }

      return {
        state: "unknown",
        idempotencyKey,
        message: "Could not confirm approval. Please check before retrying.",
      };
    }

    throw error;
  }
}

POST /cases/123/approve
Idempotency-Key: abc

202 Accepted
Location: /commands/abc

GET /commands/abc → pending | succeeded | rejected | duplicate

function ApproveCaseForm({ caseId }: { caseId: string }) {
  const [key] = React.useState(() => crypto.randomUUID());

  return (
    <Form method="post" action={`/cases/${caseId}/approve`}>
      <input type="hidden" name="idempotencyKey" value={key} />
      <button type="submit">Approve</button>
    </Form>
  );
}

export async function action({ request, params }: ActionFunctionArgs) {
  const form = await request.formData();
  const idempotencyKey = String(form.get("idempotencyKey") ?? "");

  if (!idempotencyKey) {
    return data(
      { formError: "Missing command identity. Please reload and try again." },
      { status: 400 },
    );
  }

  const result = await approveCaseOnce({
    caseId: params.caseId!,
    idempotencyKey,
    actorId: await requireUserId(request),
  });

  if (result.kind === "already-applied") {
    return redirect(`/cases/${params.caseId}`);
  }

  if (result.kind === "conflict") {
    return data({ conflict: result.conflict }, { status: 409 });
  }

  return redirect(`/cases/${params.caseId}`);
}

The client can retry with the same idempotency key.
The server can deduplicate.
The UI can recover.
Support can trace the command.

login callback
password reset
account verification
checkout
submit report
approve workflow
upload evidence
regulatory deadline submission

HTML shell
entry JS
route JS chunk
CSS chunk
loader data
image/font resources

function ChunkErrorBoundary({ error }: { error: unknown }) {
  if (isChunkLoadError(error)) {
    return (
      <section role="alert">
        <h1>Update required</h1>
        <p>This page needs the latest application files.</p>
        <button onClick={() => window.location.reload()}>Reload</button>
      </section>
    );
  }

  throw error;
}

function useOnlineHint() {
  const [online, setOnline] = React.useState(() => navigator.onLine);

  React.useEffect(() => {
    const onOnline = () => setOnline(true);
    const onOffline = () => setOnline(false);

    window.addEventListener("online", onOnline);
    window.addEventListener("offline", onOffline);

    return () => {
      window.removeEventListener("online", onOnline);
      window.removeEventListener("offline", onOffline);
    };
  }, []);

  return online;
}

function NetworkBanner() {
  const online = useOnlineHint();

  if (online) return null;

  return (
    <div role="status">
      You appear to be offline. Some actions may wait until connection returns.
    </div>
  );
}

if (navigator.onLine) {
  await submitImportantCommand();
}

try command
classify result
queue only when policy allows
reconcile on reconnect

What is the command identity?
What state was it based on?
Can it be applied later safely?
What if permissions change?
What if the entity changes?
What if the user logs out?
How is conflict surfaced?
How is success reconciled?
How is audit preserved?

type QueuedCommand = {
  id: string;
  type: "draft-note.save";
  createdAt: string;
  baseVersion?: string;
  payload: unknown;
  attempts: number;
};

async function enqueue(command: Omit<QueuedCommand, "attempts" | "createdAt">) {
  const record: QueuedCommand = {
    ...command,
    attempts: 0,
    createdAt: new Date().toISOString(),
  };

  await localForage.setItem(`command:${record.id}`, record);
}

async function replayCommand(command: QueuedCommand) {
  try {
    await api.post("/draft-notes/sync", {
      body: JSON.stringify(command.payload),
      headers: {
        "Content-Type": "application/json",
        "Idempotency-Key": command.id,
      },
    });

    await removeQueuedCommand(command.id);
  } catch (error) {
    if (isConflict(error)) {
      await markNeedsUserResolution(command.id, error);
      return;
    }

    if (isRetryable(error)) {
      await updateAttempts(command.id, command.attempts + 1);
      return;
    }

    await markFailed(command.id, error);
  }
}

Offline commands must be identity-bearing, retry-safe, and reconcilable.

function SubmitButton() {
  const navigation = useNavigation();
  const submitting = navigation.state === "submitting";

  return (
    <button disabled={submitting}>
      {submitting ? "Submitting..." : "Submit"}
    </button>
  );
}

unique(actor_id, idempotency_key)
command ledger
transactional deduplication
safe duplicate response

POST /cases
200 { id: "123", message: "created" }

POST /cases
303 See Other
Location: /cases/123

The command created/changed state.
The canonical read model is here.
The browser can recover with URL/history.
Reload will not resubmit the POST.

Something went wrong.

This case does not exist or you no longer have access.
Return to case list.

This case changed while you were editing.
Review latest version before submitting again.

Some fields need correction.
Field-level details are below.

Too many attempts.
Try again after the indicated time.

Service temporarily unavailable.
Your command was not confirmed. Check status before retrying.

After every important interaction, hit Reload.
Does the app still make sense?

Is the old data still acceptable?
Should we revalidate on pageshow?
Was a pending form submission completed elsewhere?
Did permissions change?

function usePageShowRevalidation(revalidate: () => void) {
  React.useEffect(() => {
    const onPageShow = (event: PageTransitionEvent) => {
      if (event.persisted) {
        revalidate();
      }
    };

    window.addEventListener("pageshow", onPageShow);
    return () => window.removeEventListener("pageshow", onPageShow);
  }, [revalidate]);
}

high-risk workflow → revalidate on resume
low-risk static page → keep cache
expensive dashboard → stale-while-revalidate

offline shell
asset cache
background sync
request fallback
response caching

stale API response
cached auth-sensitive data
old app shell with new API contract
duplicate replay
stuck update
opaque failure source

<button onClick={() => save()}>Save</button>

<Form method="post" action="/settings/profile">
  <button type="submit">Save</button>
</Form>

Workflow: approve enforcement case
Canonical resource: /cases/:id
Command endpoint: POST /cases/:id/approve
Command identity: idempotencyKey
Base version: case.version
Success: redirect /cases/:id
Conflict: 409 with latest version summary
Unknown outcome: GET /cases/:id and/or GET /commands/:idempotencyKey
Duplicate handling: same idempotency key returns previous result
Baseline: HTML form submit works
Enhanced: pending UI, disabled button, revalidation
Audit: correlation ID + actor ID + command ID

type ActionResult<TSuccess, TFieldErrors = Record<string, string>> =
  | {
      ok: true;
      result: TSuccess;
    }
  | {
      ok: false;
      kind: "validation";
      fieldErrors: TFieldErrors;
      formError?: string;
    }
  | {
      ok: false;
      kind: "conflict";
      conflictId: string;
      latestVersion: string;
      message: string;
    }
  | {
      ok: false;
      kind: "unknown-outcome";
      commandId: string;
      message: string;
    }
  | {
      ok: false;
      kind: "rate-limited";
      retryAfterSeconds?: number;
      message: string;
    };

function ActionError({ result }: { result?: ActionResult<unknown> }) {
  if (!result || result.ok) return null;

  switch (result.kind) {
    case "validation":
      return <p role="alert">Please correct the highlighted fields.</p>;
    case "conflict":
      return <p role="alert">{result.message}</p>;
    case "unknown-outcome":
      return <p role="alert">{result.message}</p>;
    case "rate-limited":
      return <p role="alert">{result.message}</p>;
  }
}

Saved!

Saving...
Saved on this device.
Syncing...
Saved to server.
Could not confirm server save.

The client did not receive data in time.

The client did not receive confirmation in time.
The server may or may not have committed.

Could not load this data. Retry.

We could not confirm whether the change completed. Checking latest status...

The request was accepted but processing is still running. Track progress here.

<section aria-busy={isLoading}>
  <CaseDetails />
</section>

<p role="status">Saving...</p>

<p role="alert">Title is required.</p>

<label htmlFor="title">Title</label>
<input
  id="title"
  name="title"
  aria-invalid={Boolean(errors.title)}
  aria-describedby={errors.title ? "title-error" : undefined}
/>
{errors.title ? <p id="title-error">{errors.title}</p> : null}

test("approve action is deduplicated on double submit", async ({ page }) => {
  await page.goto("/cases/123");

  await Promise.all([
    page.getByRole("button", { name: "Approve" }).click(),
    page.getByRole("button", { name: "Approve" }).click(),
  ]);

  await expect(page.getByText("Approved")).toBeVisible();

  // Then assert server fixture/spy saw one committed command.
});

http.post("/cases/:id/approve", async ({ request }) => {
  const key = request.headers.get("Idempotency-Key");
  if (!key) return HttpResponse.json({ error: "missing key" }, { status: 400 });

  await delay(5_000);
  return HttpResponse.json({ ok: true });
});

type ClientCommunicationEvent = {
  event: string;
  workflow: string;
  route: string;
  commandId?: string;
  resourceId?: string;
  method?: string;
  status?: number;
  durationMs?: number;
  outcome:
    | "started"
    | "confirmed-success"
    | "confirmed-failure"
    | "unknown-outcome"
    | "cancelled"
    | "queued"
    | "reconciled";
  correlationId?: string;
};

case.approve.started
case.approve.submitted
case.approve.timeout_unknown
case.approve.reconcile.started
case.approve.reconcile.confirmed
case.approve.conflict
case.approve.duplicate_suppressed
case.approve.failed_validation
case.approve.redirected

<button onClick={save}>Save</button>

Saved!

Network error. Try again.

Just store all POSTs in IndexedDB and replay later.

Submitted commands disappear on reload.

Button disabled, so duplicate submit solved.

catch {
  toast.error("Something went wrong");
}

JavaScript should enhance the communication path, not be the only reason the communication path exists.