笔记二：项目错误捕获

前端项目错误的捕获上报对于项目质量管理异常重要。特别是接手一个已有一定逻辑规模的就项目时，对所有逻辑或者模块都不熟悉的时候，而又没有旧同事帮助的情况下，错误上报是你唯一的帮手。

Js层面的捕获

什么时候会进入error事件

throw new Error('出错了')可以模拟进入error事件

1 监听window error事件

可以捕获脚本出错和运行时错误

/** setAliyunCollect 是项目里上报打点的方法，可忽略 * */

* @param {String} errorMessage   错误信息 
* @param {String} scriptURI   出错的文件 
* @param {Long}  lineNumber   出错代码的行号 
* @param {Long}  columnNumber  出错代码的列号 
* @param {Object} errorObj    错误的详细信息 
window.onerror = 
  (errorMessage, scriptURI, lineNumber, columnNumber, errorObj) => {
    setAliyunCollect({
      type: 'paper/do',
      componentName: 'paper/do',
      action: 'window.onerror',
      event: 'window.error事件',
      token,
      other: {
        msg: JSON.stringify(errorMessage),
        script: scriptURI,
        lineNumber,
        columnNumber,
        token,
        ua: window.navigator.userAgent,
        errorObj: errorObj.toStirng(),
      },
    })
      .then()
      .catch(err => {
        console.log(err);
      });
  },
);

window.addEventListener(
    'error',
    event => {
      setAliyunCollect({
        type: 'global error',
        componentName: 'global',
        action: 'error',
        event: 'window.error事件',
        other: {
          msg: event && event.message,
          error: event && event.error,
          userInfo,
        },
      })
        .then()
        .catch(err => {
          console.log(err);
        });
    },
    true,
  );

按照目前前端发展，最有用的信息就是errorMessage了，因为前端工程化之后所有代码都经过编译和压缩，scriptURI，LineNumber，columNumber都可能会有误

注意事项

1 script遵循同源策略，如果是非同源的js文件只会报出script error

2 errorObj是window的error 对象，JSON.stringify只会上报一个空对象{}

解决方法

1 error.name和error.message分开 2 errorObj.toString()

2 window unhandleRejection事件

可以捕获异步promise抛出的错误

window.addEventListener('unhandledrejection', event => {
  setAliyunCollect({
        type: 'paper/do',
        componentName: 'paper/do',
        action: 'unhandledrejection',
        event: 'window.unhandledrejection事件',
        token,
        other: {
          msg: event.reason && event.reason.message,
          token,
          ua: window.navigator.userAgent,
        },
      })
        .then()
        .catch(err => {
          console.log(err);
        });
    });

event 是PromiseRejectionEvent的实例，对错误上报最有用的是reason属性

reason有两个属性

·message // reject的信息

·stack // 堆栈出错的详细信息

框架层面

React

componentdidcatch生命周期

逻辑层

try {} catch(e) {}

promise.then().catch(e)

注意事项

JSON.parse的情况一定要加try catch，否则出错会导致脚本崩溃

promise事件例如请求事件要习惯性加catch，否则没有catch会导致脚本报错

以上是对项目错误捕获的总结