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.serverless-stack.com/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.