Skip to content

06-react-client.md

Latest commit

 

History

History
44 lines (32 loc) · 981 Bytes

06-react-client.md

File metadata and controls

44 lines (32 loc) · 981 Bytes
Raw

前端传播与埋点模式

TracingProvider

// 在 App 根组件包装
<TracingProvider serviceName="claude-traced-web" version="0.1.0">
  <App />
</TracingProvider>

tracedFetch

自动在 fetch 请求中注入 traceparent 头：

import { tracedFetch } from '@claude-traced/tracing-react';

const response = await tracedFetch('/api/v1/chat', {
  method: 'POST',
  body: JSON.stringify({ message: 'Hello' }),
});

useTracer

在组件中创建 Span：

const { startActiveSpan } = useTracer();

startActiveSpan('ui.interaction:send_message', (span) => {
  // 用户操作
});

埋点模式

模式 API 用途
Provider + useTracer TracingProvider + useTracer() 组件内部 Span
tracedFetch tracedFetch() API 调用 Trace 传播
useActiveSpan useActiveSpan() 当前 Span 注解
createUiInteractionSpan createUiInteractionSpan() UI 交互埋点