Correlating Web Application Access¶

APM can trace complete frontend-to-backend request data for a web application through collectors such as DDTrace, Zipkin, Skywalking, Jaeger, and Opentelemetry.

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

Prerequisites¶

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

For different APM tools, the corresponding keys for the Access-Control-Allow-Headers request header are 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 three configuration methods: 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
 ....

Frontend RUM Configuration Steps¶

1. Introduce the RUM SDK in 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/]
})