腾讯开发工程师：前端异常监控到底怎么作

快速迭代是腾讯产品的生命力

稳定性则是互联网产品的主基调

本期直播课浅谈咱们在前端异常的探索和实践

让咱们对异常时刻警戒

| 导语 从事Web前端同窗对此确定深有体会，代码发出去以后，犹如脱缰的野马，运行在万千的客户终端上，等到产品和后台反馈问题到咱们这边，不少时候定位问题只能靠猜，尤为是一些偶发诱因，由于根本不知道用户是如何操做的，真实环境遇到的问题一般是不少随机因素叠加的造成的，所以很难回放用户的操做来还原现场找到缘由。

如今的痛点

一、用户反馈问题后，有时候虽然咱们查询了js报错日志和cgi调用，可是没有发现任何错误，咱们根本不知道用户的终端上到底发生了什么。

二、目前使用的js错误上报系统，看到上报有必定的延时，做为一款金融产品，分秒必争，这短暂的延时多是致命的，咱们必须快速的找到缘由并予以修复。

通过一段时间经验的累积，咱们想到，若是咱们有一个同后台同样详实的可分类和检索的代码运行日志，无疑将会提供巨大的帮助。

咱们的探索

一个健壮的日志系统大体包含日志记录、日志上传和日志分析三个主要部分，在此次的实践中，咱们对这三方面都有所探索。

一、日志到底存哪里？

因为前端受到不少限制，不能同APP同样能够在文件沙箱内存取文件，所以如何持久化的存储日志成了一个问题。目前H5也支持若干种本地存储方案，cookie, localStorage, indexedDB和websql等，其余的由插件提供的能力不在考虑的范围之类，如flash，移动端的可用性会是一个很大的问题。

• Cookie

  不用想，应该没有人会考虑吧, Cookie的原则应该是尽量的精简避免浪费带宽。

• localStorage

  localStorage你们应该都很熟悉，一个简单的键值存储系统，接口简单实用，兼容性也很是的棒。可是考虑到目前不少项目都有使用localStorage来作缓存，而localStorage自己是有大小限制的。根据日志记录的细粒度，极可能会产生较多的日志内容，若是也记录在localStorage里，可能会有超出容量限制的风险。所以，localStorage应该做为一个备用的持久化方案。

• websql

  websql做为一项W3C标准，目前已经被废弃，可是各大桌面浏览器和移动端浏览器都有很好的实现这个接口，兼容性问题不大，底层基本上都是sqlite（正是由于这样，做为一个web标准是不可接受的）。于是日志做为大量的结构化数据，应用场景很是的适合。经测试，在iOS上容量最大支持50MB，不过若是使用系统自带的safari，超过5MB时，会主动提醒用户是否要增长数据库的大小，不是很友好，不过微信里到是不会。想一想5MB独占做为日志存储基本上够用了，处理好过旧日志的清理工做便可。所以咱们以为websql应看成为当前阶段主要的解决方案。

• indexedDB

  IndexedDB 是一种可让你在用户的浏览器内持久化存储数据的方法，做为下一代的客户端结构化数据持久存储方案，足够的强大和高效，目前在各大浏览器中也有很好的支持，是将来用来替换websql的方案，应当在往后的迭代中主要支持。

二、什么样的日志格式堪称优雅？

• 时间戳，这个无需多说，时间戳是日志的基本要义。

• 多会话，一个前端工程中可能同时存在多个独立的模块，这些模块极可能会同时互不干扰的记录各自的日志。若是每一个模块都在本身的会话下记录日志，就不会相互干扰，而且提供了另外一个维度的过滤能力。

• 错误等级，如 info, warning, error, critical 等，以提供最为基本的过滤能力。

• 描述符，如 verify.request.start, submit.prevented 等等。尽量的以便用户一眼就能够知晓日志的大体内容，也方便代码中日志记录代码的可读性，也更易于在代码中搜索。

• 数据和详情，有时候一个简单的描述符并不能说明问题，可能须要记录更多的描述性文本或者数据来分析问题。

三、日志如何获取？

因为咱们并不须要实时的获取来自客户端的大量日志，所以日志是存储在用户客户端本地的，咱们须要后台配合开发一个用于接收客户端经过网络上传的日志内容并存储起来的接口。同时可能要考虑一些安全性问题，如引入token机制和验证登陆态等等。目前咱们腾讯微证券采用的方案为：用户在微信公众号中发送消息“问题反馈”（直接使用日志上报等关键词可能会引发用户的反感），后台会返回日志上传页面地址连接，用户点击连接进入后，在获取登陆态后自动上报日志。

四、日志分析如何分析？

因为Logline上传的日志格式符合标准，具备良好的可阅读性，所以咱们能够在某种程度上直接使用命令行工具或者编辑器来阅读。可是对命令行不熟悉的用户使用可能仍然有困难，所以有必要使用Web技术栈搭建一个易于使用而且视觉良好的工具。咱们但愿这套工具能够不依赖于后端，既能够部署在服务器端，也能够当作本地网页直接双击打开，也能够被简单的包一层外壳而当作桌面APP来使用。

做为日志，承载的最主要的内容即是大量的纯文本，在调研了一些方案后，咱们认为H5规范中的FileReader.readAsText能够很好的作到这一点，结合拖放事件，咱们即可以很大体构建出一个不错的方案：用户将一个或者多个日志文件拖放至网页中，便可对这些日志批量分析和检索。

基于以上工做，咱们腾讯微证券项目组推出了本身的解决方案：We.Logline，一个轻量，实用和客户端级的前端日志记录工具。