前端监控方案

• 前端监控方案
  • 页面埋点
    • 前端页面埋点的实现方案示例
  • 性能监控
    • 使用Performance API来实现性能监控示例
  • 异常监控
    • 前端实现异常监控步骤
    • 使用Sentry来实现前端异常监控

前端监控方案

在前端开发中，监控方案是非常重要的一环，可以帮助开发团队及时发现和解决问题，提升用户体验。

前端监控⼀般分为三种，分别为：

• 页面埋点
• 性能监控
• 异常监控

这些监控相关的内容，但是基本不会涉及到代码， 只是让大家了解下前端监控该用什么方式实现。

毕竟大部分公司都只是使用到了第三方的监控⼯具， 而不是选择自⼰造轮⼦。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

页面埋点

前端页面埋点是一种用于收集和分析用户行为数据的技术手段，通过在网页中插入代码来跟踪用户在页面上的点击、浏览、交互等操作。

页面埋点⼀般起码会监控以下⼏个数据：

• PV / UV
• 停留时长
• 流量来源
• 用户交互

对于这⼏类统计，⼀ 般的实现思路大致可以分为两种，分别为：

• 手写埋点
• 无埋点

的方式。

第⼀种方式也是大家最常用的方式， 可以自主选择需要监控的数据然后在相应的地方写⼊代码。这种方式的灵活性很大，但是唯⼀的缺点就是⼯作量较大，每个需要监控的地方都得插
⼊代码。

另⼀种无埋点的方式基本不需要开发者手写埋点了， 而是统计所有的事件并且定时上报 。这种方式虽然没有前⼀种方式繁琐了，但是因为统计的是所有事件，所以还需要后期过滤出需要的数据。

前端页面埋点的实现方案示例

下面是一个简单的前端页面埋点的实现方案示例：

1. 定义埋点事件：首先，确定需要追踪的用户行为事件，例如点击按钮、提交表单、页面滚动等。每个事件都应该有一个唯一的标识符，以便后续进行数据分析和报告生成。

2. 插入埋点代码：在需要追踪的用户行为事件处插入埋点代码。这可以是JavaScript代码片段，通过添加事件监听器或修改元素属性来捕获用户行为并触发埋点事件。例如，当用户点击一个按钮时，可以在按钮的点击事件处理函数中调用埋点函数，并传递相应的事件标识符。

3. 数据采集与发送：在埋点函数中，收集相关的数据信息，如页面URL、时间戳、用户ID等，并将数据发送到后端服务器或第三方数据分析工具。数据可以以JSON格式进行组织和传输。

4. 数据分析和可视化：后端服务器或第三方数据分析工具接收到前端发送的埋点数据后，进行数据处理、分析和可视化展示。这些工具可以帮助你深入了解用户行为、优化页面设计和改进产品功能。

下面是一个示例代码，用于在按钮点击时触发埋点事件：

// 定义埋点事件标识符
const BUTTON_CLICK_EVENT = 'button_click';

// 埋点函数
function trackEvent(eventId, eventData) {
  // 发送埋点数据到后端服务器或第三方数据分析工具
  const data = {
    event_id: eventId,
    event_data: eventData,
    timestamp: Date.now(),
    page_url: window.location.href,
    user_id: '123456'
    // 其他自定义字段
  };
  
  // 发送数据的逻辑，可以使用Ajax请求或其他方式发送数据到后端
  // ...
}

// 绑定按钮点击事件
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  // 触发埋点事件
  trackEvent(BUTTON_CLICK_EVENT, { button_text: button.innerText });
});

上述代码中，当页面中id为myButton的按钮被点击时，会调用trackEvent函数，并传递按钮文本作为事件数据。

trackEvent函数会收集相关的数据信息，并将事件标识符、事件数据等发送到后端服务器或第三方数据分析工具进行处理和分析。

上述示例只是一个简单的前端页面埋点实现方案，实际应用中可能需要根据具体需求和技术栈进行相应的改进和调整。

性能监控

性能监控可以很好的帮助开发者了解在各种真实环境下， 页面的性能情况是如何的。

对于性能监控来说， 我们可以直接使用浏览器自带的Performance API 来实现这个功能。

浏览器自带的Performance API，可以获取关于网页加载、网络请求、资源性能等方面的详细性能数据。

对于性能监控来说， 其实我们只需要调用
performance.getEntriesByType(‘navigation’) 这⾏代码就⾏了 。

对，你没看错，⼀⾏代码我们就可以获得页面中各种详细的性能相关信息

我们可以发现这⾏代码返回了⼀个数组， 内部包含了相当多的信息，从数据开始在网络中传输到页面加载完成都提供了相应的数据

使用Performance API来实现性能监控示例

下面是一个示例，演示如何使用Performance API来实现性能监控：

