Attach React component stacks to error data

Author: niemyjski

packages/browser/src/plugins/BrowserErrorPlugin.ts

@@ -12,6 +12,9 @@ import {
 
 import { fromError, StackFrame } from "stacktrace-js";
 
+const ReactComponentStackContextKey = "@@_ComponentStack";
+const ReactComponentStackDataKey = "@component_stack";
+
 export class BrowserErrorPlugin implements IEventPlugin {
   public priority = 30;
   public name = "BrowserErrorPlugin";
@@ -36,6 +39,12 @@ export class BrowserErrorPlugin implements IEventPlugin {
             result.data["@ext"] = JSON.parse(additionalData);
           }
 
+          const componentStack = context.eventContext[ReactComponentStackContextKey];
+          if (typeof componentStack === "string" && componentStack) {
+            result.data = result.data ?? {};
+            result.data[ReactComponentStackDataKey] = componentStack;
+          }
+
           context.event.data[KnownEventDataKeys.Error] = result;
         }
       }

packages/browser/test/plugins/BrowserErrorPlugin.test.ts

@@ -111,6 +111,16 @@ describe("BrowserErrorPlugin", () => {
       const additionalData = getAdditionalData(context.event);
       expect(additionalData).toBeUndefined();
     });
+
+    test("should attach React component stack to error data", async () => {
+      const componentStack = "\n    at CrashyComponent (http://localhost:3000/index.js:10:20)";
+      context.eventContext["@@_ComponentStack"] = componentStack;
+
+      await processError(new Error("Component crashed"));
+
+      expect(getError(context.event)?.data?.["@component_stack"]).toBe(componentStack);
+      expect(context.event.data?.componentStack).toBeUndefined();
+    });
   });
 });
 

packages/react-native/src/ExceptionlessErrorBoundary.tsx

@@ -2,6 +2,8 @@ import { Component, type ErrorInfo as ReactErrorInfo, type PropsWithChildren, ty
 
 import { Exceptionless } from "./client.js";
 
+const ReactComponentStackContextKey = "@@_ComponentStack";
+
 interface ErrorBoundaryProps {
   fallback?: ReactNode;
 }
@@ -23,7 +25,7 @@ export class ExceptionlessErrorBoundary extends Component<PropsWithChildren<Erro
   async componentDidCatch(error: Error, errorInfo: ReactErrorInfo): Promise<void> {
     const builder = Exceptionless.createException(error);
     if (errorInfo.componentStack) {
-      builder.setProperty("componentStack", errorInfo.componentStack);
+      builder.setContextProperty(ReactComponentStackContextKey, errorInfo.componentStack);
     }
 
     await builder.submit();

packages/react-native/src/plugins/ReactNativeErrorPlugin.ts

@@ -16,6 +16,9 @@ interface ParsedLocation {
   isNative: boolean;
 }
 
+const ReactComponentStackContextKey = "@@_ComponentStack";
+const ReactComponentStackDataKey = "@component_stack";
+
 export class ReactNativeErrorPlugin implements IEventPlugin {
   public priority = 30;
   public name = "ReactNativeErrorPlugin";
@@ -36,6 +39,12 @@ export class ReactNativeErrorPlugin implements IEventPlugin {
           result.data["@ext"] = JSON.parse(additionalData);
         }
 
+        const componentStack = context.eventContext[ReactComponentStackContextKey];
+        if (typeof componentStack === "string" && componentStack) {
+          result.data = result.data ?? {};
+          result.data[ReactComponentStackDataKey] = componentStack;
+        }
+
         context.event.data[KnownEventDataKeys.Error] = result;
       }
     }

packages/react-native/test/plugins/ReactNativeErrorPlugin.test.ts

@@ -162,6 +162,18 @@ describe("ReactNativeErrorPlugin", () => {
       })
     ]);
   });
+
+  test("should attach React component stack to error data", async () => {
+    const error = new Error("Component crashed inside error boundary!");
+    const componentStack = "\n    at CrashyComponent (http://localhost:8083/index.bundle:10:20)";
+    context.eventContext.setException(error);
+    context.eventContext["@@_ComponentStack"] = componentStack;
+
+    await plugin.run(context);
+
+    expect(getError(context.event)?.data?.["@component_stack"]).toBe(componentStack);
+    expect(context.event.data?.componentStack).toBeUndefined();
+  });
 });
 
 function getError(event: Event): ErrorInfo | undefined {

packages/react/src/ExceptionlessErrorBoundary.tsx

@@ -1,6 +1,8 @@
 import { Component, type ErrorInfo as ReactErrorInfo, type PropsWithChildren } from "react";
 import { Exceptionless } from "@exceptionless/browser";
 
+const ReactComponentStackContextKey = "@@_ComponentStack";
+
 type ErrorState = {
   hasError: boolean;
 };
@@ -13,7 +15,7 @@ export class ExceptionlessErrorBoundary extends Component<PropsWithChildren, Err
   async componentDidCatch(error: Error, errorInfo: ReactErrorInfo) {
     const builder = Exceptionless.createException(error);
     if (errorInfo.componentStack) {
-      builder.setProperty("componentStack", errorInfo.componentStack);
+      builder.setContextProperty(ReactComponentStackContextKey, errorInfo.componentStack);
     }
 
     await builder.submit();