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

**URL:** <https://discuss.elastic.co/t/rum-capturing-async-3rd-party-js-api-requests-in-a-transaction/311016>\
**Category:** APM\
**Tags:** rum\
**Created:** [July 29, 2022, 7:44pm UTC](https://discuss.elastic.co/t/rum-capturing-async-3rd-party-js-api-requests-in-a-transaction/311016 "2022-07-29T19:44:25Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mgulbransen](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@mgulbransen](https://discuss.elastic.co/u/mgulbransen)\
**Post date:** [July 29, 2022, 7:44pm UTC](https://discuss.elastic.co/t/rum-capturing-async-3rd-party-js-api-requests-in-a-transaction/311016/1 "2022-07-29T19:44:25Z")

</div>

**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](https://help.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api.htm) 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:

 ![tableau js api post example](https://us1.discourse-cdn.com/elastic/original/3X/f/d/fda9cc1bf9d76ad58a26a857b7db39a5c8c0584c.png)

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](https://help.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api.htm) 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

---

<div class="post-metadata">

**Author:** ![Alberto\_Delgado](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/alberto_delgado/32/98488_2.png) [@Alberto\_Delgado](https://discuss.elastic.co/u/Alberto_Delgado)\
**Post date:** [August 1, 2022, 10:15am UTC](https://discuss.elastic.co/t/rum-capturing-async-3rd-party-js-api-requests-in-a-transaction/311016/2 "2022-08-01T10:15:42Z")

</div>

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.

 ![Screenshot 2022-08-01 at 11.38.07](https://us1.discourse-cdn.com/elastic/original/3X/2/4/24c656752ac86511be1308e995981c2b3304f3ac.png)

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

 ![Screenshot 2022-08-01 at 11.43.05](https://us1.discourse-cdn.com/elastic/original/3X/2/b/2b9787158a6fc2216f701ac22e546f5e4f0488b4.png)

- 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:

 ![Screenshot 2022-08-01 at 11.46.11](https://us1.discourse-cdn.com/elastic/original/3X/d/d/dd411e710946aae3ad3a443906b8c20093bd470c.png)

Cheers,  
Alberto

---

<div class="post-metadata">

**Author:** ![mgulbransen](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@mgulbransen](https://discuss.elastic.co/u/mgulbransen)\
**Post date:** [August 1, 2022, 12:08pm UTC](https://discuss.elastic.co/t/rum-capturing-async-3rd-party-js-api-requests-in-a-transaction/311016/3 "2022-08-01T12:08:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [August 22, 2022, 8:09am UTC](https://discuss.elastic.co/t/rum-capturing-async-3rd-party-js-api-requests-in-a-transaction/311016/4 "2022-08-22T08:09:05Z")

</div>

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.
