Distributed tracing doesn’t work in RUM application

[KamilA]

Our problem:

Http errors handle by Dynatrace web application don’t have assigned service so we don’t able to see distributed tracing

State of the matter is:

• We have defined web application in Dynatrace using agentless RUM option (Injection format: JavaScript tag)
• Frontend application is developed in Angular v17
• Frontend communicates with backend via Apigee proxy and Istio, it looks like: HTPP request from Frontend app -> apigee proxy -> Istio -> backend service
• Our one Dynatrace web application monitors 2 environments (test, prod), apps urls looks like: https://app.test.group.example.com https://app.group.example.com
• Frontend app is hosted on Amazon CloudFront
• Our frontend app calls backend via apigee proxy, api urls looks like https://api-test.example.com https://api.example.com
• For backend we have separate service in Dynatrace for test and prod environment
• Cookies are included in XHR calls (we checked and backend service receives Dynatrace cookies send from frontend)
• We checked and x-dtc header isn’t set when we have (https:\/\/)?[a-z|-]*\.example\.com\/?\S* regex in “Link cross-origin XHR actions and their distributed traces” option
• In frontend Dynatrace web application we have defined request error rules and HTTP 400-499 and 500-599 errors are captured, they impact Apdex and are considered for Davis
• Our Angular interceptor responsible for capturing HTTP errors using Dynatrace JavaScript API:

intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    if (!window.dtrum) {
        return next.handle(req);
    }

    const xhrActionId: number = window.dtrum?.enterXhrAction(`HTTP ${req.method} request`, 1, req.url);

    return next.handle(req).pipe(
        tap({
            next: (): void => {},
            error: (error: HttpErrorResponse): void => {
                window.dtrum?.markXHRFailed(error.status, error.message, xhrActionId);
            }
        }),
        finalize((): void => {
            window?.dtrum?.leaveXhrAction(xhrActionId);
        })
    );

• In Dynatrace web application settings we have:
  • In Capturing -> Async web requests and SPAs section: Angular toggle is off and Capture XmlHttpRequest (XHR), Use Proxy API for XHRs, Capture fetch() requests toggles are on
  • In Capturing -> Custom configuration properties section we have cce=1 custom configuration property added
  • Page group detection is default
  • In Capturing -> Content capture section all toggles are on
• Our backend services are monitored by OneAgent, developed using Spring boot 3.2.2 and Java 21, deployed on AWS using Kubernetes

What did we miss that distributed tracing doesn't work for our RUM application?

[gbaudart · Accepted solution]

Hi @KamilA 
In certain cases, if you use agentless and if you activate cross-origin, it may be necessary to pass the x-dtc header into CORS in order to be able to link user actions (or errors) to backend traces.

documentation link : https://docs.dynatrace.com/docs/platform-modules/digital-experience/web-applications/initial-setup/l...

[KamilA]

I've configured Access-Control-Allow-Headers: x-dtc header but still x-dtc header isn't set. Should it be added automatically by JavaScript API? Am I right?

[gbaudart]

Oui, mais il faut veiller à l'autoriser dans le CORS (peut-être sur API Gateway par exemple).

[KamilA]

But the CORS error will show up only when x-dtc header is added so in my opinion regex in Link cross-origin XHR actions and their distributed traces doesn't work because x-dtc header isn't added