前端怎么获得后端抛出的异常_如何把前端监控做到极致

本文系第 12 届 D2 前端大会议题《把前端监控做到极致》的总结文章，

现场视频:https://tianchi.aliyun.com/competition/videoStream.html#postsId=3631,

或在线PPT地址:https://files.alicdn.com/tpsservice/39299d06993224a40767f1d29c6345e7.pdf。

对于资深工程师来说，想到或者做出一个前端监控方案并不是什么难事 —— 通过监听全局的 window.onerror 事件捕获到运行时错误，然后上报到采集端，再做一个页面展示数据 —— 看起来确实只需要写一个简单的 CRUD 应用就能搞定。

本文将从 采集、数据处理、分析、报警 4 个维度进一步阐述如何把前端监控做到极致。

小福利

如果你还没有使用前端监控服务，那么可以先看看这个小福利。只用两行代码就能打造一个前端异常实时监控平台，还带报错数统计功能。

其实现思路正如开题所言，通过 window.onerror 采集到所有的未捕获异常，并通过 new Image 的方式构造一个 404 的 HTTP 请求，最后在服务端实时过滤 access.log 中匹配的请求并计数即可。

实际运行效果如下：

浏览器端效果

服务端效果

当然，这个监控系统并不能直接应用在生产环境。要让监控真正发挥价值，还需要从采集、处理、分析、报警等多个方面进行优化增强。

采集

Script Error

当我们采集前端报错的时候，第一个遇到的问题就是 Script Error。Script Error 不是一种具体的错误，而是浏览器对跨域错误出于安全机制考虑的一种处理方式。

一个前端错误为什么涉及到了「安全」问题呢？2006 年一位安全研究人员发现第三方脚本可以通过页面中报错信息的不同判断当前用户是否登录了指定的网站，并向 Webkit 项目提出了相关的 issue。7 年之后，各大浏览器厂商基本都支持了这一安全设定。

Webkit 源码中对 Script Error 的处理

简单的说，如果你的页面和页面中引用的 JavaScript 文件不同源(协议、域名、端口不一致)，那么这些脚本抛出的错误都属于跨域错误。那么我们在做前端监控捕获这些错误的时候，应该怎么避免采集到 Script Error 呢？

答案是 crossorigin 属性。这是一个应用在