不可不知的前端工程化—— 埋点&监控

我正在参加「掘金·启航计划」

背景

前端埋点和监控的出现，可以帮助开发者和产品运营人员，收集用户的行为数据，分析用户的行为习惯，实时监控应用的性能，发现和解决问题，处理系统故障。通过实施有效的埋点和监控策略，不断地进行产品优化，提出更好的营销策略，以提升用户体验和产品价值。

埋点

埋点是一种数据采集技术，主要用于收集用户在Web应用或移动应用中的行为数据。通过在代码中插入特定的监控代码（也称为“埋点代码”），可以在用户触发特定事件（如点击按钮、浏览页面等）时捕获相关信息，并将这些信息发送到数据分析平台进行存储和分析。埋点可以帮助开发者、产品经理和运营团队了解用户在使用应用过程中的操作习惯和需求，为产品优化、营销策略和用户体验改进提供依据。

国内流行的埋点工具

TalkingData：移动数据分析平台，提供了用户画像、行为分析、漏斗分析等功能

腾讯移动分析（MTA)：腾讯推出的移动应用分析工具，提供了用户行为分析、事件追踪、渠道效果分析等功能。

阿里云 ARMS：阿里云提供的应用性能监控服务，提供了性能埋点、错误监控、资源优化等功能。

腾讯云TA（腾讯分析）：腾讯云推出的数据分析工具，提供了用户行为分析、事件追踪、渠道效果分析等功能。

诸葛IO：是一个用户行为分析平台，提供了事件追踪、漏斗分析、留存分析等功能。

监控

监控可以实时收集关于实时了解应用的性能表现，如页面加载速度、响应时间等。这些数据可以为性能优化提供依据，帮助开发者找到性能瓶颈并进行优化，还可以帮助开发者及时发现应用中的错误和异常，通过对监控数据的分析，开发者可以定位问题原因，快速解决问题，降低故障对用户体验的影响。

流行的监控工具

Sentry：一个开源的前端错误监控工具，可以捕获和报告 JavaScript 和前端框架的错误和异常。它提供详细的错误信息和堆栈跟踪，帮助开发人员快速定位和解决问题。

Google Analytics（谷歌分析）：非常流行的网站统计和分析工具，提供了丰富的功能，如用户行为分析、性能监控、事件追踪等。

Lighthouse：由 Google 提供的开源网站性能分析工具，可以评估页面的性能、可访问性、SEO 等方面。

WebPageTest：这是一个在线的网站性能测试工具，可以测试页面加载速度、首屏渲染时间等性能指标。

具体场景案例实现

案例背景

假设我们正在开发一个电商网站，需要了解用户在网站中的行为，如浏览商品、添加到购物车、下单等。同时，还需要监控网站的性能，如页面加载速度、错误率等。为了实现这些目标，决定在网站中实现埋点和监控。

埋点实现

选择埋点工具：我们选择诸葛IO 作为埋点工具，因为它提供了丰富的数据分析和报告功能，同时支持自定义事件和属性。
初始化埋点工具：按诸葛IO 的文档，将跟踪代码添加到网站的 HTML 文件中。
触发埋点事件：
- 页面浏览：在每个商品页面的 JavaScript 代码中，添加页面浏览事件的埋点代码。传递相关属性，如商品ID、页面URL等。
- 添加购物车：在“添加到购物车”按钮的点击事件处理程序中，添加埋点代码。传递相关属性，如商品ID、用户ID等。
- 下单：在订单提交成功后，添加下单事件的埋点代码。传递相关属性，如订单ID、用户ID、订单金额等。

监控实现

选择监控工具：我们选择 Sentry 作为错误监控工具，因为它提供了详细的错误信息和堆栈跟踪，帮助我们快速定位和解决问题。
初始化监控工具：按照 Sentry 的文档，将其 JavaScript SDK 添加到网站的 HTML 文件中。
收集和分析监控数据：在 Sentry 的控制台中，查看收集到的错误数据。根据错误类型、发生频率等信息，优先解决关键性问题。

代码示例

以下是一个基于 Vue 的电商网站案例，演示如何使用 诸葛IO 进行埋点和Sentry进行错误监控。

1. 安装依赖：

首先，安装诸葛IO 和 Sentry 的 JavaScript SDK。

npm install @sentry/vue @sentry/tracing
npm install zhugeio

2. 初始化诸葛IO 和 Sentry：

在项目的入口文件（例如：main.js）中，初始化 诸葛IO 和Sentry。

    import Vue from 'vue';
    import App from './App.vue';
    import * as Sentry from '@sentry/vue';
    import { Integrations } from '@sentry/tracing';
    import zhugeio from 'zhugeio';

    
    // 初始化 Sentry
    Sentry.init({
      Vue,
      dsn: '<YOUR_SENTRY_DSN>',
      integrations: [new Integrations.BrowserTracing()],
      tracesSampleRate: 1.0,
    });
   
    // 初始化 诸葛IO 详细属性可参考诸葛IO的官方文档
    Vue.prototype.$zhuge.load('<YOUR_APPKEY>');

    new Vue({
      render: (h) => h(App),
    }).$mount('#app');

3. 页面浏览埋点：

在商品页面组件（例如：ProductPage.vue）的 mounted 生命周期钩子中，触发页面浏览事件。

    export default {
      mounted() {
            // 页面浏览埋点
            this.$zhuge.track('page_view', {
              page: 'ProductPage',
              productId: this.productId,
            });
      },

      // ...
    };

4. 添加购物车埋点：

在“添加到购物车”按钮的点击事件处理程序中，触发添加购物车事件。

methods: {
 handleAddToCart() {
       // 添加购物车埋点
       this.$zhuge.track('add_to_cart', {
         productId: this.productId,
         userId: this.userId,
       });

   // ...
 },
}

5. 下单埋点：

在订单提交成功后，触发下单事件。

methods: {
  handleSubmitOrder() {
    // 提交订单逻辑...

    // 下单埋点
    this.$zhuge.track('submit_order', {
          orderId: orderId,
          userId: this.userId,
          orderAmount: orderAmount,
        });
    },
}

6. 错误监控：

使用 Sentry 提供的 withScope 方法捕获和报告运行时错误。

import Vue from 'vue';
import * as Sentry from '@sentry/vue';

Vue.config.errorHandler = (error, vm, info) => {
  Sentry.withScope((scope) => {
    scope.setExtra('info', info);
    Sentry.captureException(error);
  });
};

参考文章

前端埋点实现方案✔ 主打小程序埋点实现案例
通过Vue自定义指令实现前端埋点

原文链接：https://juejin.cn/post/7247770501324996664 作者：前端碎碎念