如何在React前端应用中配置Sumo Logic RUM追踪？

API 探路者

2026-7-17

React应用配置Sumo Logic实现RUM追踪（用户点击、错误等）

一、推荐的官方浏览器端实现方案

直接使用Sumo Logic官方维护的RUM SDK，这是最稳定可靠的方式：

安装依赖

npm install @sumologic/rum-core

在React应用中初始化
在应用入口（如App.tsx或index.tsx）中添加初始化逻辑，开启自动追踪用户交互、错误、API请求等：

import { useEffect } from 'react';
import { initialize } from '@sumologic/rum-core';

const initializeSumoRUM = () => {
  // 从Sumo Logic控制台获取的RUM收集端点
  const COLLECTION_ENDPOINT = '你的Sumo RUM收集URL';
  
  const tracer = initialize({
    collectionSourceUrl: COLLECTION_ENDPOINT,
    serviceName: 'react-app',
    deploymentEnvironment: 'local', // 生产环境改为production
    applicationName: '你的应用名称',
    samplingProbability: 1, // 100%采样，生产环境可按需调整
    collectErrors: true, // 自动捕获全局错误
    collectInteractions: true, // 追踪用户点击、输入等交互
    collectFetch: true, // 追踪Fetch API请求
    collectNavigation: true, // 追踪页面导航变化
  });

  // 自定义全局错误捕获（可选，补充SDK的自动捕获）
  const originalOnerror = window.onerror;
  window.onerror = (msg, source, line, col, err) => {
    tracer?.recordError(err || new Error(String(msg)));
    originalOnerror?.(msg, source, line, col, err);
  };

  return tracer;
};

function App() {
  useEffect(() => {
    initializeSumoRUM();
  }, []);

  return (
    <div className="App">
      {/* 你的应用内容 */}
    </div>
  );
}

export default App;

二、你之前尝试方案的问题分析

1. OpenTelemetry方案

你的代码缺少关键配置，导致数据无法发送：

未添加SimpleSpanProcessor到WebTracerProvider，追踪数据不会被导出
未启用自动追踪插件（用户交互、错误、API请求等）
需确认OTLP端点是Sumo Logic专门的RUM OTLP地址，且配置了正确的认证头（如需要）

修正后的OpenTelemetry配置示例：

import { OTLPSpanExporter } from "@opentelemetry/exporter-otlp-http";
import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
import { ErrorInstrumentation } from '@opentelemetry/instrumentation-error';
import { trace } from '@opentelemetry/api';

const provider = new WebTracerProvider();

const exporter = new OTLPSpanExporter({
  endpoint: '你的Sumo OTLP RUM端点',
  headers: {
    // 按需添加认证头，如Sumo的访问令牌
    'Authorization': 'Bearer YOUR_TOKEN',
  },
});

// 添加处理器，导出追踪数据
provider.addSpanProcessor(new SimpleSpanProcessor(exporter));

// 启用自动追踪插件
registerInstrumentations({
  instrumentations: [
    new UserInteractionInstrumentation(),
    new FetchInstrumentation(),
    new ErrorInstrumentation(),
  ],
});

trace.setGlobalTracerProvider(provider);

2. 第三方npm包问题

js-sumo-logger、sumologic-opentelemetry-js等非官方维护包，缺乏持续更新和支持，稳定性无法保证，建议弃用。

3. 官方教程代码问题

你的代码片段存在缺失：

未确认initialize函数是否来自官方SDK
未开启collectInteractions等自动追踪配置，无法获取用户点击数据
错误判断逻辑仅覆盖部分场景，且未确保collectionSourceUrl是正确的RUM收集端点

三、验证数据是否正常发送

打开浏览器开发者工具的Network标签，过滤请求到你的Sumo端点，检查是否有POST请求，状态码是否为200
查看Sumo Logic控制台的RUM仪表板（数据可能有几分钟延迟）
确认Sumo控制台已将你的应用域名添加到CORS允许列表，避免浏览器拦截请求

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