Fix unhandled dynamic import error in IconsProvider

The dynamic import of AllIcons in IconsProvider had no .catch() handler, causing unhandled promise rejections when the chunk fails to load (e.g., after a new deployment with changed asset hashes). The ErrorBoundary cannot catch these async errors from useEffect. Add a .catch() handler that detects stale chunk errors and reloads the page, matching the existing behavior in AppErrorBoundary. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-18 19:47:34 +00:00
1 changed files with 14 additions and 3 deletions
@@ -11,9 +11,20 @@ export const IconsProvider = ({ children }: IconsProviderProps) => {
  const setIcons = useSetAtom(iconsState);

  useEffect(() => {
-    import('./internal/AllIcons').then(({ ALL_ICONS }) => {
-      setIcons(ALL_ICONS);
-    });
+    import('./internal/AllIcons')
+      .then(({ ALL_ICONS }) => {
+        setIcons(ALL_ICONS);
+      })
+      .catch((error) => {
+        if (
+          error instanceof Error &&
+          error.message.includes(
+            'Failed to fetch dynamically imported module',
+          )
+        ) {
+          window.location.reload();
+        }
+      });
  }, [setIcons]);

  return children;