refactor(errors): improve typings for global error handler

Author: rexxars

packages/sanity/src/components/globalErrorHandler/index.ts

@@ -1 +1,2 @@
 export * from './GlobalErrorHandler'
+export * from './types'

packages/sanity/src/components/globalErrorHandler/types.ts

@@ -0,0 +1,17 @@
+export interface GlobalErrorMessage {
+  error: Error | null
+  params: {
+    colno: number
+    lineno: number
+    error: Error
+    event: ErrorEvent | string
+    source?: string
+  }
+}
+
+export type GlobalErrorSubscriber = (msg: GlobalErrorMessage) => void
+export type GlobalErrorUnsubscriber = () => void
+
+export interface GlobalErrorChannel {
+  subscribe: (subscriber: GlobalErrorSubscriber) => GlobalErrorUnsubscriber
+}

packages/sanity/src/studio/StudioErrorBoundary.tsx

@@ -9,9 +9,9 @@ interface StudioErrorBoundaryProps {
   children: React.ReactNode
 }
 
-const errorChannel = (globalScope as any).__sanityErrorChannel
+const errorChannel = globalScope.__sanityErrorChannel
 
-function isKnownError(err: unknown): boolean {
+function isKnownError(err: Error): boolean {
   if (err instanceof SchemaError) {
     return true
   }
@@ -29,10 +29,15 @@ export function StudioErrorBoundary({children}: StudioErrorBoundaryProps) {
   useEffect(() => {
     if (!errorChannel) return undefined
 
-    return errorChannel.subscribe((msg: any) => {
+    return errorChannel.subscribe((msg) => {
       // NOTE: Certain errors (such as the `ResizeObserver loop limit exceeded` error) is thrown
-      // by the browser, and does not include an `error` property. We ignore these error.
-      if (!msg.error || isKnownError(msg.error)) {
+      // by the browser, and does not include an `error` property. We ignore these errors.
+      if (!msg.error) {
+        return
+      }
+
+      // For errors that we "expect", eg have specific error screens for, do not push a toast
+      if (isKnownError(msg.error)) {
         return
       }
 

packages/sanity/src/util/globalScope.ts

@@ -1,3 +1,5 @@
+import type {GlobalErrorChannel} from '../components/globalErrorHandler'
+
 /**
  * Gets the global scope instance in a given environment.
  *
@@ -7,7 +9,7 @@
  * - The `self` variable is the global scope in workers and others
  * - The `global` variable is the global scope in Node.js
  */
-function getGlobalScope() {
+function getGlobalScope(): typeof globalThis & {__sanityErrorChannel?: GlobalErrorChannel} {
   if (typeof globalThis !== 'undefined') return globalThis
   if (typeof window !== 'undefined') return window
   if (typeof self !== 'undefined') return self