快速迭代是腾讯产品的生命力
稳定性则是互联网产品的主基调
本期直播课浅谈我们在前端异常的探索和实践
让我们对异常时刻警惕
| 导语 从事Web前端同学对此肯定深有体会,代码发出去之后,犹如脱缰的野马,运行在万千的客户终端上,等到产品和后台反馈问题到我们这边,很多时候定位问题只能靠猜,尤其是一些偶发诱因,因为根本不知道用户是如何操作的,真实环境遇到的问题通常是很多随机因素叠加的形成的,因此很难回放用户的操作来还原现场找到原因。
1、用户反馈问题后,有时候虽然我们查询了js报错日志和cgi调用,但是没有发现任何错误,我们根本不知道用户的终端上到底发生了什么。
2、目前使用的js错误上报系统,看到上报有一定的延时,作为一款金融产品,分秒必争,这短暂的延时可能是致命的,我们必须快速的找到原因并予以修复。
经过一段时间经验的累积,我们想到,如果我们有一个同后台一样详实的可分类和检索的代码运行日志,无疑将会提供巨大的帮助。
一个健壮的日志系统大致包含日志记录、日志上传和日志分析三个主要部分,在这次的实践中,我们对这三方面都有所探索。
由于前端受到很多限制,不能同APP一样可以在文件沙箱内存取文件,因此如何持久化的存储日志成了一个问题。目前H5也支持若干种本地存储方案,cookie, localStorage, indexedDB和websql等,其他的由插件提供的能力不在考虑的范围之类,如flash,移动端的可用性会是一个很大的问题。
info
, warning
, error
, critical
等,以提供最为基本的过滤能力。verify.request.start
, submit.prevented
等等。尽可能的以便用户一眼就可以知晓日志的大致内容,也方便代码中日志记录代码的可读性,也更易于在代码中搜索。由于我们并不需要实时的获取来自客户端的大量日志,因此日志是存储在用户客户端本地的,我们需要后台配合开发一个用于接收客户端通过网络上传的日志内容并存储起来的接口。同时可能要考虑一些安全性问题,如引入token机制和验证登录态等等。目前我们腾讯微证券采用的方案为:用户在微信公众号中发送消息“问题反馈”(直接使用日志上报等关键词可能会引起用户的反感),后台会返回日志上传页面地址链接,用户点击链接进入后,在获取登录态后自动上报日志。
由于Logline上传的日志格式符合标准,具有良好的可阅读性,因此我们可以在某种程度上直接使用命令行工具或者编辑器来阅读。但是对命令行不熟悉的用户使用可能仍然有困难,因此有必要使用Web技术栈搭建一个易于使用并且视觉良好的工具。我们希望这套工具可以不依赖于后端,既可以部署在服务器端,也可以当做本地网页直接双击打开,也可以被简单的包一层外壳而当做桌面APP来使用。
作为日志,承载的最主要的内容便是大量的纯文本,在调研了一些方案后,我们认为H5规范中的FileReader.readAsText可以很好的做到这一点,结合拖放事件,我们便可以很大致构建出一个不错的方案:用户将一个或者多个日志文件拖放至网页中,即可对这些日志批量分析和检索。
基于以上工作,我们腾讯微证券项目组推出了自己的解决方案:We.Logline
,一个轻量,实用和客户端级的前端日志记录工具。
腾讯课堂
IMWeb前端学院
觉得上面干货还不够?
有很多问题想与作者探讨沟通?
这都不是事儿
3月30日我们免费直播说给你听
*
讲师简介:
@王克震,腾讯前端开发工程师,就职于CDG理财平台产品部,负责腾讯微证券产品的前端开发工作,善于在产品的快速迭代中不断优化代码组织和结构。
3月30日
20.30-21.30
内容
预告
1、为何前端定位问题很困难
2、日志在异常监控中的运用
3、应用场景&快速上手
4、10分钟问答环节
扫码下方二维码,
随时关注更多大咖直播资讯!
▼
微信:IMWebTech
点击阅读原文免费报名