Buggy behavior in Next.js app when hostSafeList is set in rollbar config

[DanielPe05]

We discovered a weird behavior happening when using the ErrorBoundary component in a next.js app with the hostSafeList property set in the rollbar config.

we have a simple app set up as follows:

// _app.tsx
<RollbarProvider instance={rollbar}>
  <ErrorBoundary>
  // other providers and app components
    <Component {...pageProps} />
  </ErrorBoundary>
 </RollbarProvider>

This doesn’t seem to be working the way we expect (at least we suspect that). If we call rollbar.error explicitly from our application we see the error making it all the way to rollbar as expected. However, if we go into a component in our component tree and throw an exception, we do not see that being sent to rollbar. This is how we are throwing the error in said component:

// in a component down in the tree
 useEffect(() => {
    // rollbar.error('testing rollbar') this works
    throw new Error('testing rollbar uncaught') // this doesn't work
  })

This is what our instance config looks like:

{
  accessToken: process.env.NEXT_PUBLIC_ROLLBAR_TOKEN,
  hostSafeList: [
    'mydomain.com',
    'subdomain.mydomain.com'
  ],
  captureUncaught: true,
  captureUnhandledRejections: true,
  environment: process.env.NEXT_PUBLIC_APP_ENV,
  payload: {
    environment: process.env.NEXT_PUBLIC_APP_ENV,
    client: {
      javascript: {
        source_map_enabled: true,
        code_version: process.env.NEXT_PUBLIC_CIRCLE_SHA1,
        guess_uncaught_frames: true
      }
    }
  },
  scrubFields: [
    'first_name',
    'last_name',
    'full_name',
    'phone',
    'email',
    'firstName',
    'lastName',
    'fullName',
    'address',
    'street_address',
    'streetAddress'
  ]
}

We expected to see those thrown errors sent to rollbar but that is not happening. As soon as you remove the hostSafeList property from the config it works as expected. Not sure why this might be happening, will continue to investigate and report here if we find what the issue is.

[ijsnow]

Hello! I was able to reproduce the issue by using the instance prop. If you use the config prop, therefor letting the component initialize the instance on it's own, it works. Feel free to switch to that but I'll be searching down the bug either way.

[ijsnow]

I'm actually unable to reproduce the case where it works when you remove the hostSafeList property. Can you share how you are constructing the rollbar instance?

UPDATE: I did find that it is the host list field that causes the issue. Looking for the source.

[ijsnow]

Ok, so what I've determined is that the issue is likely nextjs's error boundary in dev mode. I've been able to use hostSafeList: [localhost:3000, localhost:4000] in both dev and production seeing the uncaught errors propagated correctly. However, I did notice a couple occurences where the uncaught error didn't make it to rollbar ONLY in dev mode. I would have thought that the error would never be sent in dev mode if things are deterministic but this is my best bet.

I'm going to close this issue. Feel free to reopen or create a new one with a link to a repo that deterministically shows the issue if you can!