Skip to content

Correlate RUM traces with OpenTelemetry backends

KloudMate’s RUM lets you connect requests from your web apps to their related backend traces. This integration provides a unified view of both your frontend and backend data and helps to Identify issues throughout your stack and gain insight into your users’ experiences.

If you want to propagate these headers to a different origin, it can be configured at initialization.

For example, if you want to propagate trace context headers to https://api.example.com, the RUM SDK would be initialized as shown below:

KloudMateRum.init({
  endpoint: 'https://otel.kloudmate.dev:4318',
  rumAccessToken: '<YOUR_PUBLIC_API_KEY>',
  applicationName: 'my-app',
  version: '1',
  deploymentEnvironment: 'prod',
  sessionRecorder: {
      enabled: true,
  }
  instrumentations: {
    fetch: {
      propagateTraceHeaderCorsUrls: [new RegExp('https://api.example.com.*')]
    },
    xhr: {
      propagateTraceHeaderCorsUrls: [new RegExp('https://api.example.com.*')]
    }
  }
});

This will add context propagation headers to backend requests. The backend can then generate its spans using this context.

Sample Integration:

  1. Once the RUM and backend are integrated you can view the corresponding backend trace of a frontend request

image

2. You can identify the same in APM traces

image