前端监控你须要了解的一些问题

原文连接

前言

做为一个迷茫的小前端，不清楚本身想要什么，不知道怎么努力。跟导师沟经过后，导师说，既然这样，那我每周给你布置一些做业。我说好啊，因而……

导师提问：js 错误监控，基本的实现方式是什么，要注意什么？有哪些手段能捕获到 js 异常？要实现一个可用的监控方案有哪些注意事项？捕获到的异常的具体内容是什么？怎么上报？应该上报哪些信息才能有助于问题定位？

正文

看到问题，不急着去找答案，先给本身上基础三问：

• what：监控是什么及监控什么？
• why：为何监控？
• how：怎么去监控？

1.监控是什么 及 监控什么

监控的本质是数据采集。

扩展开来还有后面的数据处理、数据分析展现、提醒和报警。

那么要监控什么，就看你关注哪些数据。

对于前端来讲，咱们关注的大体有：

• 用户行为数据
  • PV/UV
  • 用户在每个页面的停留时间
  • 用户经过什么入口来访问该网页
  • 用户在相应的页面中触发的行为
• 性能数据
  • 页面渲染时间
  • 白屏时间
  • 静态资源 总体加载时间
  • 接口请求 响应时间
  • 页面交互 动画完成时间（交互响应速度）
• 异常
  • js 错误
  • 网络异常
  • 业务异常
  • 资源异常 （缺失、被篡改、缓存不一样步等）

为何监控

监控是为了知道哪里作的很差，哪里有问题，而后才能解决问题，作的更好。

• 用户行为数据其实就是各个页面、活动、推广方式、入口的价值体现。
• 性能数据则与用户体验息息相关。
• 而全部的异常都是咱们不但愿出现的。

怎么监控

这个问题——前面列了这么多要监控的东西——感受很差回答。

根据最开始引用部分的问题，先来看看 js 错误的监控。

监控 js 错误

1. 使用 try catch ，或者 Promise 的catch 来捕获错误
2. window.onerror 以及 window.onunhandledrejection 来捕获错误。

注意事项

1. 使用 window.onerror 这种全局捕获，最好写在全部 js 脚本的前面，否则前面的出错没法捕获。
2. onerror 没法捕获 promise 抛出的错误，此时能够用 onunhandledrejection
3. 使用 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.

扩展阅读

MDN-onerror

MDN-unhandledrejection

MDN-onunhandledrejection

大前端时代前端监控的最佳实践

sentry js 错误上报

HTML标准

sourceMap