# Setup an Error Boundary in React

**URL:** https://discourse.sst.dev/t/setup-an-error-boundary-in-react/1732
**Category:** Chapter Comments
**Created:** [April 8, 2020, 11:34pm UTC](https://discourse.sst.dev/t/setup-an-error-boundary-in-react/1732 "2020-04-08T23:34:20Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)
#### Post date: [April 8, 2020, 11:34pm UTC](https://discourse.sst.dev/t/setup-an-error-boundary-in-react/1732/1 "2020-04-08T23:34:20Z")

</div>

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

---

<div class="post-metadata">

### Author: ![sanzok](https://avatars.discourse-cdn.com/v4/letter/s/85f322/32.png) [@sanzok](https://discourse.sst.dev/u/sanzok)
#### Post date: [August 15, 2020, 12:39pm UTC](https://discourse.sst.dev/t/setup-an-error-boundary-in-react/1732/2 "2020-08-15T12:39:23Z")

</div>

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/](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!

---

<div class="post-metadata">

### Author: ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)
#### Post date: [August 15, 2020, 5:37pm UTC](https://discourse.sst.dev/t/setup-an-error-boundary-in-react/1732/3 "2020-08-15T17:37:47Z")

</div>

Thanks for pointing it out! Fixed.

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

---

<div class="post-metadata">

### Author: ![mlawrence103](https://avatars.discourse-cdn.com/v4/letter/m/e9a140/32.png) [@mlawrence103](https://discourse.sst.dev/u/mlawrence103)
#### Post date: [September 2, 2020, 4:44pm UTC](https://discourse.sst.dev/t/setup-an-error-boundary-in-react/1732/4 "2020-09-02T16:44:33Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)
#### Post date: [September 7, 2020, 11:49pm UTC](https://discourse.sst.dev/t/setup-an-error-boundary-in-react/1732/5 "2020-09-07T23:49:20Z")

</div>

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

---

<div class="post-metadata">

### Author: ![sometimescasey](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/sometimescasey/32/984_2.png) [@sometimescasey](https://discourse.sst.dev/u/sometimescasey)
#### Post date: [October 1, 2020, 1:42pm UTC](https://discourse.sst.dev/t/setup-an-error-boundary-in-react/1732/6 "2020-10-01T13:42:28Z")

</div>

Hm…even after adding localhost to Allowed Domains (which shouldn’t be needed according to [https://github.com/getsentry/sentry/issues/1461](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.

 ![image](https://canada1.discourse-cdn.com/flex032/uploads/serverless_stack/original/1X/aa3b61fdc54c66b9d8d96c0351dc11ccc217802b.png)  
 ![image](https://canada1.discourse-cdn.com/flex032/uploads/serverless_stack/original/1X/0a6f9405f1f4f29db2c486d89f97d70e9c45f3b7.png)

However this tutorial for the [Sentry Netlify Build Plugin](https://blog.sentry.io/2020/06/08/automating-sentry-releases-with-our-netlify-build-plugin) takes care of [source mapping](https://docs.sentry.io/platforms/javascript/sourcemaps/) for errors that originate from a Netlify deploy (even works on Preview for branches that aren’t master):

 ![image](https://canada1.discourse-cdn.com/flex032/uploads/serverless_stack/original/1X/8eccbda042baf83d630c0ae66f5d15f29c6dd872.png)

---

<div class="post-metadata">

### Author: ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)
#### Post date: [October 15, 2020, 6:51pm UTC](https://discourse.sst.dev/t/setup-an-error-boundary-in-react/1732/7 "2020-10-15T18:51:10Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![pflugs30](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/pflugs30/32/1319_2.png) [@pflugs30](https://discourse.sst.dev/u/pflugs30)
#### Post date: [April 1, 2022, 3:26am UTC](https://discourse.sst.dev/t/setup-an-error-boundary-in-react/1732/8 "2022-04-01T03:26:03Z")

</div>

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](https://github.com/pflugs30/demo-notes-app/tree/error-boundary-display) 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!

---

<div class="post-metadata">

### Author: ![jpmaff](https://avatars.discourse-cdn.com/v4/letter/j/bcef8e/32.png) [@jpmaff](https://discourse.sst.dev/u/jpmaff)
#### Post date: [July 13, 2022, 11:37pm UTC](https://discourse.sst.dev/t/setup-an-error-boundary-in-react/1732/9 "2022-07-13T23:37:47Z")

</div>

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

```auto
{
  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.
