[react-dom] Add types for onUncaughtError and onCaughtError

Types for facebook/react#28641
eps1lon · Mar 27, 2024 · 47a23eb · 47a23eb
1 parent 212dfbf
commit 47a23eb
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 0 deletions.
diff --git a/types/react-dom/canary.d.ts b/types/react-dom/canary.d.ts
@@ -145,8 +145,36 @@ declare module "./client" {
         [REACT_FORM_STATE_SIGIL]: never;
     }
 
+    interface RootOptions {
+        formState?: ReactFormState | null;
+        onUncaughtError?:
+            | ((error: unknown, errorInfo: { componentStack?: string | undefined }) => void)
+            | undefined;
+        onCaughtError?:
+            | ((
+                error: unknown,
+                errorInfo: {
+                    componentStack?: string | undefined;
+                    errorBoundary?: React.Component<unknown> | undefined;
+                },
+            ) => void)
+            | undefined;
+    }
+
     interface HydrationOptions {
         formState?: ReactFormState | null;
+        onUncaughtError?:
+            | ((error: unknown, errorInfo: { componentStack?: string | undefined }) => void)
+            | undefined;
+        onCaughtError?:
+            | ((
+                error: unknown,
+                errorInfo: {
+                    componentStack?: string | undefined;
+                    errorBoundary?: React.Component<unknown> | undefined;
+                },
+            ) => void)
+            | undefined;
     }
 
     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;
+        },
+    });
 }