业务线接入前端异常监控sentry

1.前端异常处理的框架对比

2,前端异常监控方案梳理

what？（前端监控是什么）

对线上代码的异常排查，一般分为下面三个点：

1. js的异常采集的方式
2. js异常的上报方式
3. 统计异常监控上报的常见问题

why？（为什么要有前端异常监控）

1. 随着移动互联网的快速发展，互联网获取流量的渠道越来越多样化。前端的应用场景不在局限于网页，通常是网页、公众号、安卓端、ios都有涉及。这样的话很多边界问题完全依赖于后端的监控和测试阶段的测试是完全不够的。
2. 用系统化的报错采集替代人工上报。以便于获得更快速的异常收集。

How？（怎么做）

1. js的异常处理方式

   收集异// try-catch 异常处理// try-catch 在我们的代码中经常见到，通过给代码块进行 try-catch 进行包装后，当代码块发生出错时 catch 将能捕捉到错误的信息，页面也将可以继续执行。// 但是 try-catch 处理异常的能力有限，只能捕获捉到运行时非异步错误，对于语法错误和异步错误就显得无能为力，捕捉不到。try {  error    // 未定义变量} catch(e) {  console.log('我知道错误了');  console.log(e);}----------------------------------------------------------------------------------------------------------------------------// window.onerror 异常处理// 无论是异步还是非异步错误，onerror 都能捕获到运行时错误。// 另外 onerror 是无法捕获到网络异常的错误window.onerror = function (msg, url, row, col, error) {  console.log('我知道错误了');  console.log({    msg,  url,  row, col, error  })  return true;};new Error('111')

2. js异常的上报方式
   • 根据定义好的数据格式，利用ajax发送数据

   • 根据定义好的数据格式，利用img标签发送数据

     // 数据格式示例{ // 错误日志信息    msg: '',    url: '', // 错误来源页面url    line: '', // 错误行数    col: '', // 错误列数    stack: '',    from: '', // 错误来源    "navigator.userAgent": '', //浏览器信息    ret: {}, // 解析source map后原始准确定位数据    evtMoniter: [] //用户行为保存数组,保存最近10次行为操作}

3. 统计异常监控上报的常见问题
   上报后的数据后台对对应的数据进行存储分类，根据不同项目不同种类的错误进行统计。 超过一定数量可以设置报警等级制。

现有的前端异常处理的服务商