前端监控及搭建前端监控

前端监控怎么做？

前端也需要监控？技术人不可忽视的前端监控最全指南

一.前端监控的目的

为什么要进行前端监控？

是一种用于捕获，分析和报告网站或应用程序中存在异常，错误和性能问题的方法。通过监控，我们可以实时了解用户在使用我们产品时可能遇到的问题，从而快速解决和响应问题

前端监控分3大类：数据监控、性能监控和异常监控

数据监控：常说的埋点统计，用于监听用户的操作行为。常见的数据监控包括：

PV / UV：PV 即 Page View ，也就是页面的浏览数量，没打开页面一次就会统计一次；UV 即 User View ，也就是不同用户访问的次数，在 PV 的基础上根据 User 信息的不同做了去重操作；
用户在每个页面停留的时间信息。即从用户打开该页面到用户离开该页面的时间差，用于表示该页面对用户的留存程度；
用户的来处。即从什么入口或什么渠道来到了当前页面，通常会在 URL 中添加查询参数来做区分统计；
用户的页面操作行为。即用户在该页面点击了哪些按钮，或者从什么链接去到了某些页面等等，来分析用户的去向。

性能监控：监听前端项目在用户端展示的性能，这将直接关乎到用户的体验效果。监控这些数据，将能够是我们更好的去优化用户体验。常见的性能监控指标包括以下数据：

不同用户和不同设备下的首屏加载时间，包括白屏时间；
HTTP 接口的响应时间；
静态资源、包括图片的下载时间；

错误监控：指代码在个别特殊场景下，会出现异常报错，很有可能会引发线上的故障。而这部分异常，如果没有异常监控，则只能在用户发现的情况下进行选择性的上报，并不能让我们及时去发现和解决问题。这一部分的错误信息主要分为下面几类：

JS 代码运行错误、语法错误等；
AJAX 请求错误；
静态资源加载错误；
Promise 异步函数错误；

二：错误信息采集

错误信息监控简单来说就是要搜集报错信息的发生的位置，以及报错的类型，进行上报，便于我们能够更好的掌握错误信息，从而能够对症下药。按照 5W1H 的法则来说，我们需要关注以下的几项信息：

自己搭建前端监控

搭建前端

1.定义监控指标：确定要监控的指标，例如页面加载时间，资源加载情况，错误信息等

2.收集监控数据：通过前端代码或后端接口等方式，收集客户端和服务端的监控数据，并将其发送到监控服务器

3.存储监控数据：将收集到的监控数据存储8到数据库或其他持久化存储中，以便后续分析和查询

4.分析监控数据：根据业务需求和监控指标，对监控数据进行分析和统计，包括数据可视化、异常检测、趋势分析等

5.**报警机制**：实现异常报警机制，及时通知开发人员和运维人员进行处理。

6.**优化方案**：根据监控数据的分析结果，提出相应的优化方案，包括前端代码优化、服务器端性能优化等。

复制代码

// 1.引入监控脚本：在HTML页面中引入监控脚本，例如
<script src="monitor.js"></script>


// 2.收集监控数据：在监控脚本中，监听页面加载、资源加载、错误等事件，并将监控数据发送到监控服务器。例如
window.addEventListener("load", function() {
  // 加载时间：可以使用performance.timing API获取加载时间
  // 响应时间：可以使用performance.now() API获取响应时间
  // 错误率：可以使用console.error事件监听器获取错误率
  // 页面加载完成，记录页面加载时间并发送监控数据
  var loadTime = new Date() - performance.timing.navigationStart;
  sendMonitorData('loadTime', loadTime);
});

window.addEventListener("error", function(e) {
  // 发生错误，记录错误信息并发送监控数据
  var message = e.message;
  var url = e.filename;
  var line = e.lineno;
  sendMonitorData('error', {message, url, line});
});

// 监听其他事件，例如资源加载情况等，收集相应的监控数据并发送
// ...

function sendMonitorData(type, data) {
  // 发送监控数据到监控服务器
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/monitor", true);
  xhr.setRequestHeader("Content-type", "application/json");
  xhr.send(JSON.stringify({type, data}));
}


3.存储监控数据：在监控服务器中，将收集到的监控数据存储到数据库或其他持久化存储中，例如：
// 监控服务器接口，用于接收前端发送的监控数据并存储到数据库
app.post('/monitor', function(req, res) {
  var type = req.body.type;
  var data = req.body.data;
  // 将监控数据存储到数据库中
  db.collection('monitor').insertOne({type, data});
  res.send('OK');
});


4.分析监控数据：从数据库中查询监控数据，并对其进行分析和统计，例如：
// 在监控服务器中，查询并统计错误信息
app.get('/monitor/errors', function(req, res) {
  db.collection('monitor').find({type: 'error'}).toArray(function(err, docs) {
    var messages = docs.map(doc => doc.data.message);
    var urls = docs.map(doc => doc.data.url);
    var lines = docs.map(doc => doc.data.line);
    // 对 error 相关数据进行分析和统计...
  });
});


5.报警机制：根据业务需求和监控指标，实现异常检测和报警机制，例如：
// 在监控服务器中，实现错误报警机制
app.get('/monitor/alerts/errors', function(req, res) {
  db.collection('monitor').find({type: 'error'}).toArray(function(err, docs) {
    var count = docs.length;
    if (count > 10) {
      sendAlertEmail('错误数量超过阈值：' + count);
    }
    res.send('OK');
  });
});

function sendAlertEmail(message) {
  // 发送邮件通知开发人员或运维人员
  // ...
}