前端错误监控与数据上报

96
evilrescuer
0.1 2019.04.13 21:54* 字数 666

一、简介

前端需要做错误监控,将runtime异常发送到某处;或者监控web以及APP的某个组件、某个页面,以便可以可视化地整理分析,更好地完成版本迭代。

二、错误监控

如果说性能是属于优化的内容,那错误就是最紧急的任务,特别是会带来APP闪退或者阻塞用户操作流程的隐患的错误。

1.onerror事件

简单地,我们可以通过监听window或者特定的element的onerror事件,处理错误:
window和element上的error事件

2.try-catch

早在1999年的JavaScript 1.4 ECMAScript 3rd Edition (ECMA-262)就实现了try-catch
语法如下:

try {
  // 尝试搞些事情
}
[catch (exception_var_1 if condition_1) { // 注意,这里的if condition_1, 不是标准用法
   // 发生exception_var_1 错误时,代码会执行到这里
}]
...
[catch (exception_var_2) {
   // 发生exception_var_2 错误时,代码会执行到这里
}]
[finally {
   // 无论如何,代码都会走到这里,除非程序直接崩溃退出
}]

try语句包含了由一个或者多个语句组成的try块, 和至少一个catch子句或者一个finally子句的其中一个,或者两个兼有。

MDN中try-catch介绍

3.unhandledrejection

开发中,我们有时会遇到unhandled reject promise 错误,原因是没有处理Promise的reject(resolve一般都会处理,因为是正常正确业务逻辑)。可以通过以下方式统一处理。(注意:此方法有兼容问题,只有Chrome的49以上版本兼容)

window.addEventListener("unhandledrejection", function (event) {
  console.warn("WARNING: Unhandled promise rejection. Shame on you! Reason: "
               + event.reason);
});

MDN中unhandledrejection的介绍

4.利用第三方工具

sentry是一个方便易用的工具,它可以让你几乎实时地收到由线上抛出的错误,在sentry的管理后台,可以清晰地看到发生的时间、次数。还可以为某个错误事件标记状态(已解决、指定修复版本 等等)。你还可以建立一个钩子,把sentry和slack连接在一起,在你工作时,错误会自动发到slack上。当然,你还可以自定义错误发生时,向外发送什么payload,以便调试时可以看到当时的api-call的信息

sentry支持多种语言以及平台,具体见 sentry-github

三、性能上报

通过Performance​.mark()在浏览器具有指定名称的性能加载缓冲区中添加一个记录,方便在后面需要时计算时间性能。

// 以一个标志开始。
performance.mark("test-开始");

// 等待一些时间。
setTimeout(function() {
  // 标志时间的结束。
  performance.mark("test-结束");

  // 测量两个不同的标志。
  performance.measure(
    "test",
    "test-开始",
    "test-结束"
  );

  // 获取所有的测量输出。
  // 在这个例子中只有一个。
  var measures = performance.getEntriesByName("test");
  var measure = measures[0];
  console.log("毫秒数:", measure.duration)

  // 清除存储的标志位(防止内存泄漏)
  performance.clearMarks();
  performance.clearMeasures();
}, 1000);

具体见:
MDN中Performance的介绍

四、统计上报

1.google统计

google出的统计分析工具,具体见:
https://developers.google.com/analytics/(某些地区可能无法阅读)

2.百度统计

可以对网站、移动应用进行统计
百度统计-产品概述
移动统计支持零代码接入SDK

(完)

随笔
Web note ad 1