前端异常监控

自行开发sdk嵌入project进行：异常报错、性能分析、行为统计;

自研流程

调研分析 => 数理核心难点 => 规划开发计划 => 乌拉

分析各大平台sourcemap异常定位实现方案

Fundebug

   默认情况下，Fundebug会根据压缩代码中的sourceMappingURL下载Source Map文件，用户仅需要将生成的Source Map文件部署在服务器上，不需要额外操作。

   如果用户不希望公开Source Map，则可以主动上传Source Map文件。Fundebug提供了两种不同的上传方式:

• 通过Fundebug的前端UI上传

• 通过Fundebug的API上传

Webfunny

公司成立于2021年05月25日，我们致力于帮助前端工程师定位并解决各种线上问题，确保项目健康良好的运行。提供异常数据及性能数据的查询，及提供用户行为记录数据，个人免费版本只有2周，目前对部分小程序还未支持。

• 优点：提供各种大屏可视化数据展示
• 缺点：公司级产品需付费，平台支持还不够完善

异常定位实现：

1. 开启minimize、source-map打包后部署到生产环境。
2. 部署上产以后，在关闭minimize代码混淆压缩，再次打包，保存这次打包后的代码
3. 遇到问题使用生产环境定位的位置信息，在本地进行源码定位

frontjs

   frontjs是蒲公英旗下一款多个维度监测网站的产品，除开对异常事件的监控，还增加了性能，访问数据，留存，日报等功能。但默认的基础版本无用户范围和性能监控，且数据保留24小时，高级版和私有化部署都需要额外收费。

• 优点：异常和性能监控都区分了类型，网络请求和资源下载等；除开对异常事件的监控，还增加了性能数据等监控，功能较丰富。
• 缺点：基础版本不够用，升级需付费，且异常监控无行为记录，错误记录较为表面。

sentry

   sentry是一个开源的监控系统能支持服务端与客户端的监控，还有个强大的后台错误分析、报警平台。主要用于如何快速的发现故障。支持几乎所有主流开发语言和平台，并提供了现代化UI，它专门用于监视错误和提取执行适当的事后操作所需的所有信息，官方提供了多个语言的SDK。让开发者第一时间获悉错误信息，并方便的整合进自己和团队的工作流中。

• 优点：支持语言全面，功能较完善，开源免费/收费使用saas服务
• 缺点：外国服务器，需要考虑服务稳定性

异常定位实现：

大致有三种方式：

1. 官方cli（sentry-cli）
2. 调用官方提供的API（HTTP）接口上报
3. webpack插件进行上报

当下产品需求

• 无感知收集：文件加载错误、js执行报错、接口异常
• npm私服搭建，从私服安装sdk
• 源定位的方案
  1. 将源码sourcemap与文件一同部署：加密混淆，限制ip访问
  2. 将源码sourcemap上传到私服：修改ks前端商店中的docker容器，增加是否上传sourcemap选项配置，在打包完成后进行上传，在删除sourcemap源码文件，再部署到服务器

SDK开发流程

监控错误 -> 搜集错误 -> 存储错误 -> 分析错误 -> 错误报警-> 定位错误 -> 解决错误

监控错误

第一个版本先集成到微信小程序中，也就是捕获js的异常问题.

我们常见的异常有：

• 静态资源加载类型异常
• js 代码执行时异常
• promise 类异常
• 接口请求类型异常
• 跨域脚本执行异常
• log控制台error

总结

本文纯属自己个人观点，如有误解请评论指出，一同进步🙏🏻

参考文献

• 各大平台官网文档API
• 0o华仔o0    Sentry监控详解
• 南城FE    前端异常监控平台对比