前端监控原理

Web页面的异常监控基本原理及问题定位

常见的异常监控工具 Sentry

  1. JS错误 通过监听全局的error事件和unhandledrejection事件，实现对js错误的监听。

// 同步异常
window.addEventListener('error', function(e) {

}
// 异步异常
window.addEventListener('unhandledrejection', function(e) {

}

比较常见的问题是由于浏览器跨域的限制，如果非同于同域下的脚本执行报错，不能拿到详细的异常信息，只能拿到类似于Script error 0 这类的信息。 解决方案就是在script标签加上crossorigin=“anonymous”属性，这样就可以拿到详细的异常信息。使用webpack 构建可以配置output.crossOriginLoading

上报的堆栈信息往往是压缩后的。Sourcemap 的解析和反解析过程涉及到 VLQ 编码，可以通过一些业内统一的工具包比如“source-map” 进行反解析 由于sourcemap对于线上环境来说未必都会有，比如处于安全的考虑，所以可以将sourcemap在构建的时候提交给平台。sentry就是这样做的

最后就是要对错误进行聚合，如果聚合只是根据报错的name和type进行聚合 是会有很多不同错误被聚合到一起。主要要根据上下文信息进行聚合。

  1. 请求监控 通过对原生的 XMLHttpRequest 对象和 fetch 方法进行hook，实现请求相关上下文的劫持与上报。 上报有个小细节就是用setTimeout 100这种手段。把上报放到下一个宏任务中，防止阻塞 可以通过 浏览器提供的Resource Timing API统一获取和分析应用资源加载的详细网络计时数据

  2. pv（pageView）和uv pv 页面初始化时统计一次，切换路由时也进行统计 history: 主要通过 hook history.pushState && history.replaceState 以及监听全局的 popstate 事件来感知路由的变化 hash: 监听路由的hashchange

  3. 用户行为分析

    • 点击事件

    • 非元素类型过滤：nodeType 不等于 1

    • 根元素过滤： 即 / /

    • svg 过滤: 某个元素或者它的某层父元素是

    • 隐藏元素：display 为 none

    • 层级过滤：当元素不属于 / / / 或者未指定data-apm-action 属性 且层级超过2层时过滤input 输入

  4. 白屏监控 原理：页面 load 完成之后等待一个 ric 和 raf（requestAnimationFrame），开始用 MutationObserver 监听 Dom 变化。每次 Dom 发生变更，调度一次打分任务，时间在一个 ric 和一个 raf 之后。 注意： 有ErrorBoundary 的情况下需要手动上报白屏

https://open.alipay.com/portal/forum/post/109101011前端得一些性能指标该怎么监控前端性能采集如何上报

参考文章

  • 基于ajax 埋点上报： 前后端约定接口

  • 基于imgage url：进行上报 只能通过get

  • 基于Navigator.sendBeacon 优点： 默认支持页面关闭等断开连接时进行上报 缺点：浏览器兼容性问题，只能使用post

Previous前端登录流程Next团队管理

Last updated

Was this helpful?