前端日志系统作为ToB业务必不可少的重要功能，现如今已是不可或缺了。
目的
后端都有日志了为啥前端还要做日志系统，主要还是考虑下面几个方面：
-
前端线上监控
观察线上的运行情况，在有大量错误产生的时候迅速报警
-
错误场景复现
很多的线上问题是不容易在非线上环境复现出来的，那么有些线上的错误需要结合业务日志进行错误场景复现以确定具体问题
-
用户行为分析
比如页面上有个
好看的图，用户滚动到这里就停住了，看了好几分钟。这种纯前端的行为收集和分析就需要靠日志系统来做。还有一个就是永恒的话题了：反爬， 如没有鼠标轨迹的页面加载 -
用户环境收集
收集用户是偏PC还是H5，用户机型，用户浏览器等各种设备和偏好指标，其实ToC业务要更关注这部分，ToB业务相对关注较少。
日志分类
全局日志系统
设计目标是抽离出业务层，只由各项目主动在入口template中选择是否引入，或者更进一步，在已经形成企业生态的情况下，走注册平台的方式，由网关层代理注入日志系统的入口JS。
该类日志系统需要负责捕获的错误类型：
-
运行类
运行时异常
-
资源类
静态资源加载异常
-
请求类
ajax相关异常
实现方式
重写window.onerror
window.onerror = function(message, source, lineno, colno, error) { ... }
* message：错误信息（字符串）。可用于HTML onerror=""处理程序中的event。
* source：发生错误的脚本URL（字符串）
* lineno：发生错误的行号（数字）
* colno：发生错误的列号（数字）
* error：Error对象
addEventListener('error')
比window.onerror先触发，但是参数只有一个event
addEventListener('unhandledrejection')
onerror事件无法捕获到网络异常的错误(资源加载失败、图片显示异常等)，该部分由此方法来捕获
window.addEventListener('unhandledrejection', function(err) {
console.log(err)
})
上报方式及时机
日志上报常见的方式两种：静态资源请求附加参数和ajax
因为日志全局日志上报不需要进行错误处理，其实静态资源参数更方便一些，而且可以优化一下开启无头传输提示效率。
实时上报
在ToB业务场景下很有用的一种方式，比如客户反馈有问题，但技术侧无法复现。那么可以通过日志开关配置启用单客户的实时日志上报功能(这个功能需要在搭建日志平台的时候就考虑到)，然后沟通客户进行实际操作，通过收集的实时日志进行分析定位和解决，对技术侧和支持侧都是很好用的功能。
批量延时上报
全部终端开实时上报是不现实的，流量太大。那么批量记录，合并延迟上报就是一个好方案了，使用本地缓存再上报，上报时机可以是跳转下一页面或离开页面之前等。
日志接收系统
日志记录了就需要上报，那么相应的日志后端及存储端也是该系统的一部分。这部分作为典型的后端服务类应用，一般的流量系统所具有的特性都要考虑：降级、熔断、限流、削峰填谷等等一系列的问题。这里就不展开了。
业务日志系统
与全局日志不同，业务日志系统与业务系统有深度耦合，需要采集的数据和上报的时机等都由业务侧完全掌握。那么MFE需要做的是：
-
提供统一的调用入口SDK
-
数据收集的参数形式和adapter适配器
提供参数输入和输出的扩展性，特别是换了日志分析系统平台后，如果不想对业务造成大的影响
-
配置型的远端业务日志分析平台地址
走统一配置中心，远端平台在业务日志系统初始化的时候写入，企业级系统分析平台切换让业务层无感知。
实现方式
由于业务日志需要侵入到业务系统，所以基于fetch/XHR等的ajax方式上报是比较好的方式，封装成npm提供给各业务系统使用就好。
现有平台
说了那么多我还是喜欢现成的，有木有？
Sentry
前端日志界大名鼎鼎的开源项目，官网介绍：
From error tracking to performance monitoring, developers can see what actually matters, solve quicker, and learn continuously about their applications - from the frontend to the backend.
从错误跟踪到性能监控，开发者能看到实际是什么影响了这些，快速解决，持续学习他们的应用，从前端到后端。
分为二部分，平台应用和前端采集入口
平台应用
可以选择sentry平台直接创建后台，当然，流量小可以免费，大了就的付费了。
也可以搭建自己私有平台，基于docker非常方便。
前端入口
先装依赖
# Using npm
npm install --save @sentry/react @sentry/tracing
# Using yarn
yarn add @sentry/react @sentry/tracing
然后在项目入口中初始化一下，so easy
Sentry.init({
dsn: "https://mysite.cn/xxx",
integrations: [new Integrations.BrowserTracing()],
tracesSampleRate: 1.0,
});
付费服务
要说起来付费的，那就多了：fundebug 、bugsnag等等等等，市面上非常多，就不多说了。
总结
前端和后端各自的日志系统各有侧重点，一般都是需要结合使用，后期进行大数据分析和日志链打通，对日常业务维护和支持团队是一个有力的提高服务质量的工具。
