12｜自定义指标：如何通过自定义指标，监控前端页面更多状态

唐俊开

你好，我是三桥。
这节课，我们继续学习前端全链路的另一种链路日志，自定义日志。
通常来说，我们会在业务代码里主动输出一些日志，通过日志追踪可能发生的异常或流程以外的地方。
如果说，请求类日志、资源类日志、脚本异常类日志是全链路中最基础底层的日志，那么自定义日志就是更接近业务的链路日志。它的实现原理类似于封装 console 对象，也是为业务提供了一个链路日志的函数。
为什么要做全链路的自定义埋点很多前端同学都喜欢在业务逻辑代码中使用 console.log 来打印日志信息，从而调试和定位问题，因为这种日志能够覆盖前端业务逻辑里很多特殊的场景。
这么做有什么问题吗？我们先来看一个很有代表性的例子。
try {
  const jsonstr = '{"name": "前端全链路优化实战", "course": 30, "source": "geekbang"}'
  var data = JSON.parse(jsonstr);
  console.log(data.name);
  console.log(data.course);
} catch (err) {
  console.error(err);
}
上面的代码使用了 JSON.parse 函数，将一个 json 字符串解析为 JSON 对象。要知道，例子中展示的字符串是一个标准 json 字符串，对于 parse 函数而言，它是能正常解析出来的。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

1. 自定义链路日志是前端全链路中更接近业务的链路日志，通过记录异常情况，帮助分析用户真实情况，改善产品的用户体验。 2. 实现通用自定义链路日志的基本函数，包括普通日志函数、告警日志函数和错误日志函数，以最小代码量接入链路日志。 3. 通用底层日志函数需要存储用户行为的数据，并通过额外的函数转换字段值，确保数据的一致性。 4. 使用JSON.parse函数时，需要增加容错处理，以避免出现无法预期的异常。 5. 在处理localStorage.getItem时，需要进行容错处理，以应对可能返回undefined的情况。 6. 对于Promise对象的reject函数，需要增加链路日志以监控概率性的异常情况。 7. 除了上述情况，还需要在核心业务流程、第三方JavaScript库或SDK使用、全局事件和元素事件等场景下进行链路日志埋点，以实时监控脚本运行状态和排查问题。 8. 增加全链路监控范围，封装函数以适应更多场景，并实时了解真实异常情况。 9. 通过监听unhandledrejection事件来捕获所有未定义catch事件的异步问题，以提早发现并修复异常情况。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《前端全链路优化实战课》，新⼈⾸单¥59

立即购买

登录后留言

精选留言

由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。

收起评论