Skip to content

NextJS App Crashes not being reported in Sentry #3970

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

Closed
4 tasks done
zacharypodbela opened this issue Sep 9, 2021 · 3 comments
Closed
4 tasks done

NextJS App Crashes not being reported in Sentry #3970

zacharypodbela opened this issue Sep 9, 2021 · 3 comments
Assignees
Labels
Package: nextjs Issues related to the Sentry Nextjs SDK Type: Improvement

Comments

@zacharypodbela
Copy link

Package + Version

  • @sentry/nextjs

Version:

6.12.0

Description

When an error causes a crash in NextJS, it is not reported to Sentry, even though the error is logged in the Chrome/browser console.

Reproducable Demo can be found here: https://github.com/zacharypodbela/sentry-nextjs-crash-demo

  • The above demo is a vanilla NextJS installation with Sentry installed. The only custom code added is the button that causes an intentional TypeError in the frontend.
@AbhiPrasad AbhiPrasad added the Package: nextjs Issues related to the Sentry Nextjs SDK label Sep 9, 2021
@AbhiPrasad AbhiPrasad self-assigned this Sep 9, 2021
@AbhiPrasad
Copy link
Member

AbhiPrasad commented Sep 10, 2021

Hey, thanks for reporting and for the detailed repro demo, it's highly appreciated.

The second error is not reported to Sentry because it occurs in the React component tree, so it doesn't bubble up to the global error handlers that Sentry is listening on. Instead, NextJS handles the error (through it's own React Error Boundary), and renders the built in Error component from next/error.

To get around this, you can create your own pages/_error.js page like we do in the official Sentry NextJS example: https://github.com/vercel/next.js/blob/canary/examples/with-sentry/pages/_error.js.

Alternatively, you can wrap your components with Sentry's React Error Boundary: https://docs.sentry.io/platforms/javascript/guides/react/components/errorboundary/.

We are working on a) improving our documentation around this and b) seeing if we can get better behaviour out of the box without you having to add an error boundary or configuring pages/_errors.js, will update this issue once we've made progress on that.

@AbhiPrasad
Copy link
Member

Related issue on documentation: #3901

@zacharypodbela
Copy link
Author

Thank you for the follow up @AbhiPrasad! I was able to catch the error with both ErrorBoundary and pages/_errors.js. Thank you so much.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: nextjs Issues related to the Sentry Nextjs SDK Type: Improvement
Projects
None yet
Development

No branches or pull requests

3 participants