一、简介
前端需要做错误监控，将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子句的其中一个，或者两个兼有。
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);
});
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
（完）
网友评论