VUE错误日志监控（二）

在上一篇文章里面我们成功的收集到的浏览器端的错误，收集就是为了处理，这篇我们来看看如何处理这些错误。

有经验的同学应该都知道，我们的vue代码打包过后在生产环境是一个压缩的状态，也就是说，我们的代码已经不是我们的源代码了，这就导致我们没法定位到源代码的位置，这时候我们即使捕获到错误也没法定位到出错的代码，那这该怎么办呢？答案是sourceMap

什么是sourceMap

sourceMap其实是记录压缩后代码与源代码位置关系的文件。

如何使用sourceMap

我们上一篇中将错误堆栈用error-stack-parser进行了格式化处理，处理完成后就变成了这样

图1

这里我们可以看到错误堆栈中有当前错误的文件地址，行号，列号（这也是我们需要处理的）

sourceMap反解

我们拿到了当前错误信息，剩下的就是对错误信息利用sourceMap进行反解出源码的位置信息，那我们该怎么做呢？

当我们的vue代码打包完成后经过配置会生成对应的.map文件这文件也就是我们的sourceMap文件，我们接下来就要利用这个文件来对报错信息进行反解。

我们先来看看我们的日志处理服务的项目结构

图2

这里我们采用express进行了项目搭建，然后routes下的error.js作为我们的入口文件。

图3

这边我们采用策略模式来处理三种错误分别交由不同的错误处理程序。也就是我们的functions下的index.js

图4

这边就是对不同的错误处理进行的一个聚合导出。然后我们深入到vue错误处理文件中。

图5

终于看到我们的重点了source-map-functions/index.js,这边使用这个文件中的toSource方法对我们上报的错误进行反解

图6

这里是采用source-map来处理我们的报错，也就是之前提到的反解，这里可以看到有几个核心的东西：.map文件，行号，列号剩下的就交给source-map来处理吧。

接下来我们要将我们收集到的错误写入文件，以便于查找，这里我使用了log4js来处理

图7

到此，我们日志就收集完了，可以愉快的排查问题了。这里其实少了一步，大家猜猜是啥？下一篇我们再说吧，最后附上项目地址：

https://github.com/wangKXX/error-service

https://github.com/wangKXX/error-web