前端错误与性能联合上报（Sentry + OpenTelemetry 与验证）

概述错误与性能联合上报可快速定位页面问题。Sentry捕获异常与用户上下文，OpenTelemetry采集链路与指标并导出到后端，形成统一分析能力。关键实践与参数错误捕获: 初始化Sentry与采集用户上下文链路采集: 初始化OTEL Web Tracer与OTLP导出指标: 采集LCP与交互耗时采样: 按流量配置采样比例示例/配置/实现<script src="https://browser.sentry-cdn.com/7.114.0/bundle.min.js" crossorigin="anonymous"></script>

Sentry.init({ dsn: "https://[email protected]/0", integrations: [new Sentry.BrowserTracing()], tracesSampleRate: 0.1 })

Sentry.setUser({ id: "u-1001", email: "[email protected]" })

import { WebTracerProvider } from "@opentelemetry/sdk-trace-web"

import { ConsoleSpanExporter, SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base"

import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http"

import { Resource } from "@opentelemetry/resources"

import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions"

const provider = new WebTracerProvider({ resource: new Resource({ [SemanticResourceAttributes.SERVICE_NAME]: "web-app" }) })

provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()))

provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter({ url: "https://otel.example.com/v1/traces" })))

provider.register()

const metrics = { lcp: null, interactions: [] }

new PerformanceObserver((list) => { for (const e of list.getEntries()) metrics.lcp = e.startTime }).observe({ type: "largest-contentful-paint", buffered: true })

window.addEventListener("click", () => { const t = performance.now(); setTimeout(() => { metrics.interactions.push(performance.now() - t) }, 0) })

验证错误捕获: 人为抛出异常被Sentry捕获并显示链路导出: 浏览器控制台与OTLP后端出现Span指标上报: LCP与交互耗时被记录与展示成本控制: 采样与导出频率在阈值内注意事项DSN与导出端点需安全管理采集需遵守隐私合规不同浏览器支持差异需适配与后端日志与指标联动分析