前端反常监控
自行开发sdk嵌入project进行：反常报错、功用剖析、行为统计;
自研流程
调研剖析 => 数理中心难点 => 规划开发方案 => 乌拉
剖析各大渠道sourcemap反常定位完成方案
Fundebug
默许情况下，Fundebug会依据紧缩代码中的sourceMappingURL下载Source Map文件，用户仅需求将生成的Source Map文件布置在服务器上，不需求额定操作。
如果用户不期望公开Source Map，则可以主动上传Source Map文件。Fundebug供给了两种不同的上传方式:
- 经过Fundebug的前端UI上传
- 经过Fundebug的API上传
Webfunny
公司成立于2021年05月25日，咱们致力于协助前端工程师定位并解决各种线上问题，保证项目健康良好的运行。供给反常数据及功用数据的查询，及供给用户行为记载数据，个人免费版别只要2周，现在对部分小程序还未支撑。
- 长处：供给各种大屏可视化数据展示
- 缺陷：公司级产品需付费，渠道支撑还不行完善
反常定位完成：
- 开启minimize、source-map打包后布置到生产环境。
- 布置上产以后，在封闭minimize代码混杂紧缩，再次打包，保存这次打包后的代码
- 遇到问题运用生产环境定位的位置信息，在本地进行源码定位
frontjs
frontjs是蒲公英旗下一款多个维度监测网站的产品，除开对反常事件的监控，还增加了功用，拜访数据，留存，日报等功用。但默许的根底版别无用户规模和功用监控，且数据保留24小时，高级版和私有化布置都需求额定收费。
- 长处：反常和功用监控都区分了类型，网络请求和资源下载等；除开对反常事件的监控，还增加了功用数据等监控，功用较丰富。
- 缺陷：根底版别不行用，晋级需付费，且反常监控无行为记载，过错记载较为外表。
sentry
sentry是一个开源的
监控系统能支撑服务端与客户端的监控，还有个强大的后台过错剖析、报警渠道。主要用于怎么快速的发现毛病。支撑简直所有干流开发言语和渠道，并供给了现代化UI，它专门用于监视过错和提取执行适当的事后操作所需的所有信息，官方供给了多个言语的SDK。让开发者第一时间得悉过错信息，并方便的整合进自己和团队的工作流中。
- 长处：支撑言语全面，功用较完善，开源免费/收费运用saas服务
- 缺陷：外国服务器，需求考虑服务稳定性
反常定位完成：
大致有三种方式：
- 官方cli（sentry-cli）
- 调用官方供给的API（HTTP）接口上报
- webpack插件进行上报
当下产品需求
- 无感知收集：文件加载过错、js执行报错、接口反常
- npm私服搭建，从私服装置sdk
- 源定位的方案
- 将源码sourcemap与文件一起布置：加密混杂，约束ip拜访
- 将源码sourcemap上传到私服：修正ks前端商铺中的docker容器，增加是否上传sourcemap选项装备，在打包完成后进行上传，在删除sourcemap源码文件，再布置到服务器
SDK开发流程
监控过错 -> 收集过错 -> 存储过错 -> 剖析过错 -> 过错报警-> 定位过错 -> 解决过错
监控过错
第一个版别先集成到微信小程序中，也便是捕获js的反常问题.
咱们常见的反常有：
- 静态资源加载类型反常
- js 代码执行时反常
- promise 类反常
- 接口请求类型反常
- 跨域脚本执行反常
- log控制台error
总结
本文纯属自己个人观点，如有误解请谈论指出，一起进步
参考文献
- 各大渠道官网文档API
- 0o华仔o0 Sentry监控详解
- 南城FE 前端反常监控渠道比照
