![698020640c92a49d31aa2771ca9d6374.png](https://i-blog.csdnimg.cn/blog_migrate/f6e815ebd261183c7abd6065b2b263d8.jpeg)
首页
这个主题在前边已经介绍过了,但是没有纳入这个系列,所以,我旧文重发,并作了一些调整。
作为前端开发,你最关注的当然是应该是Javascript Error(下边简称:js error),js error复杂多样,我大致将其分为三类:捕获异常、自定异常、未处理异常。捕获的方法分别为:window.onerror、console.error、window.onunhandledrejection;具体是如何捕获这些异常的,可以去github上搜索webfunny_monitor看实现方法。好了,看看我是怎么做的吧
了解线上项目的报错趋势
![fc9f89bdb723473943137a8bfdd393dd.png](https://i-blog.csdnimg.cn/blog_migrate/6e8edaacb3b731f9927db98df6e7f8cd.jpeg)
线上项目报错趋势
首先,我们需要有个报错趋势总览的功能,我们不是机器,不可能一直盯着我们的数据,看看产生了多少错误,所以我们需要一个趋势图。报错趋势图中添加了对7天前,同一时间段的数据做了对比,可以作为参考。另外,我们还需要一个警报系统,这样,我们就能够实时掌握线上项目的健康状况了。最后,我加了评分功能,辅助我们对项目健康状况的判断。
JavaScript错误分类聚合
- 捕获异常是通过重写window.onerror 方法,来捕获JS运行时产生的异常,地球人都知道,我就不多说什么了。
- 自定义异常时通过重写console.error方法获取,这个方法,可能大多数小伙伴都会忽略。因为很多第三方的插件和库都是用这种方式把异常打印出来,而它又是在我们能捕获异常的情况下打印出来的,所以我称之为自定义异常。 所以我们需要重写console.error的方式来进行捕获,这样,第三方打印出来的异常也不会被遗漏了。
- 未处理异常是通过重写window.onunhandledrejection方法获取。 当你用到Promise的时候,而你又忘记写reject的捕获方法的时候,系统总是会抛出一个叫 Unhandled Promise rejection. 没有堆栈,没有其他信息,特别是在写fetch请求的时候很容易发生。 所以我们需要重写这个方法,以帮助我们监控此类错误,给你们查缺补漏。
![20d4a416619bfb23b045f69e0a37bce7.png](https://i-blog.csdnimg.cn/blog_migrate/4f93f68a2f006feaf94ef29abdda93b5.jpeg)
JavaScript错误分类聚合
通过分类聚合,我们需要统计出每天js报错的数量,你的项目有没有异常,一目了然。通过点击不同的柱子(选择不同的日期),展现出某一天的js error分类聚合的结果。帮助我们追溯错误产生的具体日期。同时,由于用户的群体各不相同,使用的设备也是不同的,还需要分析出,每个平台系统上发生的个数,以及这个错误具体影响多少人,最近发生的时间,都是帮我们排查错误的重要因素。
JavaScript错误的堆栈分析
![0aa032347a218bb1b3c992c46575e921.png](https://i-blog.csdnimg.cn/blog_migrate/b0bb295c86f82a766e62fa5770567bd4.jpeg)
js报错堆栈分析
报错趋势分析和归类完成了,剩下的就是需要找到每个问题的发生的具体位置。所以我提供了三大步骤来完成对js error的精确分析和定位。
1. 报错发生具体时间,每一种错误,我们需要统计出它发生的具体时间,从下图可以看出,这个错误在每个小时,每一分钟发生的数量都能够清晰可见。可以让我们直接定位到错误发生的时间,省去查找的麻烦。
![e428f0a11467c2bac0669a22416117f4.png](https://i-blog.csdnimg.cn/blog_migrate/c90358349ac94a178de667fcd08710c3.jpeg)
js error发生的具体时间
2. sourceMap 反向定位源码。现在很多监控系统都弄了这个玩意,我也想说太多。通过这项技术,我们可以定位出你的代码片段,这样,你就知道哪里发生了错误,趁老板还没发现,赶紧改掉吧。
![6120011d1b3ddeea74d10ba0ade7ca9a.png](https://i-blog.csdnimg.cn/blog_migrate/89fad8450cdecd1cbad20b75025b9c2e.jpeg)
sourceMap定位源码
3. 用户行为记录复现。好吧,不管你技术有多么牛X,你总会遇到用户的错误,你就是无法复现,真是想死的心都有。不过不用担心,我们提供了一个功能,叫「查看行为轨迹」,我们可以直接根据这个错误查出这个用户的所有行为记录,是不是很酷,快来试试吧 ^ _ ^
![5c7823cefac538565deff939062463a1.png](https://i-blog.csdnimg.cn/blog_migrate/7a4df96e14ffe9f12b1b747ab60abb2b.jpeg)
行为记录
好了,到这里,我们已经把js erro分析的这么透彻了,还有什么前端报错是你解决不了的呢?如果还不行,那就赶紧来部署一下吧。:)
本文由 www.webfunny.cn 前端监控系统 提供。 只需要简单几步就可以搭建一套属于自己的前端监控系统,快来试试吧 ^ _ ^。