前言
作为一个迷茫的小前端，不清楚自己想要什么，不知道怎么努力。跟导师沟通过后，导师说，既然这样，那我每周给你布置一些作业。我说好啊，于是……
导师提问：js 错误监控，基本的实现方式是什么，要注意什么？有哪些手段能捕获到 js 异常？要实现一个可用的监控方案有哪些注意事项？捕获到的异常的具体内容是什么？怎么上报？应该上报哪些信息才能有助于问题定位？
正文
看到问题，不急着去找答案，先给自己上基础三问：
- what：监控是什么及监控什么？
- why：为什么监控？
- how：怎么去监控？
1.监控是什么 及 监控什么
监控的本质是数据采集。
扩展开来还有后面的数据处理、数据分析展示、提醒和报警。
那么要监控什么，就看你关注哪些数据。
对于前端来说，我们关注的大致有：
- 用户行为数据
- PV/UV
- 用户在每一个页面的停留时间
- 用户通过什么入口来访问该网页
- 用户在相应的页面中触发的行为
- 性能数据
- 页面渲染时间
- 白屏时间
- 静态资源 整体加载时间
- 接口请求 响应时间
- 页面交互 动画完成时间（交互响应速度）
- 异常
- js 错误
- 网络异常
- 业务异常
- 资源异常 （缺失、被篡改、缓存不同步等）
为什么监控
监控是为了知道哪里做的不好，哪里有问题，然后才能解决问题，做的更好。
- 用户行为数据其实就是各个页面、活动、推广方式、入口的价值体现。
- 性能数据则与用户体验息息相关。
- 而所有的异常都是我们不希望出现的。
怎么监控
这个问题——前面列了这么多要监控的东西——感觉不好回答。
根据最开始引用部分的问题，先来看看 js 错误的监控。
监控 js 错误
- 使用 try catch ，或者 Promise 的catch 来捕获错误
- window.onerror 以及 window.onunhandledrejection 来捕获错误。
注意事项
- 使用 window.onerror 这种全局捕获，最好写在所有 js 脚本的前面，不然前面的出错无法捕获。
- onerror 无法捕获 promise 抛出的错误，此时可以用 onunhandledrejection
- 使用 onerror 还要注意 "script error". 即当访问的 js 脚本跨域时，为避免信息泄露，语法错误的细节将不会报告，而是返回一个简单的 "script error"。如果想要监控到错误详细内容，需要做：
- 引用 js 文件时，在 script 标签上配置 crossorigin 属性
- 服务器端响应时配置好响应头 Access-Control-Allow-Origin:*
捕获到的异常的具体内容是什么
这个问题乍一看不知从何说起。但仔细一想就会发现，window.onerror 函数获取到的参数，就是它捕获的异常的内容。
- message: 错误信息（字符串）。可用于HTML onerror=""处理程序中的event。
- source：发生错误的脚本URL（字符串）
- lineno：发生错误的行号（数字）
- colno：发生错误的列号（数字）
- error：Error对象（对象）
类似的 onunhandledrejection 捕获到的信息如下：
- promise： reject 的 Promise 对象 （promise）
- reason： 一个值或对象，说明为什么reject，来自 reject 的参数
怎么上报
错误信息频繁发送上报请求，会对后端服务器造成压力。 项目中我们可通过设置采集率，或对规定时间内数据汇总再上报，减少请求数量，从而缓解服务端压力。
应该上报哪些信息才能有助于问题定位
错误信息、发生错误的脚本、行号、列号、堆栈信息。
PS:其中行号和列号可能因为打包的原因使得错误很难追踪，这时可以使用 sourceMap.
