react-error-catch

捕获 React 异常

异常类型	同步方法	异步方法	资源加载	Promise	async/await
try/catch	√				√
onerror	√	√
error 事件监听	√	√	√
unhandledrejection 事件监听				√	√

错误表现类型：

• 渲染错误，渲染阶段发生异常，比如某个组件没有引入就使用
• 引用错误，即引入某个资源文件时发生错误，这个往往在编译过程中能够捕获到。在这里我们讨论异步引入的情况
• 事件处理，即渲染没问题，但是在在调用其触发事件时发生错误，比如 JSON.parse(JSON.parse("error"))，这类错误可以细分为用户手动触发和脚本触发，可以参考 Error.isTrusted 属性进行理解
• 异步代码，比如 promise.reject("error")

使用

执行 npm install react-error-catch 或者 yarn add react-error-catch 来进行引入

紧接着在项目内：

import ErrorCatch from "react-error-catch";

const App = () => {
  return (
    <ErrorCatch
      app="react-catch"
      user="bcyg"
      delay={5000}
      max={1}
      filters={[]}
      onCatch={(errors) => {
        console.log("报错咯");
        // 上报异常信息到后端，动态创建标签方式
        new Image().src = `http://localhost:3000/log/report?info=${JSON.stringify(
          errors
        )}`;
      }}
    >
      <Main />
    </ErrorCatch>
  );
};

export default App;

Props

属性	描述	类型	默认值
errorRender	当捕获到组件渲染错误时，降级渲染样式	React.ReactNode	<h1>Something went wrong.</h1>
user	谁触发了错误	"unkonwn user"
app	触发错误的 app	string	"unkonwn app"
token	触发错误的 token	string	-
language	访问网站语言 language	string	-
max	当捕获到的错误超过设置 max 值时，触发 onCatch 事件	number	1
filters	定义需要过滤的错误	string[]	-
onCatch	当满足设置条件时的错误捕获回调	(error: ErrorInfo[]) => any	-