I have a React project, and I'm using Bugsnag + BugsnagPluginReact to capture/report errors and implement an error boundary.

At the javascript entrypoint of our app, we start up Bugsnag:

import Bugsnag from "@bugsnag/js"
import BugsnagPluginReact from "@bugsnag/plugin-react"

Bugsnag.start({
  ...window.bugsnagSettings, // apiKey, releaseStage, appVersion, user
  plugins: [new BugsnagPluginReact()],
})

Then, we have an ErrorBoundaryProvider component that we wrap the root of our react code with:

import Bugsnag from "@bugsnag/js"
import React from "react"

import ErrorFallback from "./ErrorFallback"

const ErrorBoundaryProvider = ({ children }) => {
  const ErrorBoundaryWrapper = Bugsnag.getPlugin("react").createErrorBoundary(React)

  return (
    <ErrorBoundaryWrapper FallbackComponent={ErrorFallback}>
      {children}
    </ErrorBoundaryWrapper>
  )
}

export default ErrorBoundaryProvider

My question is specifically around async code. For example, say that TestComponent is a child of ErrorBoundaryProvider:

const TestComponent = () => {
  setTimeout(() => {
    throw new Error("Did this error make it to the bugsnag dashboard?")
  }, 1000)
  
  return (
    <div>Test</div>
  )
}

Should I expect the error in the setTimeout callback to show up on my bugsnag dashboard?

My understanding is that the react error boundary will NOT capture async errors like this. But I'm curious if Bugsnag will somehow pick it up anyway, as an unhandled exception.

The strange thing here is that we do see the error come through to the bugsnag dashboard, when we are in development mode, running the app locally on our machines. But, we don't see the error come through to the bugsnag dashboard when we have the app deployed to our staging/production environments.