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 对运行时间错误的默认影响，因此在产品中您会看到预期的视图。

查看了解有关 ErrorBoundary 如何工作的更多信息。

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

Bugsnag ErrorBoundary showing custom error, then default browser override

reactjs

bugsnag