CloudWatch RUM (Real User Monitoring) not logging XHR API requests with React

Question

Hello,

Testing out CloudWatch RUM. I have a single page React app that is making XHR requests out to the API services. These all show up on the browser network tab and the initiator changes from xhr.js to cwr.js when adding the embedded script in the  tab. I've tried setting pageIdFormat to PATH_AND_HASH, setting enableXRay to true, and setting [ 'http', { recordAllRequests: true, addXRayTraceIdHeader: true } ]

I see what appears to be xray events in the fetch call out to the RUM data collector, but it doesn't capture the api method name or path in the "Requests" section of RUM dashboard. For example, the api calls from example.com/#profile are POSTs to something like example.com/api/serviceABC and I was hoping to get serviceABC request times on the RUM dashboard.

Taking the xray ID from the browser's network tab, I can find the ID in the xray dashboard, but the request and response fields are all blank and there is no way to see what service was called.

Answer

I ended up forking the aws-rum-web client for our use case (capture all API calls ignoring sampling and max event count). Not a global fix, but may be useful for others

https://github.com/samholton/aws-rum-web/releases/tag/v1.5.1-api-patch

Answer

Hello, and thanks for reaching out!

RUM at the moment will not capture API methods/path information and save it as an event. This is why you won’t see it on the dashboard.We also only capture HTTP requests that are not successful (i.e, non 200) - We will display these failed requests in the Errors & Sessions tab. 
https://docs.aws.amazon.com/cloudwatchrum/latest/APIReference/API_AppMonitorConfiguration.html

For route change timing, we only capture the duration of a route change - in the future, we will be extending this functionality to break down the route changes and specify how long each underlying request took.

To summarize unfortunately, at this moment we cannot see what service was called in RUM dashboard as we only capture HTTP requests that are not successful.

CloudWatch RUM (Real User Monitoring) not logging XHR API requests with React

Contenido relevante