Files
siftlode/frontend/src/lib/queryClient.dom.test.ts
T
peter 8a50538275 fix(ui): a write that fails says what failed and why, wherever it fails
`req` opens its blocking dialog for 400/409/422/5xx only. A 403/404/429 was left to the caller and a
502-504 or lost connection got just the self-clearing connection notice, so 34 mutations without a
reporting onError and 15 direct api writes with a bare or missing catch failed in silence: a hidden
channel that snapped back, a share link that never revoked, a confirmed account delete that ended
with nothing said.

- lib/queryClient: one MutationCache reporter. react-query awaits it BEFORE the mutation's own
  onError, so it waits a task and skips a failure the site already reported; the toast title comes
  from `meta.failTitle`, `meta.errorShownInline` opts out.
- notifyActionError: title names WHAT failed, the line under it says WHY (`failureReason`: a
  structured localized detail, else the status). It marks the error reported (`markReported`), so
  nothing reports one failure twice; `notifyKnownFailure` for a site's own specific sentence.
- Every silent site named (45 new HU/EN titles, 4 reasons). Stale "the global dialog shows it"
  comments corrected on the job actions, channel block, Plex sync, cookies, download enqueue,
  account delete and usePref.
- Channels passed the tag hook's channel id to the reporter as the error; the tag and priority hooks
  now report themselves, with the real error.
- A contract test keeps every useMutation naming its failure; CLAUDE.md gains the pattern row.
- history.dom.test: the "navigates only once the entries are back" assertion raced an async act's
  macrotask flush (1 in 5 runs); it now asserts from a later popstate listener.
2026-09-13 01:45:28 +02:00

105 lines
4.0 KiB
TypeScript

// @vitest-environment jsdom
//
// The ONE app-wide reporter for a failed mutation (E11 S2b). `req` shows its blocking dialog for
// 400/409/422/5xx only, so before this every mutation without a reporting `onError` failed in
// silence on a 403/404/429 or a lost connection — 34 of them.
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
vi.mock("./notifications", () => ({ notify: vi.fn(() => 0) }));
vi.mock("./errorDialog", () => ({ reportError: vi.fn() }));
import { MutationObserver, type MutationObserverOptions } from "@tanstack/react-query";
import { createQueryClient } from "./queryClient";
import { HttpError, req } from "./api/core";
import { notify } from "./notifications";
import { reportError } from "./errorDialog";
import { notifyActionError } from "./actionErrors";
import i18n from "../i18n";
const notifyMock = vi.mocked(notify);
beforeEach(() => {
notifyMock.mockClear();
vi.mocked(reportError).mockClear();
});
afterEach(() => vi.restoreAllMocks());
async function fail(options: MutationObserverOptions<unknown, unknown, void>): Promise<void> {
const observer = new MutationObserver(createQueryClient(), options);
await observer.mutate().catch(() => {});
// The reporter waits a task for the mutation's own onError; give it that task.
await new Promise((r) => setTimeout(r, 5));
}
const TITLE = "errors.writeFailed.hideChannel";
describe("a failed mutation", () => {
it("is named, with the reason under it, when the mutation did not report it itself", async () => {
await fail({
mutationFn: () => Promise.reject(new HttpError(404, "Not subscribed")),
meta: { failTitle: TITLE },
});
expect(notifyMock.mock.calls).toEqual([
[{ level: "error", title: i18n.t(TITLE), message: i18n.t("errors.notFound.generic") }],
]);
});
it("is still reported under the generic title when the mutation names nothing", async () => {
await fail({ mutationFn: () => Promise.reject(new HttpError(429, "slow down")) });
expect(notifyMock).toHaveBeenCalledWith({
level: "error",
title: i18n.t("errors.title"),
message: i18n.t("errors.reason.rateLimited"),
});
});
it("says a lost connection is why the change did not go through", async () => {
await fail({
mutationFn: () => Promise.reject(new TypeError("Failed to fetch")),
meta: { failTitle: TITLE },
});
expect(notifyMock).toHaveBeenCalledWith(
expect.objectContaining({ message: i18n.t("errors.reason.unreachable") }),
);
});
it("gets ONE toast when the mutation's own onError reported it — react-query runs that one second", async () => {
await fail({
mutationFn: () => Promise.reject(new HttpError(404, "gone")),
meta: { failTitle: TITLE },
onError: (e) => notifyActionError(e, "OWN TITLE"),
});
expect(notifyMock.mock.calls.map(([n]) => n.title)).toEqual(["OWN TITLE"]);
});
it("is still reported when the mutation's onError only rolls back", async () => {
const rollback = vi.fn();
await fail({
mutationFn: () => Promise.reject(new HttpError(403, "nope")),
meta: { failTitle: TITLE },
onError: rollback,
});
expect(rollback).toHaveBeenCalled();
expect(notifyMock.mock.calls.map(([n]) => n.title)).toEqual([i18n.t(TITLE)]);
});
it("gets no toast when the page shows the failure itself", async () => {
await fail({
mutationFn: () => Promise.reject(new HttpError(403, "nope")),
meta: { errorShownInline: true },
});
expect(notifyMock).not.toHaveBeenCalled();
});
it("gets no toast on top of the error dialog the request layer already opened", async () => {
vi.spyOn(globalThis, "fetch").mockResolvedValue(
new Response(JSON.stringify({ detail: "conflict" }), {
status: 409,
headers: { "content-type": "application/json" },
}),
);
await fail({ mutationFn: () => req("/api/x", { method: "POST" }), meta: { failTitle: TITLE } });
expect(reportError).toHaveBeenCalled();
expect(notifyMock).not.toHaveBeenCalled();
});
});