@remit/web-client 0.0.197 → 0.0.199

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.197",
+  "version": "0.0.199",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/compose/ComposeForm.tsx

@@ -40,7 +40,7 @@ import {
 import { useMessageBodyContent } from "../../hooks/useMessageBodyContent";
 import { useSaveDraft } from "../../hooks/useSaveDraft";
 import { useSignature } from "../../hooks/useSignature.js";
-import { softErrorMeta } from "../../lib/error-classifier";
+import { isNotFound, softErrorMeta } from "../../lib/error-classifier";
 import { accountIsMissingSmtp } from "../settings/account-form-helpers.js";
 import { useErrorBanners } from "../ui/ErrorBannerProvider.js";
 import {
@@ -59,7 +59,7 @@ const LazyComposeBody = lazy(() =>
 import { useIsDesktop } from "../../hooks/useMediaQuery.js";
 import { useVisualViewport } from "../../hooks/useVisualViewport.js";
 import type { ComposeMode } from "./ComposeProvider";
-import { useCompose } from "./ComposeProvider";
+import { OUTBOX_ROW_META, useCompose } from "./ComposeProvider";
 import { FromSelector } from "./FromSelector";
 
 interface ComposeFormProps {
@@ -458,13 +458,25 @@ export const ComposeForm = ({
 		formatting: [],
 	}));
 
-	const { data: draftData } = useQuery({
+	const { data: draftData, error: draftError } = useQuery({
 		...outboxDetailOperationsGetOutboxMessageOptions({
 			path: { outboxMessageId: outboxMessageId ?? "" },
 		}),
 		enabled: !!outboxMessageId && !draftLoaded,
+		meta: OUTBOX_ROW_META,
+		retry: (failureCount, error) => !isNotFound(error) && failureCount < 1,
 	});
 
+	// The draft id is a path segment, so Back after a send — or a restored tab —
+	// reopens the composer on a row the send already filed and deleted. There is
+	// no document left to reopen and nothing failed, so the surface closes the way
+	// it closes on Send. Only the 404 is read this way; a lapsed session still
+	// escalates.
+	useEffect(() => {
+		if (!isNotFound(draftError)) return;
+		onClose();
+	}, [draftError, onClose]);
+
 	useEffect(() => {
 		if (!draftData || draftLoaded) return;
 

package/src/components/compose/ComposeProvider.tsx

@@ -9,9 +9,9 @@ import {
 	useContext,
 	useEffect,
 	useMemo,
-	useRef,
 	useState,
 } from "react";
+import { isNotFound, softErrorStatuses } from "@/lib/error-classifier";
 import type { ReplyMode } from "@/routing";
 
 /**
@@ -41,6 +41,32 @@ const ComposeContext = createContext<ComposeContextValue | undefined>(
 const POLL_INTERVAL_MS = 2000;
 const MAX_POLL_DURATION_MS = 60_000;
 
+const isSettledStatus = (status: string | undefined): boolean =>
+	status === "sent" ||
+	status === "unfiled" ||
+	status === "failed" ||
+	status === "blocked";
+
+/**
+ * A send that lands is filed and then forgotten: the worker APPENDs the message
+ * to Sent and drops the outbox row, so the row's absence is the settled state
+ * and the 404 is the confirmation. `sent` lives for under a second and this poll
+ * runs every two, so the 404 is the outcome it normally reads.
+ *
+ * Only the 404 is this call site's to own. A 401 or a 403 here is a session that
+ * lapsed under a send, which the app owes the user an answer about.
+ */
+export const OUTBOX_ROW_META = softErrorStatuses(404);
+
+/**
+ * The watch is over on a settled status and on any error the read comes back
+ * with. The 404 is the settled state itself; every other refusal has already
+ * escalated once through the query cache, and asking again every two seconds
+ * only repeats that escalation — a fresh fatal event per tick — until the cap.
+ */
+const isWatchOver = (status: string | undefined, error: unknown): boolean =>
+	isSettledStatus(status) || error != null;
+
 export const ComposeProvider = ({
 	children,
 }: {
@@ -49,48 +75,46 @@ export const ComposeProvider = ({
 	const [pollingMessageId, setPollingMessageId] = useState<
 		string | undefined
 	>();
-	const startedAtRef = useRef(0);
 	const queryClient = useQueryClient();
 
-	const { data: polledMessage } = useQuery({
+	const { data: polledMessage, error: pollError } = useQuery({
 		...outboxDetailOperationsGetOutboxMessageOptions({
 			path: { outboxMessageId: pollingMessageId ?? "" },
 		}),
 		enabled: !!pollingMessageId,
+		meta: OUTBOX_ROW_META,
+		retry: (failureCount, error) => !isNotFound(error) && failureCount < 1,
 		refetchInterval: (query) => {
-			const status = query.state.data?.status;
-			if (
-				status === "sent" ||
-				status === "unfiled" ||
-				status === "failed" ||
-				status === "blocked"
-			)
-				return false;
-			if (Date.now() - startedAtRef.current > MAX_POLL_DURATION_MS)
+			if (isWatchOver(query.state.data?.status, query.state.error))
 				return false;
 			return POLL_INTERVAL_MS;
 		},
 	});
 
+	const stopWatching = useCallback(() => {
+		setPollingMessageId(undefined);
+		queryClient.invalidateQueries({
+			queryKey: outboxOperationsListOutboxMessagesQueryKey(),
+		});
+	}, [queryClient]);
+
+	useEffect(() => {
+		if (!pollingMessageId) return;
+		if (!isWatchOver(polledMessage?.status, pollError)) return;
+
+		stopWatching();
+	}, [polledMessage, pollError, pollingMessageId, stopWatching]);
+
+	// The cap has to put the watch down rather than only stop the interval: a
+	// query left enabled comes back on the next window focus, minutes later, to
+	// poll a send nobody is waiting on any more.
 	useEffect(() => {
-		if (!polledMessage || !pollingMessageId) return;
-
-		const terminal =
-			polledMessage.status === "sent" ||
-			polledMessage.status === "unfiled" ||
-			polledMessage.status === "failed" ||
-			polledMessage.status === "blocked";
-
-		if (terminal) {
-			setPollingMessageId(undefined);
-			queryClient.invalidateQueries({
-				queryKey: outboxOperationsListOutboxMessagesQueryKey(),
-			});
-		}
-	}, [polledMessage, pollingMessageId, queryClient]);
+		if (!pollingMessageId) return;
+		const giveUp = setTimeout(stopWatching, MAX_POLL_DURATION_MS);
+		return () => clearTimeout(giveUp);
+	}, [pollingMessageId, stopWatching]);
 
 	const startSendPolling = useCallback((outboxMessageId: string) => {
-		startedAtRef.current = Date.now();
 		setPollingMessageId(outboxMessageId);
 	}, []);
 

package/src/components/compose/send-poll-server-error.render.test.ts

@@ -0,0 +1,120 @@
+/**
+ * Issue #924: the send watch decided its next tick from the polled status
+ * alone. A 5xx carries no status, so nothing matched, the interval stayed at two
+ * seconds, and every failed tick reached the query cache and escalated again —
+ * one overlay for the user, a fresh fatal event with a fresh correlation id for
+ * telemetry, for the whole minute the cap allowed.
+ *
+ * A poll the server refuses is over. It escalates once, the watch comes down,
+ * and the outbox list is invalidated so the row's real state is what the user
+ * reads next.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { outboxOperationsListOutboxMessagesQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { QueryCache, QueryClient } from "@tanstack/react-query";
+import { createElement, useEffect } from "react";
+import { __resetFatalError, subscribeFatalError } from "../../lib/fatal-error";
+import { handleQueryCacheError } from "../../lib/query-error-handler";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { type HttpMock, httpError, mockFetch } from "../../test-support/http";
+import { ComposeProvider, useCompose } from "./ComposeProvider";
+
+const OUTBOX_MESSAGE_ID = "ob-924";
+const POLL_INTERVAL_MS = 2000;
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+let fatals = 0;
+let unsubscribe: (() => void) | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+	unsubscribe?.();
+	unsubscribe = undefined;
+	fatals = 0;
+	__resetFatalError();
+});
+
+const polls = (): number =>
+	(http?.calls ?? []).filter(
+		(call) => call.method === "GET" && call.path.endsWith(OUTBOX_MESSAGE_ID),
+	).length;
+
+const outboxListIsStale = (): boolean =>
+	harness?.queryClient
+		.getQueryCache()
+		.find({ queryKey: outboxOperationsListOutboxMessagesQueryKey() })?.state
+		.isInvalidated === true;
+
+const Sender = () => {
+	const { startSendPolling } = useCompose();
+
+	useEffect(() => {
+		startSendPolling(OUTBOX_MESSAGE_ID);
+	}, [startSendPolling]);
+
+	return null;
+};
+
+const mount = async (pollStatus: number): Promise<void> => {
+	http = mockFetch(async (call) => {
+		if (call.path.endsWith(OUTBOX_MESSAGE_ID)) {
+			return httpError(pollStatus, "the outbox is having a moment");
+		}
+		return { messages: [] };
+	});
+
+	unsubscribe = subscribeFatalError(() => {
+		fatals += 1;
+	});
+
+	const queryClient = new QueryClient({
+		queryCache: new QueryCache({ onError: handleQueryCacheError }),
+		// The watch sets its own retry policy; a zero delay only spares the test
+		// the backoff it would otherwise sit through.
+		defaultOptions: { queries: { retryDelay: 0 }, mutations: { retry: false } },
+	});
+
+	harness = createDomHarness({ queryClient });
+	queryClient.setQueryData(outboxOperationsListOutboxMessagesQueryKey(), {
+		messages: [],
+	});
+	harness.renderApp(
+		createElement(ComposeProvider, null, createElement(Sender)),
+	);
+	await harness.flush();
+};
+
+describe("a send watch the server refuses (#924)", () => {
+	it("escalates once and stops polling", async () => {
+		await mount(500);
+		await harness?.wait(POLL_INTERVAL_MS * 3);
+
+		assert.equal(fatals, 1, "the refusal escalated exactly once");
+		assert.equal(
+			polls(),
+			2,
+			"the read was attempted once and retried once, then the watch came down",
+		);
+	});
+
+	it("invalidates the outbox list so the row's real state is on screen", async () => {
+		await mount(500);
+		await harness?.wait(POLL_INTERVAL_MS);
+
+		assert.ok(outboxListIsStale(), "the outbox list was marked for a refetch");
+	});
+
+	it("leaves the settled 404 alone — one stop, no escalation", async () => {
+		await mount(404);
+		await harness?.wait(POLL_INTERVAL_MS * 2);
+
+		assert.equal(fatals, 0, "the deleted row is the confirmation, not a fault");
+		assert.equal(polls(), 1, "a 404 is not retried and not polled again");
+	});
+});

package/src/lib/error-classifier.test.ts

@@ -7,8 +7,10 @@ import {
 	isAbortError,
 	isClientBug,
 	isNetworkError,
+	isNotFound,
 	isServerError,
 	shouldEscalate,
+	softErrorStatuses,
 } from "./error-classifier";
 import { NetworkError, taggedFetch } from "./network-error";
 
@@ -325,3 +327,49 @@ describe("shouldEscalate (the fail-fast decision table — #1059)", () => {
 		);
 	});
 });
+
+/**
+ * The send watch reads a row the server deletes on success, so the 404 is the
+ * outcome it is there to see. Everything else that endpoint can answer is still
+ * news — a lapsed session most of all, because a background read that renders it
+ * as nothing leaves the user on a screen that has quietly stopped working.
+ */
+describe("meta.softErrorStatuses (one outcome owned, the rest not)", () => {
+	const ownsNotFound = softErrorStatuses(404);
+
+	it("does NOT escalate the status the call site named", () => {
+		assert.equal(
+			shouldEscalate(new ApiError("gone", 404), ownsNotFound, "nobody"),
+			false,
+		);
+	});
+
+	it("escalates every other 4xx, the lapsed session included", () => {
+		assert.equal(
+			shouldEscalate(new ApiError("signed out", 401), ownsNotFound, "nobody"),
+			true,
+		);
+		assert.equal(
+			shouldEscalate(new ApiError("not yours", 403), ownsNotFound, "nobody"),
+			true,
+		);
+	});
+
+	it("escalates a 5xx and a client bug, as every opt-out does", () => {
+		assert.equal(
+			shouldEscalate(new ApiError("boom", 500), ownsNotFound, "nobody"),
+			true,
+		);
+		assert.equal(
+			shouldEscalate(new TypeError("x is undefined"), ownsNotFound, "nobody"),
+			true,
+		);
+	});
+
+	it("names the record's absence, whichever client raised it", () => {
+		assert.equal(isNotFound(new ApiError("gone", 404)), true);
+		assert.equal(isNotFound({ status: 404 }), true);
+		assert.equal(isNotFound(new ApiError("gone", 410)), false);
+		assert.equal(isNotFound(new TypeError("x is undefined")), false);
+	});
+});

package/src/lib/error-classifier.ts

@@ -132,8 +132,16 @@ export const isUnauthenticated = (error: unknown): boolean =>
  */
 export type Awaiting = "user" | "nobody";
 
-const isSoftErrorMeta = (meta: Record<string, unknown> | undefined): boolean =>
-	meta?.softError === true;
+const isSoftErrorMeta = (
+	error: unknown,
+	meta: Record<string, unknown> | undefined,
+): boolean => {
+	if (meta?.softError === true) return true;
+	const owned = meta?.softErrorStatuses;
+	if (!Array.isArray(owned)) return false;
+	const status = getErrorStatus(error);
+	return status !== undefined && owned.includes(status);
+};
 
 /**
  * The single fail-fast decision: should this error escalate to the full-screen
@@ -157,7 +165,8 @@ const isSoftErrorMeta = (meta: Record<string, unknown> | undefined): boolean =>
  *        reconnect/retry;
  *     c. a non-5xx error on a query/mutation that opted out via
  *        `meta.softError === true` — the call site owns that error's UX
- *        (e.g. a 404 empty state, a 4xx "Reconnect" banner).
+ *        (e.g. a 404 empty state, a 4xx "Reconnect" banner) — or, where it owns
+ *        one status and not the rest, `meta.softErrorStatuses`.
  */
 export const shouldEscalate = (
 	error: unknown,
@@ -169,7 +178,7 @@ export const shouldEscalate = (
 	if (isNetworkError(error)) return false;
 	if (awaiting === "user" && isUnauthenticated(error)) return true;
 	if (isAlwaysFatal(error)) return true;
-	if (isSoftErrorMeta(meta)) return false;
+	if (isSoftErrorMeta(error, meta)) return false;
 	return true;
 };
 
@@ -188,3 +197,18 @@ export const shouldEscalate = (
  * than the failure it reports.
  */
 export const softErrorMeta: { softError: true } = { softError: true };
+
+/**
+ * The narrow form, for a call site that owns one outcome and none of the others.
+ * A read whose record may legitimately be gone owns the 404 and nothing else: a
+ * blanket `softErrorMeta` there would also swallow the 401 and the 403, and a
+ * background read that answers a lapsed session with nothing leaves the user
+ * looking at a screen that has quietly stopped working.
+ */
+export const softErrorStatuses = (
+	...statuses: number[]
+): { softErrorStatuses: number[] } => ({ softErrorStatuses: statuses });
+
+/** The record is not there. */
+export const isNotFound = (error: unknown): boolean =>
+	getErrorStatus(error) === 404;