15 Aug 2023
04:45 PM
- last edited on
14 Dec 2023
11:01 AM
by
Ana_Kuzmenchuk
Has anybody had much luck with utilizing Dynatrace RUM on a React SPA? We miss a lot of XHR requests in our waterfall. Also, I believe because we have an ErrorBoundary component, it causes Dynatrace to miss a lot of JS errors. Have people had to manually instrument via using the JS library to report errors/XHR requests?
One example of missing XHR Requests from customer logs (clicks on the login button). We see the user action of clicking the login button and can see the authentication requests in the waterfall (usually). From there, the customer is redirected to a post-login page in which additional XHR Requests are made. Unfortunately, these XHR Requests are typically missing, probably due to them not being explicitly tied to the click of the button but more tied to the Page Change to post-login. Page changes don't come with waterfalls. Just wondering how other clients have dealt with this and avoided having to manually record these actions/errors/etc. via JavaScript. Would love to have a conversation about having an ideal setup with accurate reporting!
12 Feb 2024 07:50 PM
@jchabot86 were you able to find a solution to this?
26 Aug 2025 02:48 PM
@ChadTurner no - not to this point
26 Aug 2025 03:13 PM
Hi
Regarding your question about React XHRs: This is currently only solvable with custom actions, as those XHRs most likely do not happen as part of an action and we therefore do not capture them (While this is just an assumption, this is the issue with a very high probability).
In RUM on Grail we will capture all XHR/fetch requests and resources (images, scripts, ...), so you will be able to see them. We will have a different approach to actions (name is still TBD) that will be a bit more forgiving when it comes to grouping requests together. It may still be necessary to use the API though, since with all the async execution of javascript in modern applications we will simply not be able to determine the purpose of all requests happening in your application)
Regarding the question about error capturing: My guess is that the error boundary is catching the exception and then handles it React-internally, which means the browser never actually fires the error event, which is where we (or any other code for that matter) would be able to capture it.
Hope that helps
Simon