RUM - Capturing async 3rd party JS API requests in a transaction

[mgulbransen]

APM Agent language and version: apm-rum-angular 2.1.3

Browser version: Chrome 103.0.5060.134

Original install method (e.g. download page, yum, deb, from source, etc.) and version: npm

Fresh install or upgraded from other version? fresh

Is there anything special in your setup? Just a few custom indexes and labels, nothing too crazy.

Description of the problem including expected versus actual behavior. Please include screenshots (if relevant):
We are using the Tableau Javascript API on our site Angular 14 to load, interact with, and control some external data visualizations. We import this API and leverage its async functions to load and control the visualizations from our site.

All of the underlying async calls from our Angular 14 site send HTTP requests to the Tableau server, and these can be seen in the network tab of Chrome dev tools. Currently, I am unable to get any of these requests captured by the RUM agent -- the only request I can see is the initial load of the iframe. Here is an example of an HTTP post call I can see in dev tools, but is not being picked up by the RUM agent:

I have tried adding the destination server for all these http requests to the distributedTracingOrigins array, but no luck yet.

Any pointers in the right direction would be appreciated!

Steps to reproduce:

1. Install apm-rum-angular 2.1.3 in an Angular 14 app
2. Use Tableau Javascript API to load a visualization
3. Any Async calls form Angular 14 app to the JS API are visible in dev tools but not captured by RUM agent

[Alberto_Delgado]

Hi @mgulbransen,

Thanks for reaching out!

The requests are not being captured by the RUM agent because they are triggered within the iframe that Tableau creates.

The RUM agent instruments the APIs available in the window object that corresponds to your page (top frame). The iframe embeds a different page in your website, which means that has a different instance of the window object. If you want to intercept the requests triggered within the iframe you will need to inject the agent there, too. Not sure if Tableau provide the possibility of adding custom scripts, though.

You can see that the requests are initiated in iframe looking at the initiator data of the network request:

• You will that the first value in the request initiator chain corresponds to the iframe url.
• You will see that the javascript files visible there belong to the iframe. For instance, ViewerBootstrap.js, as you can see at the screenshot below:

Cheers,
Alberto

[mgulbransen]

That makes sense - I appreciate the detailed response. Thanks, Alberto!