feat(sanity): add call to config from WorkspaceRouterProvider

dev/test-studio/sanity.config.ts

@@ -77,11 +77,11 @@ const sharedSettings = definePlugin({
     },
   },
 
-  onStudioError: (error, errorMessage) => {
+  onStudioError: (error, errorInfo) => {
     // eslint-disable-next-line no-console
     console.log(error)
     // eslint-disable-next-line no-console
-    console.log(errorMessage)
+    console.log(errorInfo)
   },
 
   document: {
@@ -253,6 +253,12 @@ export default defineConfig([
     dataset: 'test',
     plugins: [sharedSettings(), studioComponentsPlugin(), formComponentsPlugin()],
     basePath: '/custom-components',
+    onStudioError: (error, errorInfo) => {
+      // eslint-disable-next-line no-console
+      console.log(error)
+      // eslint-disable-next-line no-console
+      console.log(errorInfo)
+    },
     form: {
       components: {
         input: Input,

packages/sanity/src/core/config/configPropertyReducers.ts

@@ -324,7 +324,7 @@ export const onStudioErrorResolver = (opts: {
   if (typeof resolver === 'function') return resolver(context.error, context.errorInfo)
 
   throw new Error(
-    `Expected \`document.onStudioERror\` to be a a function, but received ${getPrintableType(
+    `Expected \`document.onStudioError\` to be a a function, but received ${getPrintableType(
       resolver,
     )}`,
   )

packages/sanity/src/core/studio/workspaceLoader/WorkspaceRouterProvider.tsx

@@ -1,12 +1,15 @@
+import {ErrorBoundary} from '@sanity/ui'
 import {escapeRegExp, isEqual} from 'lodash'
 import {
   type ComponentType,
   type MutableRefObject,
   type ReactNode,
+  useCallback,
   useEffect,
   useMemo,
   useRef,
 } from 'react'
+import {useSource} from 'sanity'
 import {type Router, RouterProvider, type RouterState} from 'sanity/router'
 import {useSyncExternalStoreWithSelector} from 'use-sync-external-store/with-selector.js'
 
@@ -30,15 +33,30 @@ export function WorkspaceRouterProvider({
   const history = useRouterHistory()
   const router = useMemo(() => createRouter({basePath, tools}), [basePath, tools])
   const [state, onNavigate] = useRouterFromWorkspaceHistory(history, router, tools)
+  const {onStudioError} = useSource()
+
+  const handleCatchError = useCallback(
+    ({error, info}: {error: Error; info: React.ErrorInfo}) => {
+      /** catches errors in studio to be able to be caught in the config */
+      if (onStudioError) {
+        onStudioError(error, info)
+      }
+
+      throw new Error(error.message)
+    },
+    [onStudioError],
+  )
 
   // `state` is only null if the Studio is somehow rendering in SSR or using hydrateRoot in combination with `unstable_noAuthBoundary`.
   // Which makes this loading condition extremely rare, most of the time it'll render `RouteProvider` right away.
   if (!state) return <LoadingComponent />
 
   return (
-    <RouterProvider onNavigate={onNavigate} router={router} state={state}>
-      {children}
-    </RouterProvider>
+    <ErrorBoundary onCatch={handleCatchError}>
+      <RouterProvider onNavigate={onNavigate} router={router} state={state}>
+        {children}
+      </RouterProvider>
+    </ErrorBoundary>
   )
 }