@remit/web-client 0.0.197 → 0.0.198

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.197",
+  "version": "0.0.198",
   "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,23 @@ 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);
+
 export const ComposeProvider = ({
 	children,
 }: {
@@ -49,48 +66,47 @@ 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)
-				return false;
+			if (isSettledStatus(query.state.data?.status)) return false;
+			if (isNotFound(query.state.error)) return false;
 			return POLL_INTERVAL_MS;
 		},
 	});
 
+	const stopWatching = useCallback(() => {
+		setPollingMessageId(undefined);
+		queryClient.invalidateQueries({
+			queryKey: outboxOperationsListOutboxMessagesQueryKey(),
+		});
+	}, [queryClient]);
+
+	useEffect(() => {
+		if (!pollingMessageId) return;
+		if (!isSettledStatus(polledMessage?.status) && !isNotFound(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/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;