美团开源Logan Web：前端日志在Web端的实现
总第378篇
2020年 第01篇
2018 年 10 月，Logan 在社区开源了 Android 与 iOS 端的 SDK，实现了在客户端进行日志存储及上报代码的功能，引起用户端相关开发者的广泛关注。详细可参见博客文章：《Logan：美团点评的开源移动端基础日志库》。
2019 年 12 月 12 日，Logan 开源了在 Web 环境运行的 SDK、日志分析平台以及服务端代码，为开发者们提供了 Logan 大前端日志系统的一整套实现方案，进一步解决了多端环境中日志的存储与采集问题。
本文将围绕 Logan 在 Web 端的应用背景、技术实现、美团点评的实践、开源整体进展以及未来规划这几个方面展开介绍，以方便读者对 Logan 大前端日志系统有更加深入的了解。
Logan 项目地址：
2. 背景
2.1 为何需要 Logan？
“啥问题”：通过与用户沟通，获取异常发生前后过程的详细描述，尝试在开发者本地模拟，以期复现问题。
“我这里看是好的”：问题没有复现，应该是用户端兼容性的 Bug。
“你重启下”：想不出修复的办法，只能“死马当活马医”，碰碰运气。
对用户端的开发者来说，本地无法复现的问题好比“断了线的风筝”，让人无计可施。如果有办法获取到事发时完整的日志流以及用户环境的上下文信息，就能够帮助开发者快速了解并还原问题的发生现场，可以更有效地定位排查问题，让风筝最终被拉回到开发者手里。正是因为这样的迫切需要，Logan 大前端日志系统才应运而生。
2.2 Logan 日志系统的策略与核心
巨大开销：耗费用户流量，占用企业带宽与服务器存储资源。
大海捞针：在海量日志中可能只有极少部分的日志能够帮助复现问题。
因此 Logan 在各端上实行的通用策略，是本地日志存储结合触发上报的模式，如流程图所示：
平时在用户端脚本执行过程中产生的日志会落地到本地的存储容器中。
当遇到用户反馈或者端上异常被捕获时，Logan 以特定机制触发本地日志的上报。
本地日志流将在用户端上传，由服务端收集并解析，最后上传至云端存储。
由 Logan 统一的日志分析平台向开发者提供日志数据的可视化展示。
开发者利用 Logan 日志排查定位并解决问题后，向用户反馈或者排除异常。
2.2.2 Logan 的三大核心
用户端 SDK（客户端版、Web 版及小程序版）：负责存储与上报端上日志。
服务器端：负责接收、解析、整合与分析日志。
日志分析平台：提供日志的查询与数据可视化展示。
2.3 Logan 在 Web 端面临的问题
如何存储？需要解决 Web 本地大体积日志流的存取。
如何保障日志安全？在本地已存储的日志需要有数据安全保障。
如何上报？需要有效的机制触发日志的上报。
2.4 Logan Web 做了什么？
3. 技术实现
存储方面：利用浏览器的 IndexedDB 作为本地日志的大容量存储容器。
日志安全方面：使用混合加密模式确保本地已存的隐私日志数据不会被破解。
3.1 Logan Web 整体技术架构
logan-web 提供了一个入口文件，它将在日志存储方法或者日志上报方法被触发时，异步地获取存储或上报模块。
存储模块中会优先处理日志内容的加密及包装，再执行后续的分页存储流程。
上报模块会分页读取指定天的日志数据，并行上报至接收日志的服务端，进行后续的日志解析、解密、整合及分析。
这两大核心模块都会使用 Logan DB 模块封装的日志存取逻辑，该模块还会控制本地日志数据的存储容量以及日志分页。
对 IndexedDB API 的调用被封装在独立于 logan-web 的 idb-managed 包中，该包主要解决在使用 IndexedDB 进行本地存储时遇到的技术挑战。
3.2 本地存储方案：idb-managed
3.2.1 原生 IndexedDB API 的局限
3.2.2 idb-managed 的解决手段
问题 1 与 2：提出并实现了 DB Manager 机制来解决 DB 版本升级与数据获取的困境。
问题 3：封装了对存储数据的时效设置、过期处理逻辑。
问题 4：利用事务回滚方法实现在多表内的原子性增删操作。
（1）DB Manager 机制
idb-managed 中内建了一个 DB Manager 来管理当前所有本域下的 DB 版本与库表结构信息，其实 DB Manager 自身就是一个版本号固化的 DB，它本身不存在升级问题。建立连接示意图如下：
当对一个新 DB 建立连接时，会将脚本中设置的 DB 版本及库表信息注册到 DB Manager 中并把数据存储下来。下一次如果有该 DB 的低版本尝试连接时，DB Manager 会用当前已注册的库表信息连接并打开 DB，由此避免了 DB 升级而导致连接低版本失败的问题 。
3.3 日志加密方案：混合加密
对称加密：保证对长内容加密的效率。
非对称加密：保证对称密钥的安全性。
Logan Web 选择了 AES-128-CTR 结合 RSA-1024 的混合加密模式。在存储每条具有私密性的日志前都会经历以下加密流程：
准备对称密钥与初始向量：随机产生 AES 对称密钥 AES Key 及初始向量 IV。
对称加密：使用 AES Key 及 IV 对日志明文进行 AES-CTR 对称加密，得到日志密文。
非对称加密 AES Key：使用 RSA 公钥对 AES Key 进行非对称加密，得到 AES Key 密文。该 RSA 公钥与服务器端的私钥是成套的，只有该私钥可以解开该 AES Key 密文，从而解开日志密文。
包装数据：将以上初始向量、日志密文与 AES Key 密文包装成一条日志对象，随后存储落地。
3.4 上报的触发机制
用户端的日志上报触发机制一般分为两大类：
用户主动触发。优点是上报的日志能够对应到用户反馈的个案；缺点是存在交互上的用户教育成本，同时依赖用户反馈的异常处理流程，过于滞后。
代码层面触发。优点是用户无需感知上报流程；缺点是可能存在大量“无帮助”的上报日志，需要对触发条件做好频率控制。
Logan Web 在两类方式上提供了配置与接口，供 SDK 使用方自行选择与扩展，例如：
PC 端：Logan Web 在美团点评内实践时，为业务方提供了 DOM 元素配置项，用于 Logan Web 绑定触发上报的钩子函数。
H5 手机端：Logan Web 可扩展内置设备摇动检测，利用浏览器的 DeviceMotionEvent 事件监听，当用户“摇一摇”时，引导上报流程的美团卡通形象会出现在页面侧栏，如下图所示。
通用：Logan Web 在美团点评内扩展提供了接口供业务方显示或者隐藏引导上报流程的侧栏。
（2）代码层面触发
4. Logan Web 在美团点评内的实践
这意味着在美团现有的 App 环境（如美团 App、点评 App 等）中运行的 H5 页面如果使用了 Logan Web，所记录的日志会利用 JS 桥传给 Logan 客户端，与客户端日志一起落地在 App 本地文件中。因此在美团的 App 环境内上报的日志流中可查看上下文连续的 Web 端日志与客户端日志，日志分析平台展示的某篇日志详情示意图如下：
5. Logan 开源进展与未来规划
6. 联系我们
在 github.com/Meituan-Dianping/Logan 提交 PR 或者 Issue。
发送邮件至：
7. 作者简介
孙懿，美团点评基础技术部前端技术中心资深工程师。
---------- END ----------
招聘信息
美团点评基础技术部前端技术中心负责美团云平台运维领域的前端基础研发工作，包含前端监控、日志系统、长连通信、运维工具等基础建设。欢迎各路英雄扫码投递简历，我们满心期待您的加入。感兴趣的同学可将简历投递至：tech@meituan.com（邮件标题注明：基础技术部前端技术中心）。
也许你还想看