笔记 | ZiMing の宝藏之地

前端实现埋点&监控通过这篇文章你可以学习到：前端埋点&监控、区分js模块化、打包工具rollup、API之History - 掘金

方案

神策skd埋点

https://manual.sensorsdata.cn/sa/latest/zh_cn/tech_sdk_client_web_use-7545024.html

常见埋点方法*

前端埋点数据上报是前端性能监控和用户行为分析的重要组成部分，常见的几种前端埋点数据上报方案包括：

图片请求（Image Beacon）：通过创建一个Image对象，将要上报的数据作为URL参数拼接到一个1x1像素的透明图片URL中，发送GET请求来上报数据。这种方式简单易用，可以跨域上报，但只能发送GET请求，且无法获取响应结果。
Ajax(XMLHttpRequest或Fetch API)：使用这些API发送异步请求来上报数据，支持GET和POST方法，可以获取响应结果。但需要处理请求和响应的逻辑，且可能需要处理跨域问题。
Navigator.sendBeacon()：此方法允许在页面卸载时异步发送数据，适用于页面关闭时的数据上报。它异步工作，不会影响页面卸载速度，且不受同域限制。
WebSocket：通过WebSocket与服务器建立持久连接，进行实时数据上报。这种方式实时性好，适合大规模数据上报，但实现较为复杂。
手动埋点/代码埋点：通过编写代码在关键用户交互点添加事件监听器，然后发送数据到服务器。这种方式可以精确控制哪些事件被追踪，但需要较多的开发工作量，且容易出错。
无痕埋点/全埋点：使用第三方服务或封装的SDK，自动收集所有用户行为数据。这种方式减少了开发工作量，但可能会产生大量无用数据，且不够灵活。
可视化埋点：通过可视化界面选择需要追踪的元素，自动生成埋点代码。这种方式简化了开发流程，但可能不支持所有控件或自定义事件。
使用第三方统计工具：如Google Analytics、百度统计等，这些工具提供了一整套的解决方案，包括SDK和后台分析平台。
自定义接口：根据业务需求自行设计接口进行数据上报，这种方式灵活，但需要额外开发和维护接口。
使用GIF上报：许多系统使用1x1像素的透明GIF图片进行数据上报，因为GIF体积小，可以节约流量，且通过图片src属性可以避免跨域问题。

每种方案都有其适用场景和优缺点，开发者可以根据项目需求和实际情况选择合适的上报方式。

埋点案例*

以下是前端埋点数据上报的几种常见方案的案例代码实现：

图片请求（Image Beacon）图片可以为1×1的透明图片

function imageBeacon(data) {
    const queryString = new URLSearchParams(data).toString();
    const img = new Image();
    img.src = `/path/to/your/beacon.gif?${queryString}`;
}
// 使用
imageBeacon({
    event: 'click',
    elementId: 'submit-button',
    // 其他需要上报的数据
});

Ajax(XMLHttpRequest或Fetch API)

使用 XMLHttpRequest

function ajaxBeacon(data) {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/path/to/your/endpoint');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify(data));
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            console.log('Data uploaded successfully.');
        }
    };
}
// 使用
ajaxBeacon({
    event: 'click',
    elementId: 'submit-button',
    // 其他需要上报的数据
});

使用 Fetch API

function fetchBeacon(data) {
    fetch('/path/to/your/endpoint', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => console.log('Data uploaded successfully:', data))
    .catch(error => console.error('Error uploading data:', error));
}
// 使用
fetchBeacon({
    event: 'click',
    elementId: 'submit-button',
    // 其他需要上报的数据
});

axios

使用 axios 实现前端埋点，你可以封装一个函数来发送埋点数据。以下是一个基本的实现示例：

function sendBuryPoint(data) {
  axios.post('/burying-point', data)
    .then(response => {
      // 处理成功的响应
      console.log('Bury point sent successfully:', response);
    })
    .catch(error => {
      // 处理错误情况
      console.error('Error sending bury point:', error);
    });
}

// 使用示例
const buryPointData = {
  eventType: 'buttonClick',
  eventData: {
    buttonId: 'submitBtn',
    // 其他需要记录的数据
  }
};

sendBuryPoint(buryPointData);

