[react-dom] Add types for onUncaughtError and onCaughtError

eps1lon · eps1lon · commit 67b6b769527b · 2024-03-27T23:01:47.000+01:00
Types for facebook/react#28641
diff --git a/types/react-dom/canary.d.ts b/types/react-dom/canary.d.ts
@@ -145,8 +145,22 @@ declare module "./client" {
         [REACT_FORM_STATE_SIGIL]: never;
     }
 
+    interface RootOptions {
+        formState?: ReactFormState | null;
+        onUncaughtError?: (error: unknown, errorInfo: { componentStack?: string | undefined }) => void;
+        onCaughtError?: (
+            error: unknown,
+            errorInfo: { componentStack?: string | undefined; errorBoundary?: React.Component<unknown> | undefined },
+        ) => void;
+    }
+
     interface HydrationOptions {
         formState?: ReactFormState | null;
+        onUncaughtError?: (error: unknown, errorInfo: { componentStack?: string | undefined }) => void;
+        onCaughtError?: (
+            error: unknown,
+            errorInfo: { componentStack?: string | undefined; errorBoundary?: React.Component<unknown> | undefined },
+        ) => void;
     }
 
     interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_CREATE_ROOT_CONTAINERS {
diff --git a/types/react-dom/test/canary-tests.tsx b/types/react-dom/test/canary-tests.tsx
@@ -265,4 +265,48 @@ function formTest() {
 function createRoot(validContainer: Element | DocumentFragment | Document) {
     ReactDOMClient.createRoot(document);
     ReactDOMClient.createRoot(validContainer);
+
+    ReactDOMClient.createRoot(document, {
+        onUncaughtError: (error, errorInfo) => {
+            // $ExpectType unknown
+            error;
+            // $ExpectType string | undefined
+            errorInfo.componentStack;
+            // @ts-expect-error -- only on onRecoverableError
+            errorInfo.digest;
+            // @ts-expect-error -- only on onCaughtError
+            errorInfo.errorBoundary;
+        },
+        onCaughtError: (error, errorInfo) => {
+            // $ExpectType unknown
+            error;
+            // $ExpectType string | undefined
+            errorInfo.componentStack;
+            // @ts-expect-error -- only on onRecoverableError
+            errorInfo.digest;
+            // $ExpectType Component<unknown, {}, any> | undefined
+            errorInfo.errorBoundary;
+        },
+    });
+
+    ReactDOMClient.hydrateRoot(document.body, null, {
+        onUncaughtError: (error, errorInfo) => {
+            // $ExpectType unknown
+            error;
+            // $ExpectType string | undefined
+            errorInfo.componentStack;
+            // @ts-expect-error -- only on onRecoverableError
+            errorInfo.digest;
+        },
+        onCaughtError: (error, errorInfo) => {
+            // $ExpectType unknown
+            error;
+            // $ExpectType string | undefined
+            errorInfo.componentStack;
+            // @ts-expect-error -- only on onRecoverableError
+            errorInfo.digest;
+            // $ExpectType Component<unknown, {}, any> | undefined
+            errorInfo.errorBoundary;
+        },
+    });
 }
