前端最佳实践

欢迎回到第 10 章的学习。在上一节，我们学习了完整示例。现在我们要学习前端最佳实践，这是优化前端可观察性系统的重要指南。

本节将学习：采样策略、隐私保护、性能影响、以及用户体验。

采样策略

采样策略的作用是什么？ 在保证可观察性的同时，减少数据量和成本，降低 Collector 负载，提高系统性能。

前端采样策略有哪些呢？

第一种：固定采样率。 配置固定的采样率，比如 10%，所有请求按照这个比例采样。

第二种：基于会话的采样。 每个会话独立采样，确保会话内的一致性。

第三种：基于错误的采样。 错误请求 100% 采样，正常请求按比例采样。

第四种：基于性能的采样。 慢请求 100% 采样，正常请求按比例采样。

如何配置采样策略？ 在 OpenTelemetry SDK 配置中设置采样率，根据实际需求调整。

采样策略配置代码：

import { TraceIdRatioBasedSampler } from '@opentelemetry/sdk-trace-base';

// fixed sampling rate（10%）
const sampler = new TraceIdRatioBasedSampler(0.1);

// Or use a custom sampler
const customSampler = {
  shouldSample(context, traceId, spanName, spanKind, attributes, links) {
    // Bad request 100% sampling
    if (attributes['error'] === true) {
      return { decision: SamplingDecision.RECORD_AND_SAMPLE };
    }
    
    // slow request 100% sampling
    if (attributes['duration'] > 1000) {
      return { decision: SamplingDecision.RECORD_AND_SAMPLE };
    }
    
    // Normal request 10% sampling
    return traceId.hashCode() % 100 < 10
      ? { decision: SamplingDecision.RECORD_AND_SAMPLE }
      : { decision: SamplingDecision.NOT_RECORD };
  },
};

隐私保护

隐私保护的作用是什么？ 保护用户隐私，符合隐私法规要求，避免收集敏感信息。

隐私保护措施包括哪些呢？

第一个：数据脱敏。 对敏感信息进行脱敏处理，如邮箱、电话号码等。

第二个：数据过滤。 过滤不需要追踪的数据，如密码、信用卡号等。

第三个：用户同意。 获取用户同意后再收集数据，遵守 GDPR、CCPA 等法规。

第四个：数据保留。 设置数据保留期限，定期清理过期数据。

隐私保护代码：

// Data masking
function sanitizeData(data) {
  const sensitiveFields = ['email', 'phone', 'creditCard', 'password'];
  
  return Object.keys(data).reduce((acc, key) => {
    if (sensitiveFields.includes(key)) {
      acc[key] = '[REDACTED]';
    } else {
      acc[key] = data[key];
    }
    return acc;
  }, {});
}

// data filtering
function filterAttributes(attributes) {
  const filtered = {};
  const allowedFields = ['product.id', 'product.name', 'event.type'];
  
  Object.keys(attributes).forEach(key => {
    if (allowedFields.includes(key)) {
      filtered[key] = attributes[key];
    }
  });
  
  return filtered;
}

// User consent check
function shouldCollectData() {
  return localStorage.getItem('telemetry_consent') === 'true';
}

性能影响

性能影响的作用是什么？ 确保可观察性系统不会影响应用性能，提供良好的用户体验。

如何减少性能影响？ 使用异步导出、批处理、采样策略、代码优化等方法。

性能优化措施包括哪些呢？

第一个：异步导出。 使用异步导出，避免阻塞主线程。

第二个：批处理。 批量发送数据，减少网络请求。

第三个：采样策略。 使用采样策略，减少数据量。

第四个：代码优化。 优化追踪代码，减少性能开销。

性能优化代码：

// Asynchronous export configuration
const sdk = new WebSDK({
  traceExporter: new OTLPTraceExporter({
    url: 'http://localhost:4318/v1/traces',
  }),
  // batch processing configuration
  batchSpanProcessor: new BatchSpanProcessor(exporter, {
    maxQueueSize: 2048,
    maxExportBatchSize: 512,
    scheduledDelayMillis: 5000,
  }),
});

// utilized Web Worker Processing tracking
const worker = new Worker('/telemetry-worker.js');
worker.postMessage({ type: 'span', data: spanData });

用户体验

用户体验的作用是什么？ 确保可观察性系统不会影响用户体验，提供流畅的交互。

用户体验考虑包括哪些呢？

第一个：加载性能。 可观察性系统不应影响页面加载速度。

第二个：交互响应性。 可观察性系统不应影响用户交互响应时间。

第三个：错误处理。 错误不应影响用户使用应用。

第四个：资源使用。 可观察性系统不应占用过多资源。

如何优化用户体验？ 使用懒加载、代码分割、资源优化等方法。

用户体验优化代码：

// Lazy loading OpenTelemetry
async function initializeTelemetry() {
  if (shouldCollectData()) {
    const { WebSDK } = await import('@opentelemetry/sdk-web');
    // initialized SDK
  }
}

// Delayed initialization
window.addEventListener('load', () => {
  setTimeout(() => {
    initializeTelemetry();
  }, 1000); // postponements1Initialize in seconds
});

本节小结

在本节中，我们学习了前端最佳实践：

第一个是采样策略。 在保证可观察性的同时，减少数据量和成本，优化系统性能。

第二个是隐私保护。 保护用户隐私，符合隐私法规要求，避免收集敏感信息。

第三个是性能影响。 确保可观察性系统不会影响应用性能，提供良好的用户体验。

第四个是用户体验。 确保可观察性系统不会影响用户体验，提供流畅的交互。

前端最佳实践流程： 配置采样策略 → 实施隐私保护 → 优化性能影响 → 提升用户体验 → 稳定运行。

这就是前端最佳实践。通过前端最佳实践，我们可以在生产环境中稳定运行前端可观察性系统。

恭喜你完成了第 10 章的学习！在下一章，我们将学习数据库监控和追踪。学习如何监控数据库性能。