在这个示例中，/burying-point 是后端接收埋点数据的接口地址。data 对象包含了事件类型和相关的数据。使用 axios.post 方法将数据发送到服务器，并通过 Promise 处理成功或失败的响应。

如果需要处理跨域问题，可以在后端配置 CORS 策略，确保服务器响应包含正确的 Access-Control-Allow-Origin 头，允许前端应用所在的域名进行跨域请求。例如，在 Node.js 和 Express 后端中，可以使用 cors 中间件来配置跨域资源共享。

此外，对于页面卸载时的埋点上报，可以使用 navigator.sendBeacon 方法，它允许在页面卸载时发送少量数据，且不会影响页面的卸载速度。这种方法是非阻塞的，可以在后台发送数据，适用于发送统计数据到服务器的场景。

在实际应用中，根据具体需求选择合适的埋点上报方式，并确保数据的安全性和隐私保护。例如，敏感数据应该进行加密处理，避免在上报的数据中直接暴露。同时，遵守数据保护法规和用户隐私政策，合理收集和使用用户行为数据。

Navigator.sendBeacon()

function sendBeacon(data) {
    const url = '/path/to/your/endpoint';
    if (navigator.sendBeacon) {
        navigator.sendBeacon(url, JSON.stringify(data));
    } else {
        console.error('sendBeacon is not supported in this browser.');
    }
}
// 使用
sendBeacon({
    event: 'page-unload',
    // 其他需要在页面卸载时上报的数据
});

WebSocket

function webSocketBeacon(data) {
    const socket = new WebSocket('wss://your-websocket-url');
    socket.onopen = function(event) {
        socket.send(JSON.stringify(data));
        console.log('Data sent via WebSocket:', data);
    };
    socket.onerror = function(error) {
        console.error('WebSocket error:', error);
    };
}
// 使用
webSocketBeacon({
    event: 'click',
    elementId: 'submit-button',
    // 其他需要实时上报的数据
});

请注意，这些示例代码提供了基本的数据上报实现。在实际应用中，您可能需要添加额外的逻辑来处理错误、验证数据完整性、处理跨域问题等。此外，确保您的服务器端点已正确设置以接收和处理这些请求。

前端埋点数据上报的四种常见方案：

基于Ajax的埋点上报，

基于image的埋点上报，

基于navigate的埋点上报，

以及基于web socket的埋点上报。

每种方案都有其优缺点，需要根据具体需求进行选择。同时，视使用内置方案和send beacon方案来实现前端买点数据上报的方法。

前端埋点数据上报的四种常见方案：拓展

以下是前端埋点数据上报的四种常见方案的具体应用例子和代码实现：

基于Ajax的埋点上报: 使用Ajax进行数据上报通常涉及到创建一个XMLHttpRequest对象，然后通过这个对象发送数据到服务器。例如，封装一个函数用于发送Ajax请求进行埋点上报：

function buryingPointAjax(data) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("post", '/buryingPoint', true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify(data));
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
  });
}
// 使用时，直接调用该函数并传入需要上报的数据
buryingPointAjax({ event: "click", data: "example" });

基于Image的埋点上报: 使用Image对象发送GET请求进行数据上报。创建一个Image对象，并设置其src属性为带有数据参数的URL，从而触发数据上报：

const data = { event: "click", element: "button" };
const url = `https://example.com/track?${new URLSearchParams(data)}`;
const img = new Image();
img.src = url;

基于Navigator.sendBeacon的埋点上报: navigator.sendBeacon()方法允许在页面卸载时发送数据，适用于页面关闭时的最后数据上报：

function sendBeaconOnUnload(url, data) {
  const dataStr = JSON.stringify(data);
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, dataStr);
  } else {
    console.error("sendBeacon is not supported");
  }
}
// 例如在页面卸载时发送数据
window.addEventListener("beforeunload", () => {
  sendBeaconOnUnload("https://example.com/unload", { event: "unload" });
});

基于WebSocket的埋点上报: 使用WebSocket进行实时数据上报，适用于需要高实时性的场景：

const socket = new WebSocket("wss://example.com/track");
socket.onopen = () => {
  const data = { event: "click", element: "button" };
  socket.send(JSON.stringify(data));
};
socket.onerror = (error) => {
  console.error("WebSocket error", error);
};