mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-11-14 00:01:03 +00:00
Maurice
bea3af4b45
After an update, a tab or a device whose service worker still serves the previous build asks for chunks the update removed. The server answered those requests with index.html and a 200, so the import failed with a MIME error, and everything caching in between was free to keep the HTML as the chunk. A precache install that met a missing file stored it, and Workbox reuses hashed entries by URL, so the device showed "A new version is available" on every load, whatever the reload or the cleared browser cache, and carried the broken entry into every later release that keeps the file's name. The SPA fallback now answers a GET for a build file that is not on disk with a plain 404 (no-store) instead of index.html. A precache install refuses it, so the worker whose cache is complete stays in charge until the new build is. index.html is sent relative to the public dir, which also stops an install living under a dot directory from answering every deep link with a 404. On the client, the reload after a dead chunk (the automatic one and the button on the update screen) no longer goes straight back to the worker that served the broken shell. When that same worker is still in charge and the server answers, its precache and registration are dropped first, so the reload reaches the build the server runs now. Offline, and in offline mode, the shell is kept. Every recovery reload, and the reload of the version handover, asks for the page under a one-off query parameter, so a proxy or CDN that keeps index.html against its headers cannot hand back the stale shell either. A chunk the entry imports statically fails before any of that code runs. shell-guard.js, a small classic script loaded ahead of the entry, watches for exactly that failure and runs the same recovery, once per session. A stylesheet, font or icon that holds a page raises no error at all, so once the app has started and the browser is idle, it looks through the precache for entries that hold a page under a build file's name, fetches each from the server past every cache and puts it back in place. A repaired stylesheet is loaded again, and so are the app's stylesheets when a font was repaired, since the browser does not try a face that failed again in the same document. Only the headers are read, a precache found sound is not looked at again until its entries change, nothing is fetched while nothing is broken, and nothing happens offline, in offline mode or without storage. An answer that is not the file (an auth wall, its login page, a server error) leaves the entry for the next launch. A page the recovery loaded from the network already runs the version the server reports, so the version handover now records it instead of reloading it a second time once the new worker takes over. A page loaded past an older worker that is still in charge, as a hard reload does, still asks for the new worker and records the version only once that has taken over, so the next tab or launch cannot get the old shell without a handover.
80 lines
3.2 KiB
TypeScript
80 lines
3.2 KiB
TypeScript
import { AxiosError } from 'axios';
|
|
import { installGlobalErrorHandlers } from './globalErrorHandlers';
|
|
|
|
let teardown: () => void;
|
|
let consoleError: ReturnType<typeof vi.spyOn>;
|
|
// A chunk failure reloads through chunkReload's fresh reload, a location.replace.
|
|
let reload: ReturnType<typeof vi.fn>;
|
|
|
|
beforeEach(() => {
|
|
sessionStorage.clear();
|
|
consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
|
|
reload = vi.fn();
|
|
Object.defineProperty(window, 'location', { value: { ...window.location, replace: reload }, writable: true });
|
|
teardown = installGlobalErrorHandlers();
|
|
});
|
|
|
|
afterEach(() => {
|
|
teardown();
|
|
consoleError.mockRestore();
|
|
});
|
|
|
|
/** jsdom has no PromiseRejectionEvent, so build the shape the handler reads. */
|
|
function rejectWith(reason: unknown) {
|
|
const event = new Event('unhandledrejection') as Event & { reason: unknown };
|
|
event.reason = reason;
|
|
window.dispatchEvent(event);
|
|
}
|
|
|
|
describe('global error handlers', () => {
|
|
it('FE-UTIL-GLOBALERR-001: ignores axios rejections, which the app already reports itself', () => {
|
|
// The interceptor rejects onward and there are 600+ toast.error call sites;
|
|
// logging here as well would turn every handled 500 into a phantom crash.
|
|
rejectWith(new AxiosError('Request failed with status code 500'));
|
|
expect(consoleError).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('FE-UTIL-GLOBALERR-002: logs a genuine unhandled rejection', () => {
|
|
const reason = new Error('nobody caught me');
|
|
rejectWith(reason);
|
|
expect(consoleError).toHaveBeenCalledWith('[unhandledrejection]', reason);
|
|
});
|
|
|
|
it('FE-UTIL-GLOBALERR-003: reloads when a dynamic import rejects outside render', () => {
|
|
// A lazy chunk can also be pulled in from an effect or a prefetch, where no
|
|
// boundary is watching.
|
|
rejectWith(new Error('Failed to fetch dynamically imported module: /assets/x-1.js'));
|
|
expect(reload).toHaveBeenCalledTimes(1);
|
|
expect(consoleError).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('FE-UTIL-GLOBALERR-004: logs an uncaught error from an event handler', () => {
|
|
const error = new Error('thrown in onClick');
|
|
window.dispatchEvent(new ErrorEvent('error', { error, message: error.message }));
|
|
expect(consoleError).toHaveBeenCalledWith('[window.onerror]', error);
|
|
});
|
|
|
|
it('FE-UTIL-GLOBALERR-005: heals a chunk error arriving as a window error event', () => {
|
|
window.dispatchEvent(
|
|
new ErrorEvent('error', { error: new Error('Unable to preload CSS for /assets/x.css') }),
|
|
);
|
|
expect(reload).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('FE-UTIL-GLOBALERR-006: teardown unsubscribes both listeners', () => {
|
|
// Asserted through removeEventListener rather than by firing an event: an
|
|
// ErrorEvent with nobody listening is an uncaught error, and vitest reports
|
|
// that against the file even when every test passed.
|
|
const remove = vi.spyOn(window, 'removeEventListener');
|
|
teardown();
|
|
expect(remove).toHaveBeenCalledWith('unhandledrejection', expect.any(Function));
|
|
expect(remove).toHaveBeenCalledWith('error', expect.any(Function));
|
|
|
|
// The rejection path has no such side effect, so it is safe to prove silence.
|
|
rejectWith(new Error('after teardown'));
|
|
expect(consoleError).not.toHaveBeenCalled();
|
|
|
|
teardown = () => {};
|
|
});
|
|
});
|