一步一步搭建前端监控系统：如何定位前端线上问题？

aaron 发布于2019-08-23 18:41 / 1060人阅读

摘要：一直以来，前端的线上问题很难定位，因为它发生于用户的一系列操作之后。当然，这些问题并非不能克服，让我们来一起看看如何去定位线上的问题吧。地址参考一步一步搭建前端监控系统错误监控篇一步一步搭建前端监控系统接口请求异常监控篇

摘要： 记录用户行为，排查线上BUG。

作者：一步一个脚印一个坑

原文：如何定位前端线上问题（如何排查前端生产问题）

Fundebug经授权转载，版权归原作者所有。

一直以来，前端的线上问题很难定位，因为它发生于用户的一系列操作之后。错误的原因可能源于机型，网络环境，复杂的操作行为等等，在我们想要去解决的时候很难复现出来，自然也就无法解决。当然，这些问题并非不能克服，让我们来一起看看如何去定位线上的问题吧。

所谓，工欲善其事必先利其器，你不能撸起袖子蛮干，所以，我们需要一个工具。我们曾经尝试用过很多监控工具去统计这些错误，比如，听云、OneApm、sentry、Fundebug、growingIo 等等。每家工具都各有所长，但也都各有所短，而且要花不少的钱（感觉是痛点，哈哈）。

一、统计前端错误（Demo）

众所周知，我们有办法去统计前端的错误，那就是大名鼎鼎的 window.onerror 方法，用法如下：

// 重写 onerror 进行jsError的监听
window.onerror = function(errorMsg, url, lineNumber, columnNumber, errorObj) {
    var errorStack = errorObj ? errorObj.stack : null;
    // 分类处理信息
    siftAndMakeUpMessage(errorMsg, url, lineNumber, columnNumber, errorStack);
};

window.onerror 方法中参数的意义我就不一一介绍了，我相信大家也已经耳熟能详了。总之它能够为我们记录下线上的很多错误，以及一些额外的信息。我将window.onerror方法收集到的错误信息进行分析统计后的结果如下：

如上图所见：我们统计出了每天的错误量，每个小时的错误量，每天的错误率变化，来鉴定我们线上环境是否健康。我们按照JS错误数量进行分类排序，按照页面进行错误分类。通过上边的数据分析，我们能够清晰地观察到线上项目的报错情况。

二、分析错误详情

线上的错误日志统计出来了，如何解析这些错误日志呢。如下图，解析出用户的机型，版本，系统平台，影响范围，以及具体的错误位置，从而提高我们解决问题的效率。

疑问？

window.onerror 方法能够利用的地方都已经用的差不多了，但是它真的可以帮我们定位和解决前端线上的问题吗？

线上能够修复的问题我已经尽量修复了，但是线上的问题频发。当客服反馈一个问题，你发现没有测试机型，无法复现用户错误的时候，让你来修复这个问题，只能两眼一抹黑，无能为力。

例如：线上用户进过了复杂的链接跳转而发生了错误；用户调用的接口发生了异常或者超时；线上的用户反馈异常根本就跟实际情况不符，等等。这些非直观型的问题该如何解决？所以，我们需要用户的行为记录。

三、记录用户的访问行为（Demo）

有些错误是前端页面经过复杂的跳转、回退之后才发生的，就算测试人员也很难测试出这种问题，因为线上的用户的任何行为都有可能出现。往往我们知道的只是他在最后停留的页面发生了错误。如此，我们记录下用户的跳转日志，就能够复现出用户的行为，从而复现BUG。

四、记录用户的接口行为

接口请求是一个前端项目涉及最多的行为，接口的异常包括：后台报错，响应超时，网络环境较差，重复接口数据覆盖等等。这些错误也只有在真实的用户环境中才会发生，是典型的线上问题。我们可以记录下用户的请求时间，参数，响应时间，响应状态等等，可以具体分析出来接口对页面的影响。

五、记录用户的点击行为

用户经过一系列复杂的行为操作之后（主要是点击行为），页面的样子和保存的数据都经过了很多变化，此时此刻最容易发生数据错乱的现象，导致修复bug的时候无从入手，是复现用户行为中重要的一环。

六、记录用户的页面截图

即使你记录下所有的行为，但是你依然需要看到页面的样子，才能够分析出问题所在，那么我们依然可以通过js截图来看看用户设备上的样子。

七、分析用户的场外信息

当用户所有的行为都被我们掌握之后，我们能够复现出用户的行为，甚至能够复现出用户的问题，也许我们还需要一些场外信息才能精准定位问题，比如，用户的机型，地理位置，系统版本，当时的网络环境（这个不准确，我是依据用户当时首次加载页面的时间来判断，只能作为参考依据）

总结

问题产生的原因五花八门，只有把日志做全了，才能够准确的定位和解决问题。

这是我排查线上问题的经验和实战，分享出来，以求分享和学习。

说了这么多都没有直接体验直观，请移步。 Demo地址

参考

一步一步搭建前端监控系统：JS错误监控篇

一步一步搭建前端监控系统：接口请求异常监控篇

GPU云服务器云服务器一步一步写java 走一步进一步进一步增强

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105672.html

一步一步搭建前端监控系统：如何记录用户行为？

摘要：摘要通过记录用户行为，快速复现场景。这是搭建前端监控系统的第二章，主要是介绍如何统计报错，跟着我一步步做，你也能搭建出一个属于自己的前端监控系统。摘要：通过记录用户行为，快速复现BUG场景。作者：一步一个脚印一个坑原文：搭建前端监控系统（备选）用户行为统计和监控篇（如何快速定位线上问题） Fundebug经授权转载，版权归原作者所有。一步一步搭建前端监控系统系列博客： ...

tolerious 2019-08-26 10:33 评论0 收藏0
一步一步搭建前端监控系统：JS错误监控篇

摘要：摘要徒手写错误监控。为什么用定时器呢，因为在单页应用中，路由的切换和地址栏的变化是无法被监控的，我确实没有想到特别好的办法来监控，所以用了这种方式，如果有人有更好的办法，请给我留言，谢谢。摘要：徒手写JS错误监控。作者：一步一个脚印一个坑原文：搭建前端监控系统（二）JS错误监控篇 Fundebug经授权转载，版权归原作者所有。背景：市面上的监控系统有很多，大多收费，对于...

EdwardUp 2019-08-23 18:30 评论0 收藏0
一步一步搭建前端监控系统：接口请求异常监控篇

摘要：参考一步一步搭建前端监控系统错误监控篇用插件记录网络请求异常关于专注于微信小程序微信小游戏支付宝小程序和线上应用实时监控。摘要：如何监控HTTP请求错误？作者：一步一个脚印一个坑原文：搭建前端监控系统（四）接口请求异常监控篇 Fundebug经授权转载，版权归原作者所有。背景：市面上的监控系统有很多，大多收费，对于小型前端项目来说，必然是痛点。另一点主要原因是，功能虽然...

dreamtecher 2019-08-23 18:39 评论0 收藏0
一步一步搭建前端监控系统：如何将网页截图上报？

摘要：目前已经在运行的线上前端监控系统代码和讲解都放在这篇文章里监控系统介绍及代码用户对前端程序员来说，就是一个黑匣子。摘要：通过录屏或者截图，快速复现BUG场景。作者：一步一个脚印一个坑原文：搭建前端监控系统（备选）Js截图上报篇 Fundebug经授权转载，版权归原作者所有。 PS：本文关于Fundebug录屏功能的内容有些不准确的地方，比如录屏并非通过截图实现的，录屏插件...

Martin91 2019-08-26 10:21 评论0 收藏0
链家网前端总架构师杨永林：我的8年架构师成长之路

摘要：杨永林，人称教主，八年前端开发经验，原新浪微博前端技术专家，现任链家网前端总架构师。年年底，教主加入链家网，负责前端的整体架构工作。杨永林，人称教主，八年前端开发经验，原新浪微博前端技术专家，现任链家网前端总架构师。长期研究Web访问性能优化和前端框架搭建。作为初始团队成员，教主参与了新浪微博所有PC版本的开发，其中4~6版以架构师的身份设计了微博PC版的前端架构。在新浪微博任职期间...

liaosilzu2007 2019-08-23 15:19 评论0 收藏0