OpenTelemetry Web配置：纯前端捕获控制台日志及异常至Otel Collector

完全可行，OpenTelemetry JS的Web生态支持通过专用Instrumentation包自动捕获前端控制台日志（含各级别日志与异常），并发送至Otel Collector，纯HTML/JS/CSS环境即可实现，无需后端参与。

核心依赖包 #

推荐通过CDN直接引入以下包（无需构建工具）：

• @opentelemetry/api: OpenTelemetry核心API
• @opentelemetry/sdk-trace-web: Web端Trace SDK
• @opentelemetry/instrumentation-console: 控制台日志捕获工具
• @opentelemetry/instrumentation: Instrumentation核心工具
• @opentelemetry/exporter-trace-otlp-http: OTLP HTTP导出器（向Collector发送数据）
• @opentelemetry/resources: 资源配置模块
• @opentelemetry/semantic-conventions: 语义规范定义

完整配置示例 #

将以下脚本添加到HTML页面（建议放在所有业务脚本之前）：

<script src="https://cdn.jsdelivr.net/npm/@opentelemetry/api@1.7.0/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@opentelemetry/sdk-trace-web@1.19.0/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@opentelemetry/instrumentation@0.46.0/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@opentelemetry/instrumentation-console@0.35.0/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@opentelemetry/exporter-trace-otlp-http@0.46.0/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@opentelemetry/resources@1.19.0/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@opentelemetry/semantic-conventions@1.19.0/dist/index.min.js"></script>

<script>
  // 初始化资源标识
  const resource = new opentelemetry.resources.Resource({
    [opentelemetry.semanticConventions.SERVICE_NAME]: 'frontend-web-app',
    [opentelemetry.semanticConventions.SERVICE_VERSION]: '1.0.0'
  });

  // 创建Trace Provider
  const provider = new opentelemetry.trace.WebTracerProvider({ resource });

  // 配置控制台日志捕获：自动捕获console.log/error/warn等
  const consoleInstrumentation = new opentelemetry.instrumentationConsole.ConsoleInstrumentation();
  consoleInstrumentation.setTracerProvider(provider);

  // 配置全局异常捕获：捕获未处理的全局错误与Promise拒绝
  const exceptionInstrumentation = new opentelemetry.instrumentation.ExceptionInstrumentation({
    enabled: true,
    ignoreHttpStatusCodes: [] // 可配置忽略的HTTP状态码，默认全捕获
  });
  exceptionInstrumentation.setTracerProvider(provider);

  // 配置OTLP导出器，替换为你的Collector地址
  const exporter = new opentelemetry.exporterTraceOtlpHttp.OtlpHttpTraceExporter({
    url: 'http://your-otel-collector:4318/v1/traces',
    headers: {} // 需认证时可添加请求头
  });

  // 启动Provider与导出器
  provider.addSpanProcessor(new opentelemetry.trace.BatchSpanProcessor(exporter));
  provider.register();

  // 测试用例：触发控制台错误与未处理异常
  console.error('测试控制台错误日志');
  setTimeout(() => {
    throw new Error('测试未处理全局异常');
  }, 1000);
</script>

关键注意事项 #

1. CORS配置：Otel Collector必须允许前端域名的跨域请求，否则浏览器会拦截数据。需在Collector配置中添加CORS规则，示例：

   receivers:
     otlp:
       protocols:
         http:
           cors:
             allowed_origins: ["http://your-frontend-domain:port"]
             allowed_headers: ["*"]
   

2. 日志级别过滤：若只需捕获特定级别日志，可在Console Instrumentation初始化时配置enabledMethods，示例：

   const consoleInstrumentation = new opentelemetry.instrumentationConsole.ConsoleInstrumentation({
     enabledMethods: ['error', 'warn']
   });
   

3. 异常捕获范围：Exception Instrumentation会自动监听window.onerror和window.unhandledrejection事件，覆盖绝大多数前端未处理异常场景。

内容的提问来源于stack exchange，提问作者Enricosoft