feat: add top-level ErrorBoundary component

[morgan-wowk]

Description

Added a new ErrorBoundary component that wraps the entire application to catch and handle React errors. The component integrates with Bugsnag for error reporting when enabled, with a fallback option for when Bugsnag is not available. The implementation includes a custom error handler UI component and has been integrated at the root level of the application.

Type of Change

• New feature
• Improvement

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Test Instructions

1. Verify the application loads correctly with the new error boundary in place
2. Test error handling by intentionally causing a component error
3. Confirm errors are properly reported to Bugsnag when configured

[morgan-wowk]

• docs: add Bugsnag configuration and documentation #1699
• feat: add top-level ErrorBoundary component #1698 👈 (View in Graphite)
• refactor: report errors to Bugsnag when using error boundary (ErrorPage fallback) #1696 : 1 other dependent PR (#1697 )
• feat: add error message normalization and integration #1718
• feat: add Bugsnag error reporting service #1717
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[maxy-shpfy]

We can use ErrorBoundary from react-error-boundary package (which is already in). You may read more in https://kentcdodds.com/blog/use-react-error-boundary-to-handle-errors-in-react or start from https://www.npmjs.com/package/react-error-boundary

[morgan-wowk]

Implemented.

[morgan-wowk]

Note: I am actively working on implementing a refactor to simplify the contents of this PR

[Mbeaulne]

I mentioned this in the other PR, but maybe we just add a default value to reset so we don't have to conditionally render this function call?

[morgan-wowk]

Yup! Done

[Mbeaulne]

The non-null assertion (!) here could cause a runtime crash if the React plugin isn't properly initialized. We should avoid non-null assertions and add explicit null checks instead.

const reactPlugin = Bugsnag.getPlugin("react");
if (!reactPlugin) {
  console.error("Bugsnag React plugin not initialized");
  return (
    <ReactErrorBoundary FallbackComponent={ErrorPage}>
      {children}
    </ReactErrorBoundary>
  );
}
const BugsnagBoundary = reactPlugin.createErrorBoundary(React);

This gracefully falls back to the standard ReactErrorBoundary if Bugsnag's plugin fails to load, rather than crashing the entire app.

[morgan-wowk]

Added the safety check and fallback to react error boundary

[Mbeaulne]

some smallish changes

[morgan-wowk]

Merge activity

• Feb 5, 10:58 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Feb 5, 10:58 PM UTC: @morgan-wowk merged this pull request with Graphite.