// 监听页面加载完成事件
window.addEventListener('load', function() {
  // 获取 Performance 对象
  const performance = window.performance;

  // 获取导航时间信息
  const navigationTiming = performance.getEntriesByType('navigation')[0];
  console.log('页面加载时间：', navigationTiming.loadEventEnd - navigationTiming.navigationStart, 'ms');

  // 获取资源性能信息
  const resourceTimings = performance.getEntriesByType('resource');
  resourceTimings.forEach(function(resource) {
    console.log('资源名称：', resource.name);
    console.log('资源类型：', resource.initiatorType);
    console.log('DNS解析耗时：', resource.domainLookupEnd - resource.domainLookupStart, 'ms');
    console.log('TCP连接耗时：', resource.connectEnd - resource.connectStart, 'ms');
    console.log('SSL握手耗时：', resource.secureConnectionStart > 0 ? resource.connectEnd - resource.secureConnectionStart : 0, 'ms');
    console.log('请求响应耗时：', resource.responseEnd - resource.requestStart, 'ms');
  });

  // 获取用户操作性能信息
  const paintTimings = performance.getEntriesByType('paint');
  paintTimings.forEach(function(paint) {
    console.log('用户可见渲染耗时：', paint.endTime - paint.startTime, 'ms');
  });

  // 其他性能指标...
});

上述代码中，我们通过监听页面的load事件来确保页面已经加载完毕。

然后，使用window.performance获取Performance对象。通过调用performance.getEntriesByType()方法，并传入相应的指标类型，可以获取到相关的性能数据。

在示例中，我们获取了导航时间信息，包括页面加载时间。然后，通过调用performance.getEntriesByType(‘resource’)获取所有资源的性能信息，如DNS解析耗时、TCP连接耗时等。最后，通过调用performance.getEntriesByType(‘paint’)获取用户可见渲染的耗时信息。

除了上述示例中的指标，Performance API还提供了其他性能指标的获取方法，例如performance.timing属性可以获取更详细的页面加载过程中各个环节的时间信息。

请注意，不同浏览器对Performance API的支持可能会有所差异，可以通过判断window.performance是否存在来进行兼容性处理。

此外，由于Performance API返回的数据是浏览器内部统计的性能数据，可能因为不同环境和网络条件的影响而有所差异，因此需要在实际应用中进行综合考虑和分析。

异常监控

对于异常监控来说， 以下两种监控是必不可少的，分别是:

• 代码报错
• 接⼝异常上报 。

对于代码运⾏错误， 通常的办法是使用 window.onerror 拦截报错。该⽅法能拦截到大部分的详细报错信息，但是也有例外

对于跨域的代码运⾏错误会显示 Script error . 对于这种情况我们需要给 script 标签添加 crossorigin 属性

对于某些浏览器可能不会显示调用栈信息， 这种情况可以通过
arguments.callee.caller 来做栈递归

对于异步代码来说， 可以使用 catch 的⽅式捕获错误。比如
Promise 可以直接使用 catch 函数， async await 可以使用 try catch

但是要注意线上运⾏的代码都是压缩过的， 需要在打包时生成
sourceMap ⽂件便于 debug

对于捕获的错误需要上传给服务器， 通常可以通过 img 标签的 src 发起⼀个请求 。

另外接⼝异常就相对来说简单了， 可以列举出出错的状态码 。⼀旦出现此类的状态码就可以立即上报出错 。

接⼝异常上报可以让开发⼈员迅速知道有哪些接⼝出现了大面积的报错， 以便迅速修复问题。

前端实现异常监控步骤

前端实现异常监控可以通过以下步骤：

1. 引入监控工具：选择合适的监控工具，如Sentry、Bugsnag等，并按照其官方文档引入到项目中。

2. 捕获全局异常：在JavaScript中，可以使用window.onerror方法来捕获全局的未捕获异常。通过重写这个方法，将异常信息发送给监控工具进行处理。

window.onerror = function(message, source, lineno, colno, error) {
  // 将异常信息发送给监控工具
};

3. 捕获异步异常：对于通过异步请求获取的数据或执行的操作，需要额外进行异常捕获。比如，在Promise中添加catch方法来捕获异常。

fetch('api/data')
  .then(response => response.json())
  .catch(error => {
    // 将异常信息发送给监控工具
  });

4. 监控错误上报：将捕获到的异常信息发送给监控工具进行上报，以便后续分析和排查问题。根据监控工具的不同，可以调用相应的API来发送错误信息。

// 使用 Sentry 进行异常上报
Sentry.captureException(error);

5. 监控错误信息分析：登录监控工具的控制台，查看上报的错误信息和相关数据，进行分析和排查问题。

异常监控只是帮助我们及时发现和定位问题，但并不能解决问题。

在实际开发中，需要结合日志记录、调试工具等多种手段来进行错误排查和修复。

使用Sentry来实现前端异常监控

当前端应用程序发生异常时，我们可以通过实现异常监控来捕获并记录这些异常信息。

以下是一个示例，演示如何使用Sentry来实现前端异常监控：

1. 首先，安装Sentry依赖包。可以使用npm或者yarn进行安装。

npm install @sentry/browser

2. 在项目中引入Sentry并进行初始化。

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: 'YOUR_SENTRY_DSN',
});

3. 在全局错误处理函数window.onerror中，将异常信息发送给Sentry。

window.onerror = function(message, source, lineno, colno, error) {
  Sentry.captureException(error);
};

4. 在异步操作中捕获异常，并发送给Sentry。

fetch('api/data')
  .then(response => response.json())
  .catch(error => {
    Sentry.captureException(error);
  });

通过以上步骤，当应用程序发生异常时，异常信息将被捕获并发送给Sentry进行记录和分析。

您可以登录到Sentry的控制台中查看详细的异常报告、堆栈跟踪等信息，以便进行错误排查和修复。

请注意，在使用Sentry之前，您需要在Sentry官网上注册一个账号，并创建一个项目以获取DSN（Data Source Name），用于初始化Sentry。