vue+node简单演示搭建异常监控平台—收集错误、上报

1,879 阅读4分钟

最近玩了一下Sentry的私有化部署,本文不是介绍如何搭建监控系统,是为了简单理解前端异常监控系统原理的(比如Sentry),因为一个系统需要完善的功能太多了,所以我们主要了解在搭建中,前端需要负责解决什么问题吧。

重点解决问题:

  • 如何上传sourcemap到服务器
  • 如何利用sourcemap还原源码错误位置

搭建的步骤:

  1. 收集前端异常(这篇文章主要是示范vue的异常)
  2. 把收集的异常上报包括sourcemap
  3. 利用sourcemap解析源代码的位置

了解Sentry上报流程

首先我们看看流行的异常监控系统怎么上报的,站在巨人的肩膀上看世界~~

  1. 在main.js初始化Sentry,监听异常并且上报

image.png

  1. 使用plugin(webpack-sentry-plugin 或者 @sentry/webpack-plugin) 上传sourcemap文件

image.png

==然后就开始动手写一下啦==

一、收集前端异常

由于Vue会捕获所有Vue单文件组件或者Vue.extend继承的代码,所以在Vue里面出现的错误,并不会直接被window.onerror捕获,而是会抛给Vue.config.errorHandler。

因为vue里抛出的异常都是vue文件经过vue-loader转义之后的JavaScript抛出的。所以使用window.onerror捕获异常,都是Script Error

vue.config.errorHander = function(err){
    throw err
}

但是Vue.config.errorHandler无法捕捉⽹络请求异常,利用error事件监听捕捉

window.addEventListener('error', (msg,url,row,col,error)=> {
    console.log(msg, url, row, col, error);
    return true;
}, true);

二、把异常上报

随便写一个错误

image.png

监听错误

image.png

查看错误信息(build之后)

image.png

vue的错误信息缺少了很多有用的信息,比如说错误的行数和列数。其实不同的浏览器,错误对象格式都有可能不同,所以对错误对象进行标准化,TraceKit就帮我们实现了各平台的错误信息标准化

安装tracekit依赖,格式化错误对象
npm i tracekit

格式化错误信息,并且上报,动态创建img标签进⾏上报,页面不需要刷新,没有跨域的问题。(只要在js中new出Image对象就能发起请求,⽽且没有阻塞问题,在没有js的浏览器环境中也能通过img标签正常打点。)

image.png

image.png

我们上传的错误信息都是经过打包压缩过的位置信息,这个时候需要sourcemap还原源代码的错误位置。所以我们需要把sourcemap上传到服务器去。

三、上传sourcemap

webpack-sentry-plugin写的颇为复杂,比较完善,重点就是拿到打包后的sourcemap文件,上传,然后删除

image.png

那我们的工作主要是打包后找到所有的sourcemap文件,遍历上传,然后删除文件(记得如果是脚手架 设置productionSourceMap: true,默认配置应该是不会打包出sourcemap的)

image.png

上传接口也可以和webpack-sentry-plugin一样在实例化的时候传进去,这里只是为了演示,怎么方便就怎么来了

使用plugin image.png

四、后端接收文件

之前写过一篇文章,演示安全攻击的,这里还是用原来的node express框架(因为java我也不会)express官方文档地址

image.png

创建入口文件 image.png

创建app文件夹,写接口 image.png

安装一下nodemon ,npm run dev 可以看到hello页 image.png

开始写上传接收文件的接口,把接收的文件放在本地文件夹中,方便演示

image.png

前端上传

image.png

这时候我们去执行以下build

image.png

后端后接收到sourcemap文件

image.png

既然有了sourcemap文件我们就要开始利用sourcemap还原线上的错误(因为线上代码都是经过压缩的,直接看看不出来实际问题)

五、还原源码错误位置

前端上报错误,把行和列的位置和错误文件名上传(有用的信息都可以上传),利用建立img标签

image.png

后端接收信息,利用source-map解析错误

官方文档:source-map

安装 npm i source-map

解析文件,得到源码位置

image.png

vue制造一个错误

image.png

build之后,运行index文件,用本地的nginx也行,直接运行接改一下引用的js路径

image.png

控制台打印出源文件的错误 image.png

资源加载失败我们需要监听error事件,上报资源加载异常链接

image.png

修改后台代码,如果是资源加载问题直接输出异常

image.png

还有什么异常需要处理的可以另外处理

参考文档:

  1. Sentry异常捕获平台
  2. 官方文档:source-map
  3. Sentry原理-收集、上报