@rebasepro/ui 0.14.1 → 0.14.2-canary.gca521e9

package/dist/util/lazy_chunk.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+/**
+ * Does this error mean a chunk could not be loaded — rather than the chunk's
+ * own code throwing once it did load?
+ *
+ * Errors raised anywhere are matched, not just ones `loadChunk` produced: React
+ * `lazy()` calls that still import directly, and Vite's own CSS preloads, fail
+ * the same way and deserve the same recovery.
+ */
+export declare function isChunkLoadError(error: unknown): boolean;
+/**
+ * Run a dynamic import, retrying once before declaring the chunk unreachable.
+ *
+ * Errors that are not chunk load failures — the imported module throwing while
+ * it evaluates, say — are re-thrown untouched and never retried: running a
+ * module's side effects twice is worse than the original failure.
+ */
+export declare function loadChunk<T>(loader: () => Promise<T>): Promise<T>;
+/**
+ * `React.lazy` with the retry above. A drop-in replacement — use it for every
+ * lazy route or dialog, since any one of them can be the first chunk a stale
+ * tab reaches for.
+ *
+ * Note that React caches the rejection: once a lazy component has failed, later
+ * renders re-throw without calling the loader again. Resetting an error boundary
+ * therefore cannot recover it, which is why the boundary offers a reload.
+ */
+export declare function lazyChunk<T extends React.ComponentType<any>>(loader: () => Promise<{
+    default: T;
+}>): React.LazyExoticComponent<T>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.14.1",
+  "version": "0.14.2-canary.gca521e9",
   "description": "Rebase design system — React components and design tokens built on Radix UI, Tailwind CSS and lucide-react",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"

package/src/components/ErrorBoundary.tsx

@@ -6,6 +6,16 @@ import { iconSize } from "../icons/Icon";
 import { Typography } from "./Typography";
 import { Button } from "./Button";
 import { cls } from "../util";
+import { isChunkLoadError } from "../util/lazy_chunk";
+
+/**
+ * The one error a user can fix themselves. A deploy replaces the hashed chunk
+ * files, so a tab opened before it cannot load any lazy view it has not already
+ * fetched — with the browser's raw message ("Failed to fetch dynamically
+ * imported module: …") this reads as a broken build rather than a stale tab.
+ */
+const CHUNK_ERROR_DESCRIPTION =
+    "This app was updated while the tab was open, so part of it could not be loaded. Reload to continue.";
 
 /**
  * Checks whether the error message relates to missing permissions or
@@ -86,15 +96,29 @@ showDetails: false });
     }
 
     private renderInline() {
+        const isStaleChunk = isChunkLoadError(this.state.error);
         return (
-            <div className="flex flex-col m-2">
+            <div className="flex flex-col m-2 items-start">
                 <div className="flex items-center m-2">
-                    <AlertCircleIcon className={"text-red-500 dark:text-red-400"} size={iconSize.small}/>
-                    <div className="ml-4">Error</div>
+                    {isStaleChunk
+                        ? <RefreshCwIcon className={"text-text-secondary dark:text-text-secondary-dark"}
+                                         size={iconSize.small}/>
+                        : <AlertCircleIcon className={"text-red-500 dark:text-red-400"} size={iconSize.small}/>}
+                    <div className="ml-4">{isStaleChunk ? "New version available" : "Error"}</div>
                 </div>
                 <Typography variant={"caption"}>
-                    {this.state.error?.message ?? "See the error in the console"}
+                    {isStaleChunk
+                        ? CHUNK_ERROR_DESCRIPTION
+                        : this.state.error?.message ?? "See the error in the console"}
                 </Typography>
+                {isStaleChunk && <Button variant="outlined"
+                                         color="neutral"
+                                         size="small"
+                                         className="mt-3 ml-2"
+                                         onClick={this.handleReload}>
+                    <RefreshCwIcon size={16}/>
+                    Reload
+                </Button>}
             </div>
         );
     }
@@ -102,14 +126,20 @@ showDetails: false });
     private renderFullPage() {
         const { error, showDetails } = this.state;
         const isPermission = isPermissionError(error);
+        // Neither a fault nor a denial: the app is fine, this tab is behind it.
+        const isStaleChunk = !isPermission && isChunkLoadError(error);
 
-        const Icon = isPermission ? ShieldAlertIcon : AlertCircleIcon;
+        const Icon = isPermission ? ShieldAlertIcon : isStaleChunk ? RefreshCwIcon : AlertCircleIcon;
         const title = isPermission
             ? "Access denied"
-            : "Something went wrong";
+            : isStaleChunk
+                ? "New version available"
+                : "Something went wrong";
         const description = isPermission
             ? "You don't have permission to access this resource. Please check your account permissions or contact your administrator."
-            : "An unexpected error occurred. You can try reloading the page or going back.";
+            : isStaleChunk
+                ? CHUNK_ERROR_DESCRIPTION
+                : "An unexpected error occurred. You can try reloading the page or going back.";
 
         return (
             <div className={cls(
@@ -121,13 +151,17 @@ showDetails: false });
                         "flex items-center justify-center w-14 h-14 rounded-xl mb-6",
                         isPermission
                             ? "bg-amber-100 dark:bg-amber-900/30"
-                            : "bg-red-100 dark:bg-red-900/30"
+                            : isStaleChunk
+                                ? "bg-surface-100 dark:bg-surface-800"
+                                : "bg-red-100 dark:bg-red-900/30"
                     )}>
                         <Icon
                             size={28}
                             className={isPermission
                                 ? "text-amber-600 dark:text-amber-400"
-                                : "text-red-500 dark:text-red-400"}
+                                : isStaleChunk
+                                    ? "text-text-secondary dark:text-text-secondary-dark"
+                                    : "text-red-500 dark:text-red-400"}
                         />
                     </div>
 
@@ -142,7 +176,10 @@ showDetails: false });
                     </Typography>
 
                     <div className="flex gap-3">
-                        <Button
+                        {/* React caches a `lazy()` rejection: re-mounting the
+                            children re-throws without re-running the import, so
+                            "Try again" cannot recover a missing chunk. */}
+                        {!isStaleChunk && <Button
                             variant="outlined"
                             color="neutral"
                             size="medium"
@@ -150,7 +187,7 @@ showDetails: false });
                         >
                             <ArrowLeftIcon size={16}/>
                             Try again
-                        </Button>
+                        </Button>}
                         <Button
                             variant="filled"
                             color="primary"
@@ -162,7 +199,9 @@ showDetails: false });
                         </Button>
                     </div>
 
-                    {error?.message && (
+                    {/* For a stale chunk the message *is* the description
+                        above; repeating it under a disclosure adds nothing. */}
+                    {!isStaleChunk && error?.message && (
                         <div className="mt-8 w-full">
                             <button
                                 onClick={this.toggleDetails}

package/src/index.ts

@@ -18,6 +18,7 @@ export * from "./icons";
 // =============================================================================
 export * from "./styles";
 export { cls } from "./util/cls";
+export { lazyChunk, loadChunk, isChunkLoadError } from "./util/lazy_chunk";
 export { CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, getColorSchemeForKey, getColorSchemeForSeed } from "./util/chip_colors";
 export type { ChipHue, ChipTone } from "./util/chip_colors";
 

package/src/util/lazy_chunk.ts

@@ -0,0 +1,101 @@
+import React from "react";
+
+/**
+ * Dynamic imports that survive a redeploy.
+ *
+ * A built SPA names its chunks by content hash and a deploy replaces the whole
+ * `assets/` directory, so a tab opened before the deploy still holds the *old*
+ * entry chunk. The first lazy route that tab opens asks for a hash that no
+ * longer exists on the server, the import rejects, and the view is dead until
+ * the user thinks to reload — which nothing on screen tells them to do. The
+ * browser's own wording ("Failed to fetch dynamically imported module: …") reads
+ * like a build bug, so this is usually reported as one.
+ *
+ * `loadChunk` retries once — that covers a transient network failure — and then
+ * gives up with an error tagged as a chunk load failure, so `ErrorBoundary` can
+ * offer a reload instead of printing the browser's message.
+ */
+
+/**
+ * Marker property set on the error thrown after a failed retry. Read by
+ * `isChunkLoadError`, which is what the UI matches on.
+ */
+const CHUNK_LOAD_ERROR_FLAG = "rebaseChunkLoadError";
+
+/**
+ * Each engine words this differently, and the message is the only signal — none
+ * of them use a distinguishable error type. The MIME variants matter as much as
+ * the fetch ones: a server whose SPA fallback answers a missing `/assets/x.js`
+ * with `index.html` returns 200 HTML, and the browser rejects it as a module.
+ */
+const CHUNK_ERROR_PATTERNS = [
+    "failed to fetch dynamically imported module",
+    "error loading dynamically imported module",
+    "importing a module script failed",
+    "failed to load module script",
+    "expected a javascript",
+    "unable to preload css"
+];
+
+/**
+ * Does this error mean a chunk could not be loaded — rather than the chunk's
+ * own code throwing once it did load?
+ *
+ * Errors raised anywhere are matched, not just ones `loadChunk` produced: React
+ * `lazy()` calls that still import directly, and Vite's own CSS preloads, fail
+ * the same way and deserve the same recovery.
+ */
+export function isChunkLoadError(error: unknown): boolean {
+    if (!error || typeof error !== "object") return false;
+    if ((error as Record<string, unknown>)[CHUNK_LOAD_ERROR_FLAG] === true) return true;
+    const message = (error as { message?: unknown }).message;
+    if (typeof message !== "string") return false;
+    const lower = message.toLowerCase();
+    return CHUNK_ERROR_PATTERNS.some(pattern => lower.includes(pattern));
+}
+
+function chunkLoadError(cause: unknown): Error {
+    const error = new Error(
+        "This app was updated while the tab was open, so part of it could not be loaded. Reload to continue."
+    );
+    Object.assign(error, { [CHUNK_LOAD_ERROR_FLAG]: true,
+cause });
+    return error;
+}
+
+/**
+ * Run a dynamic import, retrying once before declaring the chunk unreachable.
+ *
+ * Errors that are not chunk load failures — the imported module throwing while
+ * it evaluates, say — are re-thrown untouched and never retried: running a
+ * module's side effects twice is worse than the original failure.
+ */
+export async function loadChunk<T>(loader: () => Promise<T>): Promise<T> {
+    try {
+        return await loader();
+    } catch (error) {
+        if (!isChunkLoadError(error)) throw error;
+        // A blip resolves inside a few hundred ms; a stale hash never will.
+        await new Promise(resolve => setTimeout(resolve, 250));
+        try {
+            return await loader();
+        } catch (retryError) {
+            throw chunkLoadError(retryError);
+        }
+    }
+}
+
+/**
+ * `React.lazy` with the retry above. A drop-in replacement — use it for every
+ * lazy route or dialog, since any one of them can be the first chunk a stale
+ * tab reaches for.
+ *
+ * Note that React caches the rejection: once a lazy component has failed, later
+ * renders re-throw without calling the loader again. Resetting an error boundary
+ * therefore cannot recover it, which is why the boundary offers a reload.
+ */
+export function lazyChunk<T extends React.ComponentType<any>>(
+    loader: () => Promise<{ default: T }>
+): React.LazyExoticComponent<T> {
+    return React.lazy(() => loadChunk(loader));
+}