reactjs - Bugsnag ErrorBoundary にカスタム エラーが表示され、その後デフォルトのブラウザが上書きされる

Question

Bugsnag を含めて、未処理のエラーをできるだけ早く修正するのに十分な詳細とともに報告したいと考えています。

ErrorBoundaryBugsnag が をカスタマイズしたり、リダイレクトしたり、ユーザーにとって見栄えの悪いものを表示したりできるかどうかを知りたいですか?

しかし、次のコードは大きなジレンマを引き起こし<ErrorView />ます。次のスクリーンショットのように 1 秒後に表示されます。

その後、ブラウザのエラー メッセージによってオーバーライドされます。

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>
  );
}