[BUG] All server requests are grouped under single TraceId for SPA

[zilinjak]

Description/Screenshot

All requests to the backend (Python FastAPI) from our SPA are considered a single trace. For some of our users who have the frontend open for several hours, it is unsuitable to use Application Insights since it's a pain to search within that trace.

I either need an easy way to see only backend requests without having them nested in the single TraceID created by the SPA, or I need to create a new TraceID for each backend request, which seems to be not doable in the React library. This is an issue for React.js with Application Insights.

Expected behavior

Filter only BE requests in app insights or create TraceID for each BE request.

[MSNev]

There are several ways to achieve this depending on how your application is configured, they range from automatic to manual.

Automatic

• The enableAutoRouteTracking configuration as well as listening to the browser history change event also rotates the "traceId" here it also sends a page view event

Manual options

• If you can't use this then we have also exposed the capability to manually change this value via appInsights.getTraceCtx().setTraceId(generateW3cId()) (the generateW3cId is an exported helper function -- it just generates a random W3c traceId)

There are several other ways to "set" the traceId (some legacy) but all effectively link back to the values exposed via the getTraceCtx(), where the "traceId" is also used as the previous called requestId (which by default is also added to all Ajax (fetch / XHR) requests)

There are also some specific Dependency Listeners which lets you adjust the values both before and after the ajax (fetch / XHR) request is sent, so you could also manage the traceId yourself (if you didn't want to use / set the traceCtx().setTraceId()).

And just for completeness, this is where (for XHR requests) we get the traceId and generate a new random spanId for each requests. And here for fetch, the dependency listener(s) are called after this is set with the values (which you can change) before the headers are added.