前端监控闭环：采集、告警到问题跟踪

wuwenzen@outlook.com (wuwj) — Mon, 05 Sep 2022 00:00:00 +0000

很多团队做前端监控的姿势是：

先接一个 SDK，看到了几个报错，然后就没然后了。

最后变成：

告警群天天响，大家学会了「静音」；
仪表盘很酷，但没人看；
真出大问题时，还是靠用户截图。

这篇文章想聊的是：怎么从「有监控」升级到「有闭环」：采集、告警、问题跟踪、复盘一条链路打通。

1. 前端到底要监什么？

可以按三个维度来想：

可用性
- JS 运行错误（Error、Promise 未捕获）；
- 资源加载失败（JS/CSS/图片）；
- 页面白屏/异常重定向。
性能
- 首屏指标（FCP/FP/TTI 等的近似值）；
- 接口耗时、失败率；
- 静态资源加载时间。
行为 & 转化
- 关键路径的曝光/点击/完成；
- 异常行为（频繁刷新、某步流失明显）。

实践上，可以先从：错误 + 性能 + 关键链路打点 三件事做起。

2. 采集：埋点 & SDK 一起用

2.1 错误采集

典型方式：

window.addEventListener('error', (event) => {
  reportError({
    type: 'error',
    message: event.message,
    filename: event.filename,
    lineno: event.lineno,
    colno: event.colno,
    stack: event.error?.stack,
  });
});

window.addEventListener('unhandledrejection', (event) => {
  reportError({
    type: 'unhandledrejection',
    reason: String(event.reason),
  });
});

结合 sourcemap 上传，可以把错误还原到源代码行。

2.2 性能采集

利用 Performance API：

错误跟踪 on Saiga

前端监控闭环：采集、告警到问题跟踪

1. 前端到底要监什么？

2. 采集：埋点 & SDK 一起用

2.1 错误采集

2.2 性能采集