Bugsnag-js: Example of FallBackComponent with ErrorBoundry

[chobo2]

Hi

I see that you can add some sort of fallback component in Error Boundry but there is no example code that I can see.

So I am not sure how my component should look like and how it hooks up to

[bengourley]

Here's an example:
https://github.com/bugsnag/bugsnag-js/blob/15e4dd7048dc9fdcb96cb654b48880c293257e3c/examples/react/src/index.js#L10-L15

And this is how you hook it up:
https://github.com/bugsnag/bugsnag-js/blob/15e4dd7048dc9fdcb96cb654b48880c293257e3c/examples/react/src/index.js#L25

Hope this helps!

[tommedema]

This is quite a useless example as it doesn't show any useful information to the user, such as an issue ID

[mattdyoung]

Hi Tom

I saw you also reached out to Bugsnag support on that point so please see my full response there.

There isn't a Bugsnag issue ID available in the client but you could generate your own issue ID and supply as custom metadata in the error report to allow filtering by it in the dashboard.

[simkessy]

How about an example showing the error?

[xander-jones]

Hey @simkessy, what do you mean by showing the error? A way to link to the error in Bugsnag?

When bugsnag-js sends the report, the ID for the error is generated by Bugsnag on server-side, so the library doesn't have access to that. If you want to display an issue ID to the user and have that same issue ID shown in Bugsnag, you'll want to generate your own issue ID and supply that in the error report as an additional metaData field by using a beforeSend callback.

You can then add a custom filter on your new metaData field to filter for that issue ID in the dashboard, and display the generated issue ID inside of your FallbackComponent as an argument input to the component:

const ErrorReturn = (issueID) => {
   return <div> 
     <h1>⚠️ Error ⚠️</h1> 
     <p><strong>Uh oh, there was an error in the component tree!</strong></p> 
     <p>Issue ID <code>{issueID}</code> reported to Bugsnag</p> 
   </div>
}

[simkessy]

const ErrorScreen = ({ error }) => {
  return (
    <Box marginLeft={-1} marginRight={-1}>
      <Layer>
        <Modal accessibilityModalLabel="Error" heading="Error" size="sm">
          <Box padding={2}>
            <Text>{error.message}</Text>
          </Box>
        </Modal>
      </Layer>
    </Box>
  );
};