feat(sanity): add call on FormBuilderInput, add ability to have confi…

…g as undefined
sanity-io · Sep 27, 2024 · 92b6071 · 92b6071
1 parent 9297864
commit 92b6071
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 8 deletions.
diff --git a/dev/test-studio/components/studioComponents.tsx b/dev/test-studio/components/studioComponents.tsx
@@ -33,6 +33,7 @@ const useTitleContext = () => useContext(TitleContext)
 export function CustomLayout(props: LayoutProps) {
   const {renderDefault} = props
 
+  throw new Error('This is an error from the custom layout')
   return (
     <TitleContext.Provider value="Context value">
       <Box height="fill" data-testid="test-layout-config">

diff --git a/dev/test-studio/sanity.config.ts b/dev/test-studio/sanity.config.ts
@@ -77,13 +77,6 @@ const sharedSettings = definePlugin({
     },
   },
 
-  onStudioError: (error, errorInfo) => {
-    // eslint-disable-next-line no-console
-    console.log(error)
-    // eslint-disable-next-line no-console
-    console.log(errorInfo)
-  },
-
   document: {
     actions: documentActions,
     inspectors: (prev, ctx) => {
@@ -160,6 +153,13 @@ const defaultWorkspace = {
   projectId: 'ppsg7ml5',
   dataset: 'test',
   plugins: [sharedSettings()],
+
+  onStudioError: (error, errorInfo) => {
+    // eslint-disable-next-line no-console
+    console.log(error)
+    // eslint-disable-next-line no-console
+    console.log(errorInfo)
+  },
   basePath: '/test',
   icon: SanityMonogram,
   // eslint-disable-next-line camelcase

diff --git a/packages/sanity/src/core/config/configPropertyReducers.ts b/packages/sanity/src/core/config/configPropertyReducers.ts
@@ -322,6 +322,7 @@ export const onStudioErrorResolver = (opts: {
   const resolver = config.onStudioError
 
   if (typeof resolver === 'function') return resolver(context.error, context.errorInfo)
+  if (!resolver) return undefined
 
   throw new Error(
     `Expected \`document.onStudioError\` to be a a function, but received ${getPrintableType(

diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
@@ -304,6 +304,8 @@ function BaseImageInputComponent(props: BaseImageInputProps): JSX.Element {
   }, [menuButtonElement])
 
   const renderPreview = useCallback(() => {
+    throw new Error('This is an error from an image!')
+
     return (
       <ImageInputPreview
         directUploads={directUploads}

diff --git a/packages/sanity/src/core/form/studio/FormBuilderInputErrorBoundary.tsx b/packages/sanity/src/core/form/studio/FormBuilderInputErrorBoundary.tsx
@@ -1,5 +1,6 @@
 import {Box, Card, Code, ErrorBoundary, Stack, Text} from '@sanity/ui'
 import {useCallback, useMemo, useState} from 'react'
+import {useSource} from 'sanity'
 import {useHotModuleReload} from 'use-hot-module-reload'
 
 import {SchemaError} from '../../config'
@@ -27,10 +28,21 @@ export function FormBuilderInputErrorBoundary(
     error: null,
     info: {},
   })
+  const {onStudioError} = useSource()
   const handleRetry = useCallback(() => setError({error: null, info: {}}), [])
+  const handleCatch = useCallback(
+    ({error: caughtError, info: caughtInfo}: {error: Error; info: React.ErrorInfo}) => {
+      setError({error: caughtError, info: caughtInfo})
+
+      if (onStudioError) {
+        onStudioError(caughtError, caughtInfo)
+      }
+    },
+    [onStudioError],
+  )
 
   if (!error) {
-    return <ErrorBoundary onCatch={setError}>{children}</ErrorBoundary>
+    return <ErrorBoundary onCatch={handleCatch}>{children}</ErrorBoundary>
   }
 
   return <ErrorCard error={error} info={info} onRetry={handleRetry} />