完整示例：ShoeHub 前端应用

欢迎回到第 10 章的学习。在上一节，我们学习了性能监控。现在我们要通过完整示例：ShoeHub 前端应用，整合前面学习的所有知识。

本节将学习：首页追踪、商品列表追踪、购物车追踪、订单流程追踪、以及错误处理。

首页追踪

首页追踪的作用是什么？ 追踪用户访问首页的行为，了解首页性能，优化首页体验。

首页追踪包括哪些呢？

第一个：页面加载追踪。 追踪首页加载时间，包括 DOM 加载、资源加载等。

第二个：用户交互追踪。 追踪用户在首页的点击行为，包括商品点击、分类点击等。

第三个：Core Web Vitals 监控。 监控首页的 LCP、FID、CLS 指标。

第四个：性能监控。 监控首页的组件渲染时间、内存使用等。

首页追踪代码：

文件路径：

src/pages/Home.js

import { useEffect } from 'react';
import { trace } from '@opentelemetry/api';
import { onLCP, onFID, onCLS } from 'web-vitals';
import { trackPageLoadTime } from '../utils/performance';

const tracer = trace.getTracer('home-page');

function Home() {
  useEffect(() => {
    // Page load tracking
    const pageLoadMetrics = trackPageLoadTime();
    const span = tracer.startSpan('home.page_load', {
      attributes: pageLoadMetrics,
    });
    span.end();
    
    // Core Web Vitals surveillance
    onLCP((metric) => {
      tracer.startSpan('home.lcp', {
        attributes: {
          'web.vital.name': metric.name,
          'web.vital.value': metric.value,
        },
      }).end();
    });
    
    onFID((metric) => {
      tracer.startSpan('home.fid', {
        attributes: {
          'web.vital.name': metric.name,
          'web.vital.value': metric.value,
        },
      }).end();
    });
    
    onCLS((metric) => {
      tracer.startSpan('home.cls', {
        attributes: {
          'web.vital.name': metric.name,
          'web.vital.value': metric.value,
        },
      }).end();
    });
  }, []);
  
  const handleProductClick = (productId) => {
    tracer.startSpan('home.product_click', {
      attributes: {
        'product.id': productId,
        'event.type': 'product_click',
      },
    }).end();
  };
  
  return (
    // Home page content
  );
}

商品列表追踪

商品列表追踪的作用是什么？ 追踪用户浏览商品列表的行为，了解商品浏览模式，优化商品展示。

商品列表追踪包括哪些呢？

第一个：商品浏览追踪。 追踪用户浏览的商品，记录商品ID、商品名称等。

第二个：商品点击追踪。 追踪用户点击的商品，记录点击的商品信息。

第三个：筛选和搜索追踪。 追踪用户的筛选和搜索行为，记录搜索关键词、筛选条件等。

第四个：列表加载性能。 追踪商品列表的加载时间，识别性能问题。

商品列表追踪代码：

文件路径：

src/pages/Products.js

import { useEffect } from 'react';
import { trace } from '@opentelemetry/api';

const tracer = trace.getTracer('products-page');

function Products({ searchQuery, filters }) {
  useEffect(() => {
    // Product browsing tracking
    const span = tracer.startSpan('products.view', {
      attributes: {
        'products.search_query': searchQuery,
        'products.filters': JSON.stringify(filters),
        'event.type': 'products_view',
      },
    });
    span.end();
  }, [searchQuery, filters]);
  
  const handleProductClick = (productId) => {
    tracer.startSpan('products.product_click', {
      attributes: {
        'product.id': productId,
        'event.type': 'product_click',
      },
    }).end();
  };
  
  return (
    // Product list content
  );
}

购物车追踪

购物车追踪的作用是什么？ 追踪用户的购物车操作，了解购物车使用情况，优化购物车体验。

购物车追踪包括哪些呢？

第一个：添加商品追踪。 追踪用户添加商品到购物车的操作。

第二个：移除商品追踪。 追踪用户从购物车移除商品的操作。

第三个：更新数量追踪。 追踪用户更新商品数量的操作。

第四个：购物车性能。 追踪购物车操作的性能。

购物车追踪代码：

文件路径：

src/components/Cart.js

import { trace } from '@opentelemetry/api';

const tracer = trace.getTracer('cart');

export function useCartTracking() {
  const trackAddToCart = (productId, quantity, price) => {
    const span = tracer.startSpan('cart.add', {
      attributes: {
        'product.id': productId,
        'cart.quantity': quantity,
        'cart.price': price,
        'event.type': 'add_to_cart',
      },
    });
    span.end();
  };
  
  const trackRemoveFromCart = (productId) => {
    const span = tracer.startSpan('cart.remove', {
      attributes: {
        'product.id': productId,
        'event.type': 'remove_from_cart',
      },
    });
    span.end();
  };
  
  const trackUpdateQuantity = (productId, quantity) => {
    const span = tracer.startSpan('cart.update', {
      attributes: {
        'product.id': productId,
        'cart.quantity': quantity,
        'event.type': 'update_quantity',
      },
    });
    span.end();
  };
  
  return {
    trackAddToCart,
    trackRemoveFromCart,
    trackUpdateQuantity,
  };
}

订单流程追踪

订单流程追踪的作用是什么？ 追踪用户从加购到支付的完整流程，识别转化瓶颈，优化转化率。

订单流程包括哪些阶段呢？

第一阶段：加购。 用户添加商品到购物车。

第二阶段：结算。 用户进入结算页面。

第三阶段：支付。 用户完成支付。

第四阶段：订单确认。 用户确认订单。

如何追踪订单流程？ 在每个阶段创建自定义 Span，记录转化事件，分析转化率。

订单流程追踪代码：

文件路径：

src/utils/orderTracking.js

import { trace } from '@opentelemetry/api';

const tracer = trace.getTracer('order-flow');

export function trackOrderStage(stage, data) {
  const span = tracer.startSpan(`order.${stage}`, {
    attributes: {
      'order.stage': stage,
      'order.data': JSON.stringify(data),
      'event.type': 'order_flow',
    },
  });
  
  span.end();
}

// Examples of use
trackOrderStage('add_to_cart', { productId: '123', quantity: 2 });
trackOrderStage('checkout', { cartValue: 199.99 });
trackOrderStage('payment', { orderId: '456', amount: 199.99 });
trackOrderStage('confirm', { orderId: '456' });

错误处理

错误处理的作用是什么？ 捕获和处理前端错误，记录错误信息，帮助快速定位和修复问题。

错误处理包括哪些呢？

第一个：JavaScript 错误。 捕获运行时错误。

第二个：API 错误。 捕获 API 调用错误。

第三个：资源加载错误。 捕获资源加载失败。

第四个：错误报告。 将错误信息发送到 OpenTelemetry。

错误处理代码：

文件路径：

src/utils/errorHandler.js

import { trace } from '@opentelemetry/api';

const tracer = trace.getTracer('error-handler');

export function setupErrorHandling() {
  // JavaScript wrongs
  window.addEventListener('error', (event) => {
    const span = tracer.startSpan('error.javascript', {
      attributes: {
        'error.message': event.message,
        'error.filename': event.filename,
        'error.lineno': event.lineno,
        'error.colno': event.colno,
      },
    });
    span.end();
  });
  
  // Promise repudiation
  window.addEventListener('unhandledrejection', (event) => {
    const span = tracer.startSpan('error.promise_rejection', {
      attributes: {
        'error.reason': event.reason,
      },
    });
    span.end();
  });
  
  // Resource loading error
  window.addEventListener('error', (event) => {
    if (event.target !== window) {
      const span = tracer.startSpan('error.resource_load', {
        attributes: {
          'error.resource_url': event.target.src || event.target.href,
          'error.resource_type': event.target.tagName,
        },
      });
      span.end();
    }
  }, true);
}

本节小结

在本节中，我们学习了完整示例：ShoeHub 前端应用：

第一个是首页追踪。 追踪用户访问首页的行为，了解首页性能，优化首页体验。

第二个是商品列表追踪。 追踪用户浏览商品列表的行为，了解商品浏览模式，优化商品展示。

第三个是购物车追踪。 追踪用户的购物车操作，了解购物车使用情况，优化购物车体验。

第四个是订单流程追踪。 追踪用户从加购到支付的完整流程，识别转化瓶颈，优化转化率。

第五个是错误处理。 捕获和处理前端错误，记录错误信息，帮助快速定位和修复问题。

这就是完整示例：ShoeHub 前端应用。完整示例整合了所有前面学习的知识，实现了完整的前端可观察性。

在下一节，我们将学习前端最佳实践。学习如何优化前端可观察性系统。