vike-react 0.6.5-commit-b8ba930 → 0.6.6

package/dist/hooks/usePageContext.js

@@ -2,7 +2,7 @@ export { usePageContext };
 export { PageContextProvider };
 import React, { useContext } from 'react';
 import { getGlobalObject } from '../utils/getGlobalObject.js';
-const globalObject = getGlobalObject('PageContextProvider.ts', {
+const globalObject = getGlobalObject('usePageContext.tsx', {
     reactContext: React.createContext(undefined),
 });
 function PageContextProvider({ pageContext, children }) {

package/dist/integration/getPageElement.d.ts

@@ -4,4 +4,5 @@ import type { PageContext } from 'vike/types';
 declare function getPageElement(pageContext: PageContext): {
     page: React.JSX.Element;
     renderPromise: Promise<void>;
+    renderPromiseReject: (err: unknown) => void;
 };

package/dist/integration/getPageElement.js

@@ -20,14 +20,20 @@ function getPageElement(pageContext) {
         page = React.createElement(Wrap, null, page);
         page = addSuspense(page);
     });
+    // TODO/now rename
     page = React.createElement(PageContextProvider, { pageContext: pageContext }, page);
     let renderPromiseResolve;
-    let renderPromise = new Promise((r) => (renderPromiseResolve = r));
+    let renderPromiseReject;
+    let renderPromise = new Promise((resolve, reject) => {
+        renderPromiseResolve = resolve;
+        renderPromiseReject = reject;
+    });
+    // TODO/now rename
     page = React.createElement(RenderPromiseProvider, { renderPromiseResolve: renderPromiseResolve }, page);
     if (pageContext.config.reactStrictMode !== false) {
         page = React.createElement(React.StrictMode, null, page);
     }
-    return { page, renderPromise };
+    return { page, renderPromise, renderPromiseReject };
 }
 function RenderPromiseProvider({ children, renderPromiseResolve, }) {
     useEffect(renderPromiseResolve);

package/dist/integration/onRenderClient.js

@@ -6,35 +6,54 @@ import { getPageElement } from './getPageElement.js';
 import { callCumulativeHooks } from '../utils/callCumulativeHooks.js';
 import { applyHeadSettings } from './applyHeadSettings.js';
 import { resolveReactOptions } from './resolveReactOptions.js';
-let root;
+import { getGlobalObject } from '../utils/getGlobalObject.js';
+import { isObject } from '../utils/isObject.js';
+const globalObject = getGlobalObject('onRenderClient.tsx', {});
+// TODO/now: update TS
 const onRenderClient = async (pageContext) => {
     pageContext._headAlreadySet = pageContext.isHydration;
     // Use case:
     // - Store hydration https://github.com/vikejs/vike-react/issues/110
     await callCumulativeHooks(pageContext.config.onBeforeRenderClient, pageContext);
-    const { page, renderPromise } = getPageElement(pageContext);
+    const { page, renderPromise, renderPromiseReject } = getPageElement(pageContext);
     pageContext.page = page;
-    // TODO: implement this? So that, upon errors, onRenderClient() throws an error and Vike can render the error page. As of April 2024 it isn't released yet.
-    //  - https://react-dev-git-fork-rickhanlonii-rh-root-options-fbopensource.vercel.app/reference/react-dom/client/createRoot#show-a-dialog-for-uncaught-errors
-    //  - https://react-dev-git-fork-rickhanlonii-rh-root-options-fbopensource.vercel.app/reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors
-    const onUncaughtError = (_error, _errorInfo) => { };
+    // Local callback for current page
+    globalObject.onUncaughtErrorLocal = (err) => {
+        renderPromiseReject(err);
+    };
     const container = document.getElementById('root');
     const { hydrateRootOptions, createRootOptions } = resolveReactOptions(pageContext);
     if (pageContext.isHydration &&
         // Whether the page was [Server-Side Rendered](https://vike.dev/ssr).
         container.innerHTML !== '') {
         // First render while using SSR, i.e. [hydration](https://vike.dev/hydration)
-        root = ReactDOM.hydrateRoot(container, page, hydrateRootOptions);
+        globalObject.root = ReactDOM.hydrateRoot(container, page, {
+            ...hydrateRootOptions,
+            // onUncaughtError is the right callback: https://gist.github.com/brillout/b9516e83a7a4517f4dbd0ef50e9dd716
+            onUncaughtError(...args) {
+                onUncaughtErrorGlobal.call(this, args, hydrateRootOptions);
+            },
+        });
     }
     else {
-        if (!root) {
+        if (!globalObject.root) {
             // First render without SSR
-            root = ReactDOM.createRoot(container, createRootOptions);
+            globalObject.root = ReactDOM.createRoot(container, {
+                ...createRootOptions,
+                onUncaughtError(...args) {
+                    onUncaughtErrorGlobal.call(this, args, createRootOptions);
+                },
+            });
         }
-        root.render(page);
+        globalObject.root.render(page);
+    }
+    pageContext.root = globalObject.root;
+    try {
+        await renderPromise;
+    }
+    finally {
+        delete globalObject.onUncaughtErrorLocal;
     }
-    pageContext.root = root;
-    await renderPromise;
     if (!pageContext.isHydration) {
         pageContext._headAlreadySet = true;
         applyHead(pageContext);
@@ -49,3 +68,18 @@ function applyHead(pageContext) {
     const lang = getHeadSetting('lang', pageContext);
     applyHeadSettings(title, lang);
 }
+// Global callback, attached once upon hydration.
+function onUncaughtErrorGlobal(args, userOptions) {
+    logUncaughtError(args);
+    const [error] = args;
+    globalObject.onUncaughtErrorLocal?.(error);
+    userOptions?.onUncaughtError?.apply(this, args);
+}
+async function logUncaughtError(args) {
+    const [error, errorInfo] = args;
+    console.error('%o\n%s', error, `The above error occurred at:${errorInfo.componentStack}`);
+    // Used by Vike:
+    // https://github.com/vikejs/vike/blob/8ce2cbda756892f0ff083256291515b5a45fe319/packages/vike/client/runtime-client-routing/renderPageClientSide.ts#L838-L844
+    if (isObject(error))
+        error.isAlreadyLogged = true;
+}

package/dist/utils/getGlobalObject.d.ts

@@ -1 +1 @@
-export declare function getGlobalObject<T extends Record<string, unknown> = never>(key: `${string}.ts`, defaultValue: T): T;
+export declare function getGlobalObject<T extends Record<string, unknown> = never>(key: `${string}.ts` | `${string}.tsx`, defaultValue: T): T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.6.5-commit-b8ba930",
+  "version": "0.6.6",
   "repository": "https://github.com/vikejs/vike-react",
   "type": "module",
   "exports": {
@@ -27,7 +27,7 @@
     "./__internal/integration/Loading": "./dist/integration/Loading.js"
   },
   "dependencies": {
-    "react-streaming": "^0.4.3"
+    "react-streaming": "^0.4.4"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -45,7 +45,7 @@
     "rimraf": "^5.0.5",
     "typescript": "^5.9.2",
     "vike": "^0.4.237",
-    "vite": "^7.1.2"
+    "vite": "^7.1.5"
   },
   "typesVersions": {
     "*": {