问题描述

我们的团队现在负责的是一个海外公司的ERP项目,一直困扰我们团队的一个问题是,用户在浏览器上碰到痛点我们很难拿到足够的异常数据供开发人员分析问题。由于异地和用户的非专业型,让获取异常数据难上加难。

不过,这方面的资料和实践已经非常的成熟,而且我们自身的场景也足够简单(由于是内部系统,所以浏览器版本可控),所以投入一些精力会得到相当丰厚的回报(非常值得)。

就在今天,哥们儿我就要直面这个问题!

解决方案调研和思考

花了一些时间的资料阅读,梳理出下面的大纲(a little bit of mess):

  • 监控的目标资源及场景
    • JS文件
    • Css文件
    • Html文件:DOM合法性检查
    • 404
    • 跨域
      • 本地cache
      • 代码压缩问题
  • 数据少选条件
    • ip
    • 异常级别
    • 采样率
    • 开发环境/线上环境
  • 主动埋点上报 & 全局异常收集
  • 收集的信息
    • ip
    • UserAgent
    • 错误信息:错误文件名称,页面url,错误行号,错误详情,错误堆栈
    • 错误发生时间
    • 错误用户的帐号信息
    • performance信息:内存,cpu等
  • 日志持久化方案
  • 错误信息后台管理界面
  • 触发方式:机器自动监控/真实用户行为
  • 消息通知提醒:邮箱,短信等

可以看出,其实想要实现一个完美的前端异常监控工具,还是一个相当有含量的工作。不过其实可以分阶段来一点一点完善功能,最基本的功能我认为至少应该包含:

  1. js异常全局监听(暂时不考虑跨域,不需要很多埋点)
  2. 线上环境和开发环境的开关
  3. 收集错误详细信息,浏览器的基本信息(UserAgent,访问地址),可能的话应包含登录帐号的相关信息
  4. 数据上报和数据持久化可以简单的采用请求一个图片,并借助web server的log日志存储数据

我觉得这应该已经缩减到最低限度了,至少在我们的场景中是这样的。

注意事项

  1. 将 JavaScript异常监控脚本放置文档最前面(至少是其他 ‘script’ 块之前);
  2. JavaScript 异常监控脚本独立在一个 ‘script’ 块中(建议是外部脚本文件,亦可使用缓存);
  3. 每次上报请求避免缓存,需要增加随机数参数
  4. URL参数不同的浏览器有不同的长度限制,考虑哪些参数需要放在URL参数上,哪些放在其它位置(header,cookie)

最低功能实现的话,基本上一个前端人员就可以轻松搞定。当然,如果你想要更简单,也不是不可能,目前许多第三方流量分析平台也提供了异常信息追踪功能,例如google analytics,好处就是提供了比较好用的管理界面。如果想迅速搭建一个可用的环境的话,是一个不错的选择。

参考

前端代码异常日志收集与监控

JSTracker:前端异常数据采集

如何做前端异常监控?

一种生产环境中高效定位JS异常的方案

前端异常监控 - BadJS

前端相关数据监控

使用Google Analytics跟踪捕获JavaScript,AngularJS,jQuery的在线错误和异常

异常跟踪

前端代码异常监控

sentry