1c8a60f858
* fix(web): implement stale asset recovery in entry client and error boundary Added event listeners in entry.client.tsx to handle stale asset errors in production, allowing for recovery from stale assets. Updated the ErrorBoundary component in root.tsx to utilize the same recovery mechanism for stale chunk failures, enhancing error handling and user experience. * fix(web): improve stale asset recovery logic in entry client Refactored the recoverFromStaleAsset function to return a boolean indicating whether a reload was triggered, enhancing the handling of stale asset errors. Updated the event listener in entry.client.tsx to prevent default behavior only when a recovery is in progress, improving error management in production environments.
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import { startTransition, StrictMode } from "react";
|
|
import { hydrateRoot } from "react-dom/client";
|
|
import { HydratedRouter } from "react-router/dom";
|
|
|
|
import polyfills from "@/lib/polyfills";
|
|
import { isStaleAssetErrorMessage, recoverFromStaleAsset } from "@/lib/stale-asset-error";
|
|
|
|
void polyfills;
|
|
|
|
// Production-only: in dev these errors come from the dev server itself (restarts,
|
|
// stale optimized deps) and auto-reloading would mask them.
|
|
if (import.meta.env.PROD) {
|
|
window.addEventListener("vite:preloadError", (event) => {
|
|
if (recoverFromStaleAsset()) event.preventDefault();
|
|
});
|
|
|
|
window.addEventListener("error", (event) => {
|
|
if (isStaleAssetErrorMessage(event.message || "")) recoverFromStaleAsset();
|
|
});
|
|
|
|
window.addEventListener("unhandledrejection", (event) => {
|
|
const reason = event.reason instanceof Error ? event.reason.message : String(event.reason ?? "");
|
|
if (isStaleAssetErrorMessage(reason)) recoverFromStaleAsset();
|
|
});
|
|
}
|
|
|
|
startTransition(() => {
|
|
hydrateRoot(
|
|
document,
|
|
<StrictMode>
|
|
<HydratedRouter />
|
|
</StrictMode>
|
|
);
|
|
});
|