1.0.15 • Published 7 months ago

react-error-catch v1.0.15

Weekly downloads
-
License
MIT
Repository
github
Last release
7 months ago

捕获 React 异常

异常类型同步方法异步方法资源加载Promiseasync/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="cxyuns"
      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\Something went wrong.\
user谁触发了错误"unkonwn user"
app触发错误的 appstring"unkonwn app"
token触发错误的 tokenstring-
language访问网站语言 languagestring-
max当捕获到的错误超过设置 max 值时,触发 onCatch 事件number1
filters定义需要过滤的错误string[]-
onCatch当满足设置条件时的错误捕获回调(error: ErrorInfo[]) => any-
1.0.15

7 months ago

1.0.16

11 months ago

1.0.13

2 years ago

1.0.12

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago