feat(react): Allow for scope to be accessed before error (#2753)

Co-authored-by: Daniel Griesser <[email protected]>

Author: AbhiPrasad

CHANGELOG.md

@@ -7,6 +7,7 @@
 - [tracing] feat: `Add @sentry/tracing` (#2719)
 - [gatsby] fix: Make APM optional in gatsby package (#2752)
 - [tracing] ref: Use idleTimout if no activities occur in idle transaction (#2752)
+- [react] feat: Add `beforeCapture` option to ErrorBoundary (#2753)
 
 ## 5.19.2
 

packages/react/src/errorboundary.tsx

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/browser';
+import { captureException, ReportDialogOptions, Scope, showReportDialog, withScope } from '@sentry/browser';
 import * as hoistNonReactStatic from 'hoist-non-react-statics';
 import * as React from 'react';
 
@@ -18,7 +18,7 @@ export type ErrorBoundaryProps = {
    * Options to be passed into the Sentry report dialog.
    * No-op if {@link showDialog} is false.
    */
-  dialogOptions?: Sentry.ReportDialogOptions;
+  dialogOptions?: ReportDialogOptions;
   // tslint:disable no-null-undefined-union
   /**
    * A fallback component that gets rendered when the error boundary encounters an error.
@@ -38,6 +38,8 @@ export type ErrorBoundaryProps = {
   onReset?(error: Error | null, componentStack: string | null, eventId: string | null): void;
   /** Called on componentWillUnmount() */
   onUnmount?(error: Error | null, componentStack: string | null, eventId: string | null): void;
+  /** Called before the error is captured by Sentry, allows for you to add tags or context using the scope */
+  beforeCapture?(scope: Scope, error: Error | null, componentStack: string | null): void;
 };
 
 type ErrorBoundaryState = {
@@ -60,18 +62,24 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
   public state: ErrorBoundaryState = INITIAL_STATE;
 
   public componentDidCatch(error: Error, { componentStack }: React.ErrorInfo): void {
-    const eventId = Sentry.captureException(error, { contexts: { react: { componentStack } } });
-    const { onError, showDialog, dialogOptions } = this.props;
-    if (onError) {
-      onError(error, componentStack, eventId);
-    }
-    if (showDialog) {
-      Sentry.showReportDialog({ ...dialogOptions, eventId });
-    }
+    const { beforeCapture, onError, showDialog, dialogOptions } = this.props;
+
+    withScope(scope => {
+      if (beforeCapture) {
+        beforeCapture(scope, error, componentStack);
+      }
+      const eventId = captureException(error, { contexts: { react: { componentStack } } });
+      if (onError) {
+        onError(error, componentStack, eventId);
+      }
+      if (showDialog) {
+        showReportDialog({ ...dialogOptions, eventId });
+      }
 
-    // componentDidCatch is used over getDerivedStateFromError
-    // so that componentStack is accessible through state.
-    this.setState({ error, componentStack, eventId });
+      // componentDidCatch is used over getDerivedStateFromError
+      // so that componentStack is accessible through state.
+      this.setState({ error, componentStack, eventId });
+    });
   }
 
   public componentDidMount(): void {

packages/react/test/errorboundary.test.tsx

@@ -1,3 +1,4 @@
+import { Scope } from '@sentry/browser';
 import { fireEvent, render, screen } from '@testing-library/react';
 import * as React from 'react';
 
@@ -7,15 +8,19 @@ const mockCaptureException = jest.fn();
 const mockShowReportDialog = jest.fn();
 const EVENT_ID = 'test-id-123';
 
-jest.mock('@sentry/browser', () => ({
-  captureException: (err: any, ctx: any) => {
-    mockCaptureException(err, ctx);
-    return EVENT_ID;
-  },
-  showReportDialog: (options: any) => {
-    mockShowReportDialog(options);
-  },
-}));
+jest.mock('@sentry/browser', () => {
+  const actual = jest.requireActual('@sentry/browser');
+  return {
+    ...actual,
+    captureException: (err: any, ctx: any) => {
+      mockCaptureException(err, ctx);
+      return EVENT_ID;
+    },
+    showReportDialog: (options: any) => {
+      mockShowReportDialog(options);
+    },
+  };
+});
 
 const TestApp: React.FC<ErrorBoundaryProps> = ({ children, ...props }) => {
   const [isError, setError] = React.useState(false);
@@ -197,6 +202,31 @@ describe('ErrorBoundary', () => {
       });
     });
 
+    it('calls `beforeCapture()` when an error occurs', () => {
+      const mockBeforeCapture = jest.fn();
+
+      const testBeforeCapture = (...args: any[]) => {
+        expect(mockCaptureException).toHaveBeenCalledTimes(0);
+        mockBeforeCapture(...args);
+      };
+
+      render(
+        <TestApp fallback={<p>You have hit an error</p>} beforeCapture={testBeforeCapture}>
+          <h1>children</h1>
+        </TestApp>,
+      );
+
+      expect(mockBeforeCapture).toHaveBeenCalledTimes(0);
+      expect(mockCaptureException).toHaveBeenCalledTimes(0);
+
+      const btn = screen.getByTestId('errorBtn');
+      fireEvent.click(btn);
+
+      expect(mockBeforeCapture).toHaveBeenCalledTimes(1);
+      expect(mockBeforeCapture).toHaveBeenLastCalledWith(expect.any(Scope), expect.any(Error), expect.any(String));
+      expect(mockCaptureException).toHaveBeenCalledTimes(1);
+    });
+
     it('shows a Sentry Report Dialog with correct options', () => {
       const options = { title: 'custom title' };
       render(