reactjs - Bugsnag ErrorBoundary 显示自定义错误，然后默认浏览器覆盖

Question

我想包括 Bugsnag 以报告未处理的错误，并提供足够的详细信息以尽快修复它们。

我想知道 Bugsnag 是否可以自定义ErrorBoundary、重定向或向用户显示不那么难看的东西？

但是下面的代码提出了一个很大的难题，<ErrorView />一秒钟后显示如下截图：

然后被浏览器错误消息覆盖：

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

在开发环境中，您将始终看到错误覆盖，除非您将其关闭或使用 X 按钮关闭它。

这是运行时错误的默认 UI 后果，因此在 prod 中您将看到预期的视图。

查看此答案以获取有关 ErrorBoundary 如何工作的更多信息。