Feature/error boundary name

examples/sdk/react/src/App.tsx

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import './App.css';
-import { BacktraceClient } from '@backtrace/react';
+import { BacktraceClient, ErrorBoundary } from '@backtrace/react';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { SUBMISSION_URL } from './consts';
+import InnerFallback from './components/InnerFallback';
+import ButtonWithError from './components/ButtonWithError';
 
 function App() {
     const [clicked, setClicked] = useState(false);
@@ -50,8 +52,11 @@ function App() {
                 </p>
                 <div className="column">
                     <button className="action-button" onClick={() => setClicked(true)}>
-                        <span className="action-button-text">Trigger ErrorBoundary</span>
+                        <span className="action-button-text">Trigger Main ErrorBoundary</span>
                     </button>
+                    <ErrorBoundary name="inner-boundary" fallback={<InnerFallback />}>
+                        <ButtonWithError />
+                    </ErrorBoundary>
                     <button className="action-button" onClick={() => sendError()}>
                         <span className="action-button-text">Send an error</span>
                     </button>

examples/sdk/react/src/components/ButtonWithError.tsx

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+export default function ButtonWithError() {
+    const [clicked, setClicked] = useState(false);
+
+    function throwOnClicked() {
+        if (clicked) {
+            throw new Error('Test throw in ButtonWithBoundary to demonstrate an Inner Error Boundary');
+        }
+    }
+
+    return (
+        <>
+            {throwOnClicked()}
+            <button className="action-button" onClick={() => setClicked(true)}>
+                <span className="action-button-text">Trigger Inner ErrorBoundary</span>
+            </button>
+        </>
+    );
+}

examples/sdk/react/src/Fallback.tsx → examples/sdk/react/src/components/Fallback.tsx

@@ -1,6 +1,6 @@
-import './App.css';
+import '../App.css';
 
-export function Fallback() {
+export default function Fallback() {
     return (
         <div className="App">
             <div className="App-header center">
@@ -10,7 +10,8 @@ export function Fallback() {
                     alt="Sauce Labs"
                 />
                 <h1 className="card-header">
-                    This is the fallback component that gets rendered after a rendering error!
+                    This is the fallback component that gets rendered after a rendering error within the main
+                    ErrorBoundary!
                 </h1>
                 <p className="card-text">Check your Backtrace console to see the Error and Component stacks!</p>
             </div>

examples/sdk/react/src/components/InnerFallback.tsx

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+import { toast } from 'react-toastify';
+
+export default function InnerFallback() {
+    useEffect(() => {
+        toast('Inner ErrorBoundary Triggered! Check your Backtrace console to see the Error and Component stacks.');
+    });
+    return null;
+}

examples/sdk/react/src/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import { ErrorBoundary, BacktraceClient } from '@backtrace/react';
-import { Fallback } from './Fallback';
+import Fallback from './components/Fallback';
 import { SUBMISSION_URL } from './consts';
 
 BacktraceClient.initialize({
@@ -21,7 +21,7 @@ BacktraceClient.initialize({
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
     <React.StrictMode>
-        <ErrorBoundary fallback={<Fallback />}>
+        <ErrorBoundary name="main-boundary" fallback={<Fallback />}>
             <App />
         </ErrorBoundary>
     </React.StrictMode>,

packages/react/package.json

@@ -37,9 +37,12 @@
         "jest": "^29.5.0",
         "jest-environment-jsdom": "^29.5.0",
         "ts-jest": "^29.1.1",
-        "typescript": "^5.0.4"
+        "ts-loader": "^9.4.4",
+        "typescript": "^5.0.4",
+        "webpack": "^5.88.2",
+        "webpack-cli": "^5.1.4"
     },
     "peerDependencies": {
-        "react": ">=16.14.0"
+        "react": ">=16.8.0"
     }
 }

packages/react/src/ErrorBoundary.tsx

@@ -7,6 +7,7 @@ type RenderFallback = () => ReactElement;
 export interface Props {
     children: ReactNode;
     fallback?: ReactElement | RenderFallback;
+    name?: string;
 }
 
 export interface State {
@@ -32,7 +33,11 @@ export class ErrorBoundary extends Component<Props, State> {
     }
 
     public async componentDidCatch(error: Error, info: ErrorInfo) {
-        const report = new BacktraceReport(error);
+        const { name } = this.props;
+        const report = new BacktraceReport(error, {
+            'errorboundary.name': name ?? 'main',
+            'error.type': 'Unhandled exception',
+        });
         report.addStackTrace(this.COMPONENT_THREAD_NAME, info.componentStack);
         await this._client.send(report);
     }