0

我想包括 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>
  );
}

4

1 回答 1

2

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

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

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

于 2020-10-02T08:57:52.143 回答