前端异常监控实战方案

心已赠人 2021-09-25 03:04 384阅读 0赞

### 本文简单分析前端异常监控的几种方式 ###

### 一、自研代码监控sdk ###

下面讲述三种可以捕捉到的前端错误

1.  资源加载错误，通过 `addEventListener('error', callback, true)` 在捕获阶段捕捉资源加载失败错误。
2.  js 执行错误，通过 `window.onerror` 捕捉 js 错误。
3.  promise 错误，通过 `addEventListener('unhandledrejection', callback)`捕捉 promise 错误，但是没有发生错误的行数，列数等信息，只能手动抛出相关错误信息。

通过数组变量 `errors` 在错误发生时存储错误的相关信息,可以在控制台打印,项目有做监控系统,可以通过后台接口上传异常数据

vue2.2.0+ 版本可以通过以下方式监听vue项目中的异常

// vue全局异常处理
    Vue.config.errorHandler = function(err, vm, info) {
      // handle error
      // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
      // 只在 2.2.0+ 可用
      console.log("vue异常 err, vm, info: ", err, vm, info);
    };

##  二、sentry(商业收费)等项目监控平台 ##

sentry官网:[https://sentry.io][https_sentry.io]

##  三、React项目异常监控 ##

## react componentDidCatch ##

`React 16` 提供了一个内置函数 `componentDidCatch`，使用它可以非常简单的获取到 react 下的错误信息

componentDidCatch(error, info) {     
      console.log(error, info);
    }

网易云团队的方案

[https://github.com/x-orpheus/catch-react-error][https_github.com_x-orpheus_catch-react-error]

[https_sentry.io]: https://sentry.io/welcome/
[https_github.com_x-orpheus_catch-react-error]: https://github.com/x-orpheus/catch-react-error