@rpcbase/client 0.279.0 → 0.280.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.279.0",
+  "version": "0.280.0",
   "type": "module",
   "main": "./src/index.ts",
   "scripts": {

package/src/index.ts

@@ -1,4 +1,4 @@
 export * from "./apiClient"
-export * from "./initClient"
+export * from "./initWithRoutes"
 export * from "./types"
 export * from "./getFeatureFlag"

package/src/initWithRoutes.tsx

@@ -0,0 +1,114 @@
+import { StrictMode } from "react"
+import posthog from "posthog-js"
+import {createBrowserRouter, createRoutesFromElements, RouterProvider} from "@rpcbase/router"
+import { hydrateRoot } from "react-dom/client"
+
+import { initApiClient } from "./apiClient"
+import {cleanupURL} from "./cleanupURL"
+
+
+const isProduction = import.meta.env.MODE === "production"
+
+type ReactErrorInfo = { componentStack?: string }
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const showErrorOverlay = (err: { title: string, message: string, reason: string, plugin: string }) => {
+  const ErrorOverlay = customElements.get("vite-error-overlay")
+  // don't open outside vite environment
+  if (!ErrorOverlay) {return}
+  console.log(err)
+  const overlay = new ErrorOverlay(err)
+  document.body.appendChild(overlay)
+}
+
+
+const handleServerErrors = () => {
+  if ((window as any).__staticRouterHydrationData?.errors) {
+
+    const {errors} = (window as any).__staticRouterHydrationData
+
+    Object.values(errors).forEach((error: any) => {
+      showErrorOverlay({
+        plugin: "ssr-router",
+        ...error.reason
+      })
+    })
+  }
+}
+
+
+// TODO: what type is this
+export const initWithRoutes = async (routesElement, opts) => {
+
+  await initApiClient()
+
+  cleanupURL()
+
+  handleServerErrors()
+
+
+  const routes = createRoutesFromElements(routesElement)
+  const router = createBrowserRouter(routes)
+
+
+  const toError = (error: unknown): Error =>
+    error instanceof Error ? error : new Error(String(error))
+
+  const mentionsHydration = (value: unknown, depth = 0): boolean => {
+    if (depth > 5) {
+      return false
+    }
+    if (typeof value === "string") {
+      return value.toLowerCase().includes("hydrat")
+    }
+    if (value instanceof Error) {
+      const digest = (value as { digest?: unknown }).digest
+      const cause = (value as { cause?: unknown }).cause
+      return (
+        mentionsHydration(value.message, depth + 1) ||
+        mentionsHydration(digest, depth + 1) ||
+        mentionsHydration(cause, depth + 1)
+      )
+    }
+    return false
+  }
+
+  const phReactHandler =
+    (react_context: "uncaught" | "caught" | "recoverable") =>
+    (error: unknown, errorInfo?: ReactErrorInfo) => {
+      const err = toError(error)
+      // send as exception (counts toward error tracking)
+      posthog.captureException(err, {
+        react_context,
+        component_stack: errorInfo?.componentStack
+      })
+      if (react_context === "uncaught") {
+        console.warn("Uncaught error", err, errorInfo?.componentStack)
+      }
+    }
+
+  const hydrationOptions: Parameters<typeof hydrateRoot>[2] | undefined = isProduction ? {
+    onUncaughtError: phReactHandler("uncaught"),
+    onCaughtError: phReactHandler("caught"),
+    onRecoverableError: phReactHandler("recoverable")
+  } : (opts?.devThrowsOnHydrationErrors ? {
+    onRecoverableError(error, errorInfo) {
+      const err = toError(error)
+      if (mentionsHydration(err) || mentionsHydration(errorInfo?.componentStack)) {
+        throw err
+      }
+      // For non-hydration recoverable errors in dev, keep a visible signal.
+      console.error(err, errorInfo?.componentStack)
+    }
+  } : undefined)
+
+
+  hydrateRoot(
+    document.getElementById("root") as HTMLElement,
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>,
+    hydrationOptions
+  )
+
+}

package/src/initClient.ts

@@ -1,35 +0,0 @@
-import { initApiClient } from "./apiClient"
-import {cleanupURL} from "./cleanupURL"
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const showErrorOverlay = (err: { title: string, message: string, reason: string, plugin: string }) => {
-  const ErrorOverlay = customElements.get("vite-error-overlay")
-  // don't open outside vite environment
-  if (!ErrorOverlay) {return}
-  console.log(err)
-  const overlay = new ErrorOverlay(err)
-  document.body.appendChild(overlay)
-}
-
-
-const handleServerErrors = () => {
-  if ((window as any).__staticRouterHydrationData?.errors) {
-
-    const {errors} = (window as any).__staticRouterHydrationData
-
-    Object.values(errors).forEach((error: any) => {
-      showErrorOverlay({
-        plugin: "ssr-router",
-        ...error.reason
-      })
-    })
-  }
-}
-
-export const initClient = () => {
-  initApiClient()
-
-  cleanupURL()
-
-  handleServerErrors()
-}