topic JavaScript function that triggers custom action and XHR request in Real User Monitoring

JavaScript function that triggers custom action and XHR request

Weilin1 — Mon, 20 Nov 2023 09:43:30 GMT

Hi,

i would like to find out if i have a JavaScript function (e.g. submitSentiments()) that trigger both an XHR request and a custom action, how will the actions be captured/recorded in Dynatrace?

Would it be a case of:

1) 2 actions? 1 XHR action, 1 custom action or

2) 1 root action with one XHR request and 1 custom action group together since they are trigger by the same button click.

function submitSentiment(value) {

//XHR action
fetch('https://jsonplaceholder.typicode.com/submit')
.then(response => response.json())
.then(data => {})
.catch(error => {});

//Custom action
var action = window.dtrum.enterAction('Submit sentiment');
window.dtrum.leaveAction(action);
}

Thanks.

Re: JavaScript function that triggers custom action and XHR request

radek_jasinski — Mon, 20 Nov 2023 09:54:22 GMT

Hi @Weilin1

Given a JavaScript submitSentiment(value) function that triggers both an XHR request and a custom action, Dynatrace is likely to register these actions as follows:

XHR action: the XHR request made by the fetch API call to "https://jsonplaceholder.typicode.com/submit" will be captured as an XHR action. Dynatrace automatically tracks XHR requests and associates them with user actions. This is seen as an interaction with the backend service.
Custom action: a custom action defined by window.dtrum.enterAction('Submit sentiment') and window.dtrum.leaveAction(action) will be registered as a separate custom user action. Custom actions are defined explicitly in the code to denote specific interactions or behaviours that are important to track.

Dynatrace sees them as two separate actions because they are conceptually different - one is a network request to the server and the other is a custom action defined in the application.

There may still be an option two:

Main action: The general interaction (e.g. clicking a button) that triggers the submitSentiment function can be considered the user's main action.
Nested actions: Within this main action, Dynatrace will capture the XHR request and custom action as nested actions. Both are part of a wider user interaction, but are tracked individually for detailed analysis.

In this option, Dynatrace groups the actions together because they are part of a single sequence of user interactions, providing a holistic view of what happens when a user performs a specific action (e.g. clicking a button that triggers a submitSentiment).

Hope it helps😊

Radek

Re: JavaScript function that triggers custom action and XHR request

Weilin1 — Mon, 20 Nov 2023 10:09:28 GMT

Hi Radek,

Thanks for the explanation. It really helpful.

I am hoping that it will be option 1, that Dynatrace see them as 2 different actions.

But i am also afraid that option 2 might happen. Hence how can i prevent option 2 from happening?

Thanks.

Re: JavaScript function that triggers custom action and XHR request

radek_jasinski — Mon, 20 Nov 2023 10:15:46 GMT

What you can do is make sure that the custom action and the XHR request are defined as separate actions in the code. This includes clearly separating blocks of code and ensuring they are called independently. Additionally, assign unique identifiers or names to each action. This should help:)

Re: JavaScript function that triggers custom action and XHR request

Weilin1 — Mon, 20 Nov 2023 10:27:22 GMT

Would something like this work?

Is this what you mean by defined as separate actions?

Thanks

Re: JavaScript function that triggers custom action and XHR request

radek_jasinski — Mon, 20 Nov 2023 11:35:15 GMT

Yes, it looks good

Re: JavaScript function that triggers custom action and XHR request

Weilin1 — Tue, 21 Nov 2023 00:44:15 GMT

Thank you!