cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Monitoring React SPA: missing XHR requests

jchabot86
Participant

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!

3 REPLIES 3

ChadTurner
DynaMight Legend
DynaMight Legend

@jchabot86 were you able to find a solution to this? 

-Chad

jchabot86
Participant

@ChadTurner no - not to this point

simon_schatka
Dynatrace Advisor
Dynatrace Advisor

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

Featured Posts