前端错误监控与数据上报

一、简介

前端需要做错误监控，将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

（完）