Bugsnag ErrorBoundary showing custom error, then default browser override

Question

I would like to include Bugsnag to report unhandled errors with enough details to fix them as fast as possible.

I would like to know if it's possible for Bugsnag to customise ErrorBoundary, to redirect or show something less ugly to the user?

But the following code raise a big dilemma, the <ErrorView /> shows up after a second like the following screenshot:

and then is overridden by the browser error message:

import React from "react";
import ReactDOM from "react-dom";

import "./index.css";
import App from "./component/App/";
import * as serviceWorker from "./serviceWorker";
// // _____________________________________________________________________
// ________________________________Bugsnag_________________________________
// // _____________________________________________________________________

import bugsnag from "@bugsnag/js";
import bugsnagReact from "@bugsnag/plugin-react";

export const bugsnagClient = bugsnag({
  apiKey: "****************************",
});

bugsnagClient.use(bugsnagReact, React);

var ErrorBoundary = bugsnagClient.getPlugin("react");

// // _____________________________________________________________________
// ________________________________________________________________________
// // _____________________________________________________________________

const EnhancedApp = () => {
  return (
    <Router>
      <App />
    </Router>
  );
};

ReactDOM.render(
  <ErrorBoundary FallbackComponent={ErrorView}>
    <EnhancedApp />
  </ErrorBoundary>,
  document.getElementById("root")
);

export function ErrorView(props: any) {
  // This component will be displayed when an error boundary catches an error
  console.log("display props", props);
  // useHistory().push("/dashboard");
  return (
    <div>
      <h2>Bugsnag reporting</h2>
      <p>Error message : {props.error.message}</p>
      <p>Stack : {props.error.stack}</p>
      <p>Info : {props.info.componentStack}</p>
    </div>
  );
}

Answer 1

In development env you will always see the error overlay unless you turn it off or close it with the X button.

Thats the default UI fallout on run time error, therefore in prod you will see your expected view.

Check out this answer for more info on how ErrorBoundary works.