Configure Sumo Logic RUM Tracing on the frontend in my React Application

Question

As described in the title, I am looking to configure sumo logic to get RUM tracing from my react application (IE user clicks, errors, etc). How can I do this. Few things that I have looked into

• open telemetry - this seemed to make the most sense but I wasn't able to get it working My implementation looked something like this

import { OTLPSpanExporter } from "@opentelemetry/exporter-otlp-http";
import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";

const provider = new WebTracerProvider();

// Configure the Sumo Logic exporter
const exporter = new OTLPSpanExporter({
  endpoint: "SUMO_ENDPOINT",
  // Add any other exporter configuration options as needed
});

// Set the tracer provider for the OpenTelemetry API
trace.setGlobalTracerProvider(provider);

• Also tried various npm packages but they all seemed janky (https://github.com/SumoLogic/js-sumo-logger) (https://github.com/SumoLogic/sumologic-opentelemetry-js)
• Also need to get this to work on the browser only - followed sumos documentation and they seem to expect it to be done in the server https://help.sumologic.com/docs/apm/traces/get-started-transaction-tracing/opentelemetry-instrumentation/javascript/
• Have also tried following this tutorial https://help.sumologic.com/docs/apm/real-user-monitoring/configure-data-collection/ and got some code that looks like this

 export default class SumoLogger {
  install(logger: Logger): void {
    const defaultMethodFactory = logger.methodFactory;
    const tracer = initialize({
      collectionSourceUrl:
        "endpoint",
      serviceName: "name",
      deploymentEnvironment: "local",
      applicationName: "name",
      samplingProbability: 1,
      collectErrors: true,
    });
     if (method === "warn" || method === "error") {
          // message may be an error
          if (errorObject && errorObject instanceof Error) {
       
            tracer?.recordError(errorObject.message);

            return;
          }
    ``` but don't see any data in sumo logic

Answer 1

Here is a comprehensive tutorial: https://help.sumologic.com/docs/apm/real-user-monitoring/configure-data-collection/, which consists of two steps:

• creating a RUM HTTP Traces source in Sumo Logic UI;
• add RUM JS script to your page and initialise the script (via initialize function). V4 is the newest script, see https://github.com/SumoLogic/sumologic-opentelemetry-js.