[
作为前端开发，你最关注的当然是应该是Javascript Error（下边简称：js error），js error复杂多样，web君大致将其分为三类：捕获异常、自定异常、未处理异常。捕获的方法分别为：window.onerror、console.error、window.onunhandledrejection；具体是如何捕获这些异常的，可以去github上搜索webfunny_monitor看实现方法~
下面给大家介绍一下webfunny是怎么实现的
了解线上项目的报错趋势
线上项目报错趋势
首先，我们需要有个报错趋势总览的功能，我们不是机器，不可能一直盯着我们的数据，看看产生了多少错误，所以我们需要一个趋势图。报错趋势图中添加了对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**」****试用~
