Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ref(react): Rely on error.cause to link ErrorBoundary errors #4005

Merged
merged 4 commits into from
Oct 6, 2021

Conversation

AbhiPrasad
Copy link
Member

@AbhiPrasad AbhiPrasad commented Sep 22, 2021

React Error Boundaries rely on the componentDidCatch lifecycle hook to catch errors that occur inside React components. They are typed like so:

interface ErrorInfo {
  /**
   * Captures which component contained the exception, and its ancestors.
   */
  componentStack: string;
}
// error is a typical js error
// errorInfo comes from React
componentDidCatch(error: Error, errorInfo: React.ErrorInfo)

In React 17, the componentStack property of error info was changed to be more similar to an actual stack trace. This meant we could parse the componentStack as an exception and ingest it into Sentry. We ended up doing this. See #3532 for more details.

The way we did this is by creating two events, one from the original error, and one from the componentStack from React's error info. We then merged them together like so:

// originalEvent -> error
// errorBoundaryEvent -> componentStack
if (originalEvent.exception && Array.isArray(originalEvent.exception.values)) {
  originalEvent.exception.values = [...errorBoundaryEvent.exception.values, ...originalEvent.exception.values];
}

captureEvent(originalEvent)

This PR refactors this merging of two events, by getting rid of the captureEvent entirely in favour of just using captureException. We do this by taking advantage of error.cause, which should link the errors using our LinkedErrors integration. If a user doesn't want this behaviour to happen, they can strip the error.cause property using the beforeCapture option. In addition, if the user has LinkedErrors configured differently, they can update error.cause to whatever they want (they have full access with beforeCapture).

By moving to captureException, we also preserve the event hint, which should fix #3987.

Will open up a docs update after this PR is merged.

@github-actions
Copy link
Contributor

github-actions bot commented Sep 22, 2021

size-limit report

Path Size
@sentry/browser - CDN Bundle (gzipped) 22.32 KB (+0.01% 🔺)
@sentry/browser - Webpack 23.3 KB (0%)
@sentry/react - Webpack 23.33 KB (0%)
@sentry/browser + @sentry/tracing - CDN Bundle (gzipped) 29.78 KB (+0.01% 🔺)

@AbhiPrasad AbhiPrasad marked this pull request as ready for review October 5, 2021 17:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

originalException missing from beforeSend hint when using React ErrorBoundry
2 participants