Add React error boundary fallback

Author: niemyjski

.agents/skills/exceptionless-javascript/references/client-react.md

@@ -27,7 +27,7 @@ class App extends Component {
 
   render() {
     return (
-      <ExceptionlessErrorBoundary>
+      <ExceptionlessErrorBoundary fallback={<div>Something went wrong.</div>}>
         <div>Application content</div>
       </ExceptionlessErrorBoundary>
     );

example/react/src/App.css

@@ -33,6 +33,19 @@
   margin: auto;
 }
 
+.error-container {
+  max-width: 720px;
+}
+
+.error-eyebrow {
+  color: #61dafb;
+  font-size: 0.7em;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  margin-bottom: 0;
+  text-transform: uppercase;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

example/react/src/App.jsx

@@ -37,13 +37,29 @@ function ExceptionlessExampleContent({ error, message, errorInfo, onThrowCompone
   );
 }
 
+function ErrorFallback({ onReset }) {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <div className="container error-container">
+          <p className="error-eyebrow">Component error captured</p>
+          <h1 className="App-title">Something went wrong</h1>
+          <p>The error was submitted to Exceptionless. You can reset this sample and keep testing without refreshing the page.</p>
+          <button onClick={onReset}>Try again</button>
+        </div>
+      </header>
+    </div>
+  );
+}
+
 class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
       error: false,
-      message: "",
-      errorInfo: ""
+      errorBoundaryKey: 0,
+      errorInfo: "",
+      message: ""
     };
   }
   async componentDidMount() {
@@ -60,6 +76,13 @@ class App extends Component {
     this.setState({ error: true });
   };
 
+  resetComponentError = () => {
+    this.setState((state) => ({
+      error: false,
+      errorBoundaryKey: state.errorBoundaryKey + 1
+    }));
+  };
+
   submitMessage = async () => {
     const message = "Hello, world!";
     this.setState({ message: "", errorInfo: "" });
@@ -83,7 +106,7 @@ class App extends Component {
 
   render() {
     return (
-      <ExceptionlessErrorBoundary>
+      <ExceptionlessErrorBoundary key={this.state.errorBoundaryKey} fallback={<ErrorFallback onReset={this.resetComponentError} />}>
         <ExceptionlessExampleContent
           error={this.state.error}
           message={this.state.message}

packages/react/README.md

@@ -31,7 +31,7 @@ class App extends Component {
 
   render() {
     return (
-      <ExceptionlessErrorBoundary>
+      <ExceptionlessErrorBoundary fallback={<div>Something went wrong.</div>}>
         <div>// YOUR APP COMPONENTS HERE</div>
       </ExceptionlessErrorBoundary>
     );

packages/react/src/ExceptionlessErrorBoundary.tsx

@@ -1,14 +1,18 @@
-import { Component, type ErrorInfo as ReactErrorInfo, type PropsWithChildren } from "react";
+import { Component, type ErrorInfo as ReactErrorInfo, type PropsWithChildren, type ReactNode } from "react";
 import { Exceptionless } from "@exceptionless/browser";
 
 const ReactComponentStackContextKey = "@@_ComponentStack";
 
-type ErrorState = {
+interface ErrorBoundaryProps {
+  fallback?: ReactNode;
+}
+
+interface ErrorState {
   hasError: boolean;
-};
+}
 
-export class ExceptionlessErrorBoundary extends Component<PropsWithChildren, ErrorState> {
-  constructor(props: Readonly<Record<PropertyKey, unknown>> | Record<PropertyKey, unknown>) {
+export class ExceptionlessErrorBoundary extends Component<PropsWithChildren<ErrorBoundaryProps>, ErrorState> {
+  constructor(props: Readonly<PropsWithChildren<ErrorBoundaryProps>>) {
     super(props);
     this.state = { hasError: false };
   }
@@ -17,7 +21,7 @@ export class ExceptionlessErrorBoundary extends Component<PropsWithChildren, Err
     return { hasError: true };
   }
 
-  async componentDidCatch(error: Error, errorInfo: ReactErrorInfo) {
+  async componentDidCatch(error: Error, errorInfo: ReactErrorInfo): Promise<void> {
     const builder = Exceptionless.createException(error);
     if (errorInfo.componentStack) {
       builder.setContextProperty(ReactComponentStackContextKey, errorInfo.componentStack);
@@ -26,9 +30,9 @@ export class ExceptionlessErrorBoundary extends Component<PropsWithChildren, Err
     await builder.submit();
   }
 
-  render() {
+  render(): ReactNode {
     if (this.state.hasError) {
-      return null;
+      return this.props.fallback ?? null;
     }
 
     return this.props.children;

packages/react/test/ExceptionlessErrorBoundary.test.tsx

@@ -0,0 +1,77 @@
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { ExceptionlessErrorBoundary } from "../src/ExceptionlessErrorBoundary.js";
+
+const mocks = vi.hoisted(() => ({
+  createException: vi.fn(),
+  setContextProperty: vi.fn(),
+  submit: vi.fn().mockResolvedValue(undefined)
+}));
+
+vi.mock("@exceptionless/browser", () => ({
+  Exceptionless: {
+    createException: mocks.createException.mockImplementation(() => ({
+      setContextProperty: mocks.setContextProperty,
+      submit: mocks.submit
+    }))
+  }
+}));
+
+function Crash(): React.ReactNode {
+  throw new Error("Boom");
+}
+
+describe("ExceptionlessErrorBoundary", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let consoleError: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    consoleError.mockRestore();
+  });
+
+  test("should render fallback content when a child throws", async () => {
+    await act(async () => {
+      root.render(
+        <ExceptionlessErrorBoundary fallback={<p>Something went wrong.</p>}>
+          <Crash />
+        </ExceptionlessErrorBoundary>
+      );
+      await Promise.resolve();
+    });
+
+    expect(container.textContent).toBe("Something went wrong.");
+    expect(mocks.createException).toHaveBeenCalledWith(expect.any(Error));
+    expect(mocks.setContextProperty).toHaveBeenCalled();
+    expect(mocks.submit).toHaveBeenCalled();
+  });
+
+  test("should render nothing by default when a child throws", async () => {
+    await act(async () => {
+      root.render(
+        <ExceptionlessErrorBoundary>
+          <Crash />
+        </ExceptionlessErrorBoundary>
+      );
+      await Promise.resolve();
+    });
+
+    expect(container.textContent).toBe("");
+    expect(mocks.createException).toHaveBeenCalledWith(expect.any(Error));
+    expect(mocks.submit).toHaveBeenCalled();
+  });
+});

vitest.config.ts

@@ -59,6 +59,26 @@ export default defineConfig({
           }
         }
       },
+      {
+        test: {
+          name: "react",
+          root: "packages/react",
+          environment: "jsdom",
+          environmentOptions: {
+            jsdom: {
+              url: "http://localhost/"
+            }
+          }
+        },
+        resolve: {
+          conditions: ["source"],
+          alias: {
+            "@exceptionless/core": path.resolve(__dirname, "packages/core/src"),
+            "@exceptionless/browser": path.resolve(__dirname, "packages/browser/src"),
+            "@exceptionless/react": path.resolve(__dirname, "packages/react/src")
+          }
+        }
+      },
       {
         test: {
           name: "react-native",