confluence搭建完出现系统错误_十天搭建一套前端监控系统(三) JavaScript错误归类与堆栈分析...

首页

这个主题在前边已经介绍过了，但是没有纳入这个系列，所以，我旧文重发，并作了一些调整。

作为前端开发，你最关注的当然是应该是Javascript Error(下边简称：js error)，js error复杂多样，我大致将其分为三类：捕获异常、自定异常、未处理异常。捕获的方法分别为：window.onerror、console.error、window.onunhandledrejection；具体是如何捕获这些异常的，可以去github上搜索webfunny_monitor看实现方法。好了，看看我是怎么做的吧

了解线上项目的报错趋势

线上项目报错趋势

首先，我们需要有个报错趋势总览的功能，我们不是机器，不可能一直盯着我们的数据，看看产生了多少错误，所以我们需要一个趋势图。报错趋势图中添加了对7天前，同一时间段的数据做了对比，可以作为参考。另外，我们还需要一个警报系统，这样，我们就能够实时掌握线上项目的健康状况了。最后，我加了评分功能，辅助我们对项目健康状况的判断。

JavaScript错误分类聚合

1. 捕获异常是通过重写window.onerror 方法，来捕获JS运行时产生的异常，地球人都知道，我就不多说什么了。
2. 自定义异常时通过重写console.error方法获取，这个方法，可能大多数小伙伴都会忽略。因为很多第三方的插件和库都是用这种方式把异常打印出来，而它又是在我们能捕获异常的情况下打印出来的，所以我称之为自定义异常。 所以我们需要重写console.error的方式来进行捕获，这样，第三方打印出来的异常也不会被遗漏了。
3. 未处理异常是通过重写window.onunhandledrejection方法获取。 当你用到Promise的时候，而你又忘记写reject的捕获方法的时候，系统总是会抛出一个叫 Unhandled Promise rejection. 没有堆栈，没有其他信息，特别是在写fetch请求的时候很容易发生。 所以我们需要重写这个方法，以帮助我们监控此类错误，给你们查缺补漏。

JavaScript错误分类聚合

通过分类聚合，我们需要统计出每天js报错的数量，你的项目有没有异常，一目了然。通过点击不同的柱子(选择不同的日期)，展现出某一天的js error分类聚合的结果。帮助我们追溯错误产生的具体日期。同时，由于用户的群体各不相同，使用的设备也是不同的，还需要分析出，每个平台系统上发生的个数，以及这个错误具体影响多少人，最近发生的时间，都是帮我们排查错误的重要因素。

JavaScript错误的堆栈分析

js报错堆栈分析

报错趋势分析和归类完成了，剩下的就是需要找到每个问题的发生的具体位置。所以我提供了三大步骤来完成对js error的精确分析和定位。

1. 报错发生具体时间，每一种错误，我们需要统计出它发生的具体时间，从下图可以看出，这个错误在每个小时，每一分钟发生的数量都能够清晰可见。可以让我们直接定位到错误发生的时间，省去查找的麻烦。

js error发生的具体时间

2. sourceMap 反向定位源码。现在很多监控系统都弄了这个玩意，我也想说太多。通过这项技术，我们可以定位出你的代码片段，这样，你就知道哪里发生了错误，趁老板还没发现，赶紧改掉吧。

sourceMap定位源码

3. 用户行为记录复现。好吧，不管你技术有多么牛X，你总会遇到用户的错误，你就是无法复现，真是想死的心都有。不过不用担心，我们提供了一个功能，叫「查看行为轨迹」，我们可以直接根据这个错误查出这个用户的所有行为记录，是不是很酷，快来试试吧 ^ _ ^

行为记录

好了，到这里，我们已经把js erro分析的这么透彻了，还有什么前端报错是你解决不了的呢？如果还不行，那就赶紧来部署一下吧。：)

本文由 www.webfunny.cn 前端监控系统 提供。 只需要简单几步就可以搭建一套属于自己的前端监控系统，快来试试吧 ^ _ ^。