@rpcbase/client 0.291.0 → 0.292.0

package/dist/components/RouteErrorBoundary.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { SsrErrorStatePayload } from '../ssrErrorState';
+type RenderErrorExtra = (state: SsrErrorStatePayload) => ReactNode;
+type RouteErrorBoundaryProps = {
+    renderErrorExtra?: RenderErrorExtra;
+};
+export declare const RouteErrorBoundary: ({ renderErrorExtra }: RouteErrorBoundaryProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RouteErrorBoundary.d.ts.map

package/dist/components/RouteErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/components/RouteErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAGvD,KAAK,gBAAgB,GAAG,CAAC,KAAK,EAAE,oBAAoB,KAAK,SAAS,CAAA;AAElE,KAAK,uBAAuB,GAAG;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC,CAAA;AAkDD,eAAO,MAAM,kBAAkB,GAAI,sBAAsB,uBAAuB,4CAU/E,CAAA"}

package/dist/components/SsrErrorFallback.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { SsrErrorStatePayload } from '../ssrErrorState';
+type RenderErrorExtra = (state: SsrErrorStatePayload) => ReactNode;
+type SsrErrorFallbackProps = {
+    state: SsrErrorStatePayload;
+    renderErrorExtra?: RenderErrorExtra;
+};
+export declare const SsrErrorFallback: ({ state, renderErrorExtra }: SsrErrorFallbackProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SsrErrorFallback.d.ts.map

package/dist/components/SsrErrorFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SsrErrorFallback.d.ts","sourceRoot":"","sources":["../../src/components/SsrErrorFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAGvD,KAAK,gBAAgB,GAAG,CAAC,KAAK,EAAE,oBAAoB,KAAK,SAAS,CAAA;AAElE,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,oBAAoB,CAAA;IAC3B,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC,CAAA;AAKD,eAAO,MAAM,gBAAgB,GAAI,6BAA6B,qBAAqB,4CAoClF,CAAA"}

package/dist/index.d.ts

@@ -5,4 +5,6 @@ export * from './getFeatureFlag';
 export * from './RootProvider';
 export * from './hooks';
 export * from './ssrErrorState';
+export * from './components/SsrErrorFallback';
+export * from './components/RouteErrorBoundary';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,+BAA+B,CAAA;AAC7C,cAAc,iCAAiC,CAAA"}

package/dist/index.js

@@ -1,7 +1,7 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { StrictMode, useRef, useEffect, useCallback, useState, useSyncExternalStore } from "react";
 import posthog from "posthog-js";
-import { createRoutesFromElements, createBrowserRouter, RouterProvider, useLocation } from "@rpcbase/router";
+import { createRoutesFromElements, createBrowserRouter, RouterProvider, useLocation, useRouteError, isRouteErrorResponse } from "@rpcbase/router";
 import { hydrateRoot } from "react-dom/client";
 import { PostHogProvider } from "posthog-js/react/dist/esm/index.js";
 import useMeasure from "react-use/esm/useMeasure.js";
@@ -103,6 +103,27 @@ const consumeClientSsrErrorState = () => {
   }
   return state;
 };
+const DEFAULT_TITLE = "Something went wrong";
+const DEFAULT_MESSAGE = "We couldn't render this page. Please try again in a few seconds.";
+const SsrErrorFallback = ({ state, renderErrorExtra }) => {
+  const {
+    statusCode = 500,
+    title = DEFAULT_TITLE,
+    message = DEFAULT_MESSAGE,
+    details
+  } = state;
+  const extra = renderErrorExtra?.(state);
+  return /* @__PURE__ */ jsx("div", { className: "bg-white min-h-screen", children: /* @__PURE__ */ jsxs("main", { className: "mx-auto flex min-h-screen max-w-2xl flex-col items-center justify-center px-6 py-12 text-center sm:py-24", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-rose-600", children: statusCode }),
+    /* @__PURE__ */ jsx("h1", { className: "mt-4 text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "mt-6 text-lg text-gray-600 sm:text-xl/relaxed", children: message }),
+    details ? /* @__PURE__ */ jsxs("div", { className: "mt-10 w-full rounded-2xl bg-gray-900/95 p-5 text-left shadow-2xl", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-gray-400", children: "Debug details" }),
+      /* @__PURE__ */ jsx("pre", { className: "mt-3 max-h-64 overflow-auto whitespace-pre-wrap text-sm text-gray-100", children: details })
+    ] }) : null,
+    extra ? /* @__PURE__ */ jsx("div", { className: "mt-10 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-center", children: extra }) : null
+  ] }) });
+};
 const isProduction = globalThis.__rb_env__.MODE === "production";
 const showErrorOverlay = (err) => {
   const ErrorOverlay = customElements.get("vite-error-overlay");
@@ -131,25 +152,21 @@ const getRootElement = () => {
   }
   return el;
 };
-const hydrateSsrFallbackIfPresent = (rootElement, renderSsrErrorFallback) => {
+const hydrateSsrFallbackIfPresent = (rootElement, renderErrorExtra) => {
   const ssrErrorState = peekClientSsrErrorState();
   if (!ssrErrorState) {
     return false;
   }
-  const fallback = renderSsrErrorFallback?.(ssrErrorState);
-  if (!fallback) {
-    return false;
-  }
   consumeClientSsrErrorState();
   hydrateRoot(
     rootElement,
-    /* @__PURE__ */ jsx(StrictMode, { children: fallback })
+    /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(SsrErrorFallback, { state: ssrErrorState, renderErrorExtra }) })
   );
   return true;
 };
 const initWithRoutes = async (routesElement, opts) => {
   const rootElement = getRootElement();
-  if (hydrateSsrFallbackIfPresent(rootElement, opts?.renderSsrErrorFallback)) {
+  if (hydrateSsrFallbackIfPresent(rootElement, opts?.renderErrorExtra)) {
     return;
   }
   await initApiClient();
@@ -1567,9 +1584,63 @@ const useMediaQuery = (query) => {
   };
   return useSyncExternalStore(subscribe, getSnapshot, () => false);
 };
+const defaultState = {
+  statusCode: 500,
+  title: "Something went wrong",
+  message: "We couldn't render this route. Please try again shortly."
+};
+const toSsrErrorState = (error) => {
+  if (isRouteErrorResponse(error)) {
+    const data = error.data;
+    const message = typeof data === "string" ? data : data?.message || defaultState.message;
+    let details;
+    if (globalThis.__rb_env__.DEV && data && typeof data !== "string") {
+      try {
+        details = JSON.stringify(data, null, 2);
+      } catch {
+        details = void 0;
+      }
+    }
+    return {
+      statusCode: error.status ?? defaultState.statusCode,
+      title: error.statusText || defaultState.title,
+      message,
+      details
+    };
+  }
+  if (error instanceof Error) {
+    return {
+      statusCode: defaultState.statusCode,
+      title: defaultState.title,
+      message: error.message || defaultState.message,
+      details: globalThis.__rb_env__.DEV ? error.stack ?? error.message : void 0
+    };
+  }
+  if (typeof error === "string") {
+    return {
+      statusCode: defaultState.statusCode,
+      title: defaultState.title,
+      message: error
+    };
+  }
+  return defaultState;
+};
+const RouteErrorBoundary = ({ renderErrorExtra }) => {
+  const routeError = useRouteError();
+  const state = toSsrErrorState(routeError);
+  return /* @__PURE__ */ jsx(
+    SsrErrorFallback,
+    {
+      state,
+      renderErrorExtra
+    }
+  );
+};
 export {
   RootProvider,
+  RouteErrorBoundary,
   SSR_ERROR_STATE_GLOBAL_KEY,
+  SsrErrorFallback,
   apiClient,
   consumeClientSsrErrorState,
   getFeatureFlag,

package/dist/initWithRoutes.d.ts

@@ -1,9 +1,9 @@
-import { ReactElement } from 'react';
+import { ReactNode } from 'react';
 import { createRoutesFromElements } from '../../router/src';
 import { SsrErrorStatePayload } from './ssrErrorState';
 type InitWithRoutesOptions = {
     devThrowsOnHydrationErrors?: boolean;
-    renderSsrErrorFallback?: (state: SsrErrorStatePayload) => ReactElement | null;
+    renderErrorExtra?: (state: SsrErrorStatePayload) => ReactNode;
 };
 type RoutesElement = Parameters<typeof createRoutesFromElements>[0];
 export declare const initWithRoutes: (routesElement: RoutesElement, opts?: InitWithRoutesOptions) => Promise<void>;

package/dist/initWithRoutes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initWithRoutes.d.ts","sourceRoot":"","sources":["../src/initWithRoutes.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAc,MAAM,OAAO,CAAA;AAEhD,OAAO,EAAsB,wBAAwB,EAAiB,MAAM,iBAAiB,CAAA;AAK7F,OAAO,EAGL,oBAAoB,EACrB,MAAM,iBAAiB,CAAA;AAiCxB,KAAK,qBAAqB,GAAG;IAC3B,0BAA0B,CAAC,EAAE,OAAO,CAAA;IACpC,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,YAAY,GAAG,IAAI,CAAA;CAC9E,CAAA;AAED,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAA;AAkCnE,eAAO,MAAM,cAAc,GACzB,eAAe,aAAa,EAC5B,OAAO,qBAAqB,kBA+E7B,CAAA"}
+{"version":3,"file":"initWithRoutes.d.ts","sourceRoot":"","sources":["../src/initWithRoutes.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAc,MAAM,OAAO,CAAA;AAE7C,OAAO,EAAsB,wBAAwB,EAAiB,MAAM,iBAAiB,CAAA;AAK7F,OAAO,EAGL,oBAAoB,EACrB,MAAM,iBAAiB,CAAA;AAkCxB,KAAK,qBAAqB,GAAG;IAC3B,0BAA0B,CAAC,EAAE,OAAO,CAAA;IACpC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,SAAS,CAAA;CAC9D,CAAA;AAED,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAA;AA8BnE,eAAO,MAAM,cAAc,GACzB,eAAe,aAAa,EAC5B,OAAO,qBAAqB,kBA+E7B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.291.0",
+  "version": "0.292.0",
   "type": "module",
   "files": [
     "dist"