Setup an Error Boundary in React

Link to chapter - https://serverless-stack.com/chapters/setup-an-error-boundary-in-react.html

Just wanted to point out that the error boundary comment section can’t be accessed through the chapter itself, I had to manually navigate myself here. The link there is currently - https://discourse.sst.dev/t/

Also, the way things are set up in the tutorial, Sentry doesn’t recognise the issues. It is still waiting for the project to be set-up correctly. Error Boundaries are working properly though!

Thanks for pointing it out! Fixed.

For the Sentry part, make sure Sentry is configured correctly with your account.

The test error we created in the tutorial will not appear for me in Sentry unless I add “localhost” to the project’s allowed domains. Is this always necessary to add for viewing test issues with projects, or is there a way for it to work with just the “*” domain as defaulted?

Oh that’s interesting. You don’t have to. Unless you want to use Sentry while debugging issues locally.

Hm…even after adding localhost to Allowed Domains (which shouldn’t be needed according to https://github.com/getsentry/sentry/issues/1461), I still get the “Cannot fetch resource due to restricted IP address” message when Sentry logs an error from localhost:3000.

The exception stacktrace points to the minified JS, which is not super helpful.


However this tutorial for the Sentry Netlify Build Plugin takes care of source mapping for errors that originate from a Netlify deploy (even works on Preview for branches that aren’t master):

I haven’t looked into this in detail but usually if you are debugging locally, you shouldn’t need Sentry. Are you just trying to test something out?

In this chapter, we are just doing a test to make sure the data is being sent to Sentry.

I’ve followed the tutorial on the ErrorBoundary component, but I’m not able to see the debug information. I’ve confirmed I’ve copied the code correctly, properly triggered the error per the instructions, and that the NODE_ENV is set to development. I can only see the fallback UI, not the debug stack.

I’m using the following:

  • Node v14.19.1
  • NPM 6.14.16
  • @serverless-stack/cli & resources v0.69.3
  • React:
    “react”: “^18.0.0”,
    “react-bootstrap”: “1.6.1”,
    “react-dom”: “^18.0.0”,
    “react-icons”: “4.2.0”,
    “react-router-bootstrap”: “0.25.0”,
    “react-router-dom”: “5.2.0”,
    “react-scripts”: “5.0.0”,

I’ve created a separate branch in my personal Github repo so others might try to replicate this issue.

I’m not sure where to look next. Any suggestions? It’s not critical, of course, but I would like to see it in action. Thanks!

Suggesting a minor change. Remove the semicolons from this block testing for errors:

{
  isAuthenticated ? renderNotes() : renderLander();
}
{
  isAuthenticated.none.no;
}

If you don’t you will get the wrong kind of error - a compilation error that won’t log out to sentry.