VUE错误日志监控（一）

前端错误日志监控可以解决什么问题

我们知道当前端项目的js发生错误时，可能会导致页面阻塞，操作不流畅，或者白屏等异常。但是由于我们的页面是在用户的浏览器打开的，这使的复现和查询问题的流程变的繁琐。这就使得我们需要将发生在浏览器的错误进行收集以便于生产问题处理。

如何进行错误捕获

javascript的错误分为以下这么几类：

1.语法错误（不能通过解析器解析）

2.运行时错误（解析器执行时抛出错误）

3.网络请求错误

收集错误：

1.try-catch

使用try-catch我们可以收集到语法错误和运行时错误，但需要注意的是，当我们捕获的代码块内部存在异步代码时就没法捕捉到error了（这个原因我觉得是和eventloop机制有关）

2.window.onerror

window.onerror就比较厉害了，它可以捕获同步和异步error，同时window.addEventListener('error',() => {}, true）的时候还可以监听资源请求错误

3.promise错误， async/await错误捕获

对于promise的错误我们一般是采用.catch的方式去监测，但是每个promise都要处理catch就很繁琐，有没有能统一处理的的方式呢？当然是有的，window.addEventListener("unhandledrejection", e=> {})

4.vue错误捕获

我们可以采用vue的全局错误捕获函数Vue.config.errorHandler，这样可以对vue抛出的错误全局捕获

工欲善其事必先利其器，有了以上的这些东西，让我们愉快的写代码吧

在我们的vue项目里面新建一个文件叫error.js

然后对我们上面监听我们上面说到的这些方法

图1

获取到错误信息之后，我们需要对错误进行一个格式化处理，这里我们使用error-stack-parser这个库对error进行格式化处理。处理完成之后所有的错误都有了一个统一的格式

图2

然后我们进行上报，也就是我们的sendToErrorService方法

图3

这里我们采用比较常见的统计上报方式，为了减小请求体积这里我们对错误信息进行转码（也可以在这里进行加密），到这里我们的客户端处理就算完成了，下一篇我们一起来看看我们的错误日志处理服务怎么处理这些错误。