第五期|前端搞监控, 实际操作后的总结

祝传磊
837 阅读6分钟

概述

本文是学习【前端早早聊 第五期内容：前端搞监控】之后，并经过测试，整理一下的结果。因为我对后端的一些知识点不是很了解，所以只能测试前端的代码，涉及到后端和服务器的就是简单描述一下原理了。

所以文章主要说明前端的异常、用户行为进行监控，收集，以便与排查修改。

一、为什么要做监控？

  1. 如果产品是to B的，那可能还好，客户遇到问题后，可以直接联系你，提供给你现象、环境、操作流程，进行复现和排查。
  2. 那如果产品是to C的，客户使用量大，环境复杂，不可能遇到问题都来反馈。为了让产品更加稳定，就需要收集客户遇到的问题并解决。

二、捕捉异常

我做PC端比较多，就已PC端为例了，其他端的捕捉思路基本一致。 例子中先略过如何上报，简单的使用console.log提示可以上报了。

1. window.onerror

代码执行中，如果出现报错，会执行onerror函数，那我们在onerror函数执行数据上报的函数。例子中，利用error函数进行上报。

<!-- index.html  -->
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>异常监控</title>
    <script src="./md5.js"></script>
    <script src="./error.js"></script>
    </head>
    <body>
        <script>
            const a  = {}
            a.b();
        </script>
    </body>
</html>

js

// error.js
const error = (msg) => {
    console.log("数据上报", msg);
}
window.onerror = (msg, url, lineNo, columnNo, e) => {
    error({msg, url, lineNo, columnNo, e});
}

浏览器中，遇到a.b不是函数，出现报错，并能执行console.log，说明已经捕捉到了。

执行数据上报

2. unhandledrejection

该方法可以捕捉Promise被拒绝reject的情况，下面的Promise执行的reject，需要捕捉到，并且上报，unhandledrejection可以有效的劫持到该情况，执行上报函数即可.

<!-- index.html  -->
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>异常监控</title>
    <script src="./md5.js"></script>
    <script src="./error.js"></script>
    </head>
    <body>
        <script>
            new Promise((resolve, reject) => {
                reject("11")
            })
        </script>
    </body>
</html>

js

// error.js
const error = (msg) => {
    console.log("数据上报", msg);
}
window.addEventListener("unhandledrejection", (e) => {
    error(e);
})

Promise被reject了，就被捕捉到，进行数据上报。

3. 跨域脚本

【方案1】：后端配置 Access-Control-Allow-origin、前端在 script 标签配置 crossorigin

【方案2】：劫持原生方法，使用 try/catch 绕过，将错误抛出

4. Vue.js 与 React.js

我熟知的是React.js 先用该框架测试。利用componentDidCatch的生命周期函数捕捉，本例子中出现异常时，仅仅让页面显示"出现错误"来替代数据上报。

效果如下，正常流程下可以正常显示，出现问题后，会执行componentDidCatch函数，我们在该函数中执行上报操作即可。

三、用户行为捕捉

异常捕捉到之后，需要复现和修复这个异常，当知道出现这个异常时的行为时，就能很好的复现问题排查问题。

1. 用户行为

点击，滚动，聚焦|失焦，长按等。

使⽤用 addEventListener 全局监听点击事件， 将⽤用户⾏行行为(click、input)和 dom 元素名字 收集。

点击页面中的元素 1，会捕捉到该元素的信息，实际情况中需要更多的参数，比如元素属性，父节点，哪个页面。

2. 浏览器行为

发送请求，跳转，前进|后退，关闭，新开窗口等。

比如请求捕捉，只需要监听XMLHttpRequest对象的onreadystatechange回调函数，在回调函数执⾏行行时收集数据。

页面跳转捕捉：监听 window.onpopstate，⻚页⾯面跳转的时会 触发此⽅方法，将信息收集。

3. 控制台打印行为

console.log， info、warn、error 等。改写 console 对象的log等⽅法，在 console 执⾏时将信息收集。

错误信息、用户行为都收集完后，再把这些信息进行上报，就很容易复现。

四、数据上报

上面例子中都是用console.log数据打印来替代数据上报的操作的，这里使用最原生的请求来实现。

详细错误信息没有捕捉，这边只是列举一个非常简单的例子。

1. 为什么要使用GIF？

  1. 没有跨域问题，看上图；
  2. 发GET请求之后不需要获取和处理数据、服务器也不需要发送数据；
  3. 不会携带当前域名的cookie；
  4. 不会阻塞页面加载，影响用户体验，只需new Image对象；
  5. 相对于BMP/PNG体积最小，可以节约35% - 41%的网络资源。

2. 防止重复数据上报

  1. 抽取错误信息里几个关键词，利用md5转化成ID
  2. 利用CDN资源，判断是否已经有该错误信息的记录

五、监控

满足条件后讲发送告警，可以根据单位时间内报错量评估告警等级，普通经过通过邮件发送相关信息即可。若报错量上升，告警等级也就升级，可以通过短信，工作群内通知，以便及时看到及时解决。

六、总结

通过这次学习，了解了前端做异常监控的大致流程，原来都是根据客户的描述大致猜一猜可能会出现此现象的原因，再去尝试复现。比较费时费力。

这个监控流程目前只是知道大致流程，可能在实现的过程中还会遇到很多坑，但是至少了解到很多可以实现的功能。而且想后台的一些工具，比如Kafka，之前只是听说过，通过这次讲解，也大致了解了他的一些优势，各服务之间的通信；可以缓存通信信息和缓解系统压力；稳定性更高，到达率更有保障。

另外也更加知道了，我的知识面还是很狭窄的，需要不断的学习，提升。

本文的描述全是白话文，通俗易懂，觉得不错的话，请帮忙点个赞👍～谢谢

前端早早聊

前端早早聊大会目标成为用得上、听得懂、抄得走的技术大会，计划 2020 年办 >= 15 期，由前端早早聊与掘金联合举办，前端早早聊大会行程动态、录播视频/PPT/讲稿资料下载请关注 「前端早早聊」 公众号跟进。 5 月 16 日举办第六届 - 前端到底怎么玩 Serverless(Paas|Faas)，报名请戳：传送门，海报及讲师行程如下：

看完若有启发，点个赞吧

avatar
文章
阅读
粉丝