Distributed Tracing

Overview

Flashduty RUM’s Trace Tracking feature deeply integrates frontend user monitoring with distributed tracing systems, allowing you to associate requests from your web application with their corresponding backend traces. This combination enables you to view complete frontend and backend data at a glance, achieving end-to-end performance monitoring and troubleshooting. With Trace Tracking, you can:

Correlate frontend and backend requests: Associate frontend user actions with backend API calls
End-to-end troubleshooting: Quickly locate complete request chain issues from frontend to backend
Performance bottleneck analysis: Identify performance bottleneck points throughout the entire request chain
User experience optimization: Optimize user experience based on complete request chain data

How It Works

Trace Tracking is implemented based on the W3C Trace Context standard, correlating frontend and backend requests by injecting tracing information into HTTP request headers:

Frontend Initiates Request

RUM SDK automatically adds tracing header information to configured API requests

Backend Receives and Processes

Backend service receives and processes requests with tracing information

Chain Correlation

Frontend and backend data are correlated through the same trace_id

Visualization

View complete request chain information through trace correlation based on trace_id

Configuration Steps

1. SDK Configuration

First, configure the distributed tracing feature in the RUM SDK. Add the following parameters when initializing the RUM SDK:

import { flashcatRum } from "@flashcatcloud/browser-rum";

flashcatRum.init({
  applicationId: "<YOUR_APPLICATION_ID>",
  clientToken: "<YOUR_CLIENT_TOKEN>",
  service: "<SERVICE_NAME>",
  env: "<ENV_NAME>",
  version: "1.0.0",
  sessionSampleRate: 100,
  allowedTracingUrls: [
    "https://api.example.com",
    /https:\/\/.*\.my-api-domain\.com/,
    (url) => url.startsWith("https://api.example.com")
  ],
  traceSampleRate: 20
});

Key Configuration Parameters

allowedTracingUrls

array

required

Specify API endpoints that need tracing information added, supporting the following types:

Type	Description	Example
String	Matches URLs starting with this value	`"https://api.example.com"`
RegExp	Uses regular expression to match URLs	`/https:\/\/.*\.my-api-domain\.com/`
Function	Custom matching logic, returns `true` for match	`(url) => url.startsWith("https://api")`

traceSampleRate

number

default:"100"

Trace sampling rate, controls what percentage of requests will be traced (range 0-100)

For production environments, it’s recommended to set traceSampleRate to 10-20 to balance monitoring coverage and performance impact.

2. Application Management Configuration

After SDK configuration is complete, you can configure trace jump settings on the application management page:

Go to the Application Management page
Select the corresponding RUM application
Configure the trace system jump address (if a distributed tracing system is integrated)
Enable the Trace Tracking feature in Advanced Configuration

In the configured jump link, the system will automatically replace ${trace_id} with the actual trace_id.

3. Backend Service Configuration

To fully support distributed tracing, backend services need to:

Receive tracing headers: Process traceparent and tracestate request headers
Pass tracing information: Continue passing tracing headers when calling other services
Generate tracing data: Record request processing to the tracing system

Tracing Header Information

The RUM SDK automatically adds the following HTTP headers to configured requests:

traceparent Header

traceparent: 00-00000000000000008448eb211c80319c-b7ad6b7169203331-01

Format: [version]-[trace-id]-[parent-id]-[trace-flags]

Field	Description
`version`	Currently `00`
`trace-id`	128-bit trace ID, 32 characters after hexadecimal processing
`parent-id`	64-bit span ID, 16 characters after hexadecimal processing
`trace-flags`	Sampling flag, `01` means sampled, `00` means not sampled

tracestate Header

tracestate: dd=s:1;o:rum

Format: dd=s:[sampling-priority];o:[origin]

Field	Description
`sampling-priority`	`1` means trace is sampled
`origin`	Always `rum`, indicating collection via RUM SDK

Use Cases

View Trace in RUM Explorer

After configuration is complete, you can view corresponding trace information in the View section of the RUM Explorer:

Go to RUM Explorer
Select a page view containing API calls
View Trace Information in the view details
Click the trace link to jump to the trace system for detailed request chain viewing

Find Resources by trace_id

You can also search for resources in the explorer using trace_id:

Enter trace_id in the explorer search bar
View corresponding resources and view loading status
Analyze the relationship between resource loading performance and backend API calls

You can also query corresponding resources directly by appending parameters to the URL:

https://console.flashcat.cloud/rum/explorer?appid=${YOUR_APP_ID}&end=${END_TIME}&eventType=resource&queryStr=trace_id%3A${TRACE_ID}&start=${START_TIME}

Where start, end, and appid are all optional parameters. If not provided, the current RUM default query application and time range will be used.

End-to-End Troubleshooting

When users report performance issues or errors:

Locate User Session

Find the problem user’s session in the RUM Explorer

View Trace Information

View trace information for the problem page

Analyze Request Chain

Jump to the trace system to view the complete request chain

Identify Root Cause

Determine if it’s a frontend issue, service issue, or network issue

Best Practices

Configure Sampling Rate Appropriately

Environment	Recommended Rate	Description
Development	100%	Ensure all requests are traced
Testing	50-80%	Balance monitoring coverage and performance
Production	10-20%	Avoid significant performance impact

Precisely Configure Tracing URLs

Recommended Approach
Avoid This

Precisely match API endpoints:

allowedTracingUrls: [
  "https://api.example.com/v1/",
  "https://api.example.com/v2/"
]

Overly broad matching may include static resources that don’t need tracing:

// Not recommended
allowedTracingUrls: [
  "https://api.example.com"
]

Cross-Origin Request Handling

If your HTTP requests involve cross-origin issues, ensure:

Server has correct CORS headers configured
Supports Preflight Requests
Allows traceparent and tracestate headers

Performance Monitoring

Regularly check the impact of trace sampling rate on application performance
Monitor storage and query performance of tracing data
Adjust tracing strategy based on business needs

Frequently Asked Questions

Why don't some requests have trace information?

Possible reasons include:

Request URL is not within the allowedTracingUrls configuration range
Request was filtered by traceSampleRate sampling rate
Request was initiated before SDK initialization
Cross-origin request lacks necessary CORS configuration

How to verify trace configuration is correct?

You can verify through the following methods:

Check network request headers in browser developer tools
Confirm requests contain traceparent and tracestate headers
Check if trace information is displayed in the RUM Explorer

Important Notes

Privacy Compliance: Ensure trace data collection complies with relevant privacy regulations
Performance Impact: Set sampling rate appropriately to avoid significant impact on application performance
Data Security: Avoid including sensitive information in trace data
Cross-Origin Configuration: Ensure backend services have CORS properly configured to support tracing headers

Quick Start

Analytics

SDK Integration

Performance

Error Tracking

Explorer

Session Replay

Best Practices

Others

Overview

How It Works

Configuration Steps

1. SDK Configuration

Key Configuration Parameters

2. Application Management Configuration

3. Backend Service Configuration

Tracing Header Information

traceparent Header

tracestate Header

Use Cases

View Trace in RUM Explorer

Find Resources by trace_id

End-to-End Troubleshooting

Best Practices

Configure Sampling Rate Appropriately

Precisely Configure Tracing URLs

Cross-Origin Request Handling

Performance Monitoring

Frequently Asked Questions

Important Notes

Quick Start

Analytics

SDK Integration

Performance

Error Tracking

Explorer

Session Replay

Best Practices

Others

​Overview

​How It Works

​Configuration Steps

​1. SDK Configuration

​Key Configuration Parameters

​2. Application Management Configuration

​3. Backend Service Configuration

​Tracing Header Information

​traceparent Header

​tracestate Header

​Use Cases

​View Trace in RUM Explorer

​Find Resources by trace_id

​End-to-End Troubleshooting

​Best Practices

​Configure Sampling Rate Appropriately

​Precisely Configure Tracing URLs

​Cross-Origin Request Handling

​Performance Monitoring

​Frequently Asked Questions

​Important Notes

Overview

How It Works

Configuration Steps

1. SDK Configuration

Key Configuration Parameters

2. Application Management Configuration

3. Backend Service Configuration

Tracing Header Information

traceparent Header

tracestate Header

Use Cases

View Trace in RUM Explorer

Find Resources by trace_id

End-to-End Troubleshooting

Best Practices

Configure Sampling Rate Appropriately

Precisely Configure Tracing URLs

Cross-Origin Request Handling

Performance Monitoring

Frequently Asked Questions

Important Notes