 异常上报如何选择通讯方式 动态创建img标签： 其实上报就是要将捕获的异常信息发送到后端。最常用的方式首推动态创建标签方式。 因为这种方式无需加载任何通讯库，而且页面是无需刷新的。 基本上目前包括百度统计 Google统计都是基于这个原理做的埋点。 new Image().src ='http://localhost:7001/monitor/error'+ '?info =xxxxxx'  通过动态创建一个img,浏览器就会向服务器发送get请求。 可以把你需要上报的错误数据放在querystring字符串中，利用这种方式就可以将错误上报到服务器了。 Ajax上报： 实际上我们也可以用ajax的方式上报错误，这和我们再业务程序中并没有什么区别。 上报哪些数据：  上报哪些数据： 我们先看一下error事件参数：  其中核心的应该是错误栈，其实我们定位错误最主要的就是错误栈。 错误堆栈中包含了绝大多数调试有关的信息。其中包括了异常位置（行号，列号），异常信息 上报数据序列化： 由于通讯的时候只能以字符串方式传输，我们需要将对象进行序列化处理。 大概分成以下三步： 1、将异常数据从属性中解构出来，存入一个JSON对象 2、将JSON对象转换为字符串 3、将字符串转换为Base64 当然在后端也要做对应的反向操作 这个我们后面再说。   异常上报的后端服务器 搭建eggis工程： 异常上报的数据一定是要有一个后端服务接收才可以。 我们就以比较流行的开源框架eggjs为例来演示 # 全局安装egg-cli npm i egg-init -g # 创建后端项目 egg-init backend --type=simple cd backend npm i # 启动项目 npm run dev 编写error上传接口： 首先在app/router.js添加一个新的路由  创建一个新的： controller (app/controller/monitor)  看一下接收后的结果☟  记入日志文件： 下一步就是讲错误记入日志。实现的方法可以自己用fs写，也可以借助log4js这样成熟的日志库。 当然在eggjs中是支持我们定制日志那么我么你就用这个功能定制一个前端错误日志好了。 在/config/config.default.js中增加一个定制日志配置  在/app/controller/monitor.js中添加日志记录：  最后实现的效果： Webpack插件实现SourceMap上传 谈到异常分析最重要的工作其实是将webpack混淆压缩的代码还原。 创建Webpack插件： /source-map/plugin（文件位置） 加载webpack插件： webpack.config.js（文件位置） 添加读取sourcemap读取逻辑： 在apply函数中增加读取sourcemap文件的逻辑 /plugin/uploadSourceMapWebPlugin.js 实现http上传功能： 服务器端添加上传接口： /backend/app/router.js（文件位置） 添加sourcemap上传接口： /backend/app/controller/monitor.js 最终效果： 执行webpack打包时调用插件sourcemap被上传至服务器。 解析ErrorStack 考虑到这个功能需要较多逻辑,我们准备把他开发成一个独立的函数并且用Jest来做单元测试： 先看一下我们的需求☟ 搭建Jest框架： 首先创建一个/utils/stackparser.js文件☟ 在同级目录下创建测试文件stackparser.spec.js 以上需求我们用Jest表示就是 整理如下: 下面我们运行Jest npx jest stackparser --watch 显示运行失败，原因很简单因为我们还没有实现对吧。 下面我们就实现一下这个方法 反序列Error对象： 首先创建一个新的Error对象 将错误栈设置到Error中。 然后利用error-stack-parser这个npm库来转化为stackFrame 运行效果如下☟ 解析ErrorStack： 下一步我们将错误栈中的代码位置转换为源码位置 我们再用Jest测试一下☟ 这时我们再看一下结果： 这样一来测试就通过啦~ 将源码位置记入日志： 记录完成后，我们再来看一下运行效果： 结束了这一步，我们的ErrorStack工作就完成了。 需要运用的两种开源框架 Fundebug： Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有阳光保险、荔枝FM、掌门1对1、核桃编程、微脉等众多品牌企业。 Sentry： Sentry 是一个开源的实时错误追踪系统，可以帮助开发者实时监控并修复异常问题。 它主要专注于持续集成、提高效率并且提升用户体验。 Sentry 分为服务端和客户端 SDK，前者可以直接使用它家提供的在线服务，也可以本地自行搭建； 后者提供了对多种主流语言和框架的支持，包括 React、Angular、Node、Django、RoR、PHP、Laravel、Android、.NET、JAVA 等。 同时它可提供了和其他流行服务集成的方案，例如 GitHub、GitLab、bitbuck、heroku、slack、Trello 等。 目前公司的项目也都在逐步应用上 Sentry 进行错误日志管理。 总结： 截止到目前为止，我们把前端异常监控的基本功能算是形成了一个MVP(最小化可行产品)。 后面需要升级的还有很多，对错误日志的分析和可视化方面可以使用ELK。 发布和部署可以采用Docker。对eggjs的上传和上报最好要增加权限控制功能。 关于这一期的VUE异常处理课程我们就讲到这里啦。 |
|
|
