Skip to content

Correlating Web Application Access

APM can track complete frontend-to-backend request data for a Web application through DDTrace, Zipkin, Skywalking, Jaeger, and Opentelemetry collectors.

By using RUM data from the frontend and the trace_id injected into the backend, you can quickly locate the call stack.

Prerequisites

  • Configure the corresponding Web application target server with DDTrace, Skywalking, Opentelemetry, Jaeger, or Zipkin.
  • For frontend applications that are separated from the backend (with cross-origin conditions), you need to set a Header whitelist for the request response headers that the target server allows for tracing.

For different APM tools, the specific Key for the Access-Control-Allow-Headers request header is as follows:

  • ddtrace: x-datadog-parent-id, x-datadog-origin, x-datadog-sampling-priority, x-datadog-trace-id
  • skywalking: sw8
  • jaeger: uber-trace-id
  • zipkin: X-B3-TraceId, X-B3-SpanId, X-B3-ParentSpanId, X-B3-Sampled, X-B3-Flags
  • zipkin_single_header: b3
  • w3c_traceparent: traceparent
  • opentelemetry: This type supports the configuration methods of zipkin_single_header, w3c_traceparent, zipkin, and jaeger. Add the corresponding header based on the traceType configured in the RUM SDK.

Python example:

app = Flask(__name__)
api = Api(app)
@app.after_request
def after_request(response):
 ...
 response.headers.add('Access-Control-Allow-Headers', 'x-datadog-parent-id,x-datadog-sampled,x-datadog-sampling-priority,x-datadog-trace-id')
 ....
 return response
 ....
Note

The target server must use an HTTP service.

Frontend RUM Setup Steps

  1. Introduce the RUM SDK into the frontend application.
  2. Add the allowedTracingOrigins parameter to the initialization configuration to set the whitelist of frontend request origins allowed for tracing. This can be an array of strings or regular expressions. (Definition of origin: <scheme> "://" <hostname> [ ":" <port> ])

Example:

import { datafluxRum } from '@cloudcare/browser-rum'

datafluxRum.init({
  applicationId: '<DATAFLUX_APPLICATION_ID>',
  datakitOrigin: '<DATAKIT ORIGIN>',
  traceType: 'ddtrace', // ddtrace, zipkin, skywalking_v3, jaeger, zipkin_single_header, w3c_traceparent
  ... // Other configurations
  allowedTracingOrigins: ["https://api.example.com", /https:\/\/.*\.my-api-domain\.com/]
})

Feedback

Is this page helpful? ×