JavaScript function that triggers custom action and XHR request

[Weilin1]

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.

[radek_jasinski]

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

[Weilin1]

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.

[radek_jasinski · Accepted solution]

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

[Weilin1]

Would something like this work?

function submitSentiment(value) {

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

//XHR action
fetch('https://jsonplaceholder.typicode.com/submit')
.then(response => response.json())
.then(data => { 
var action = dtrum.enterXhrAction('xhr', 3,'https://jsonplaceholder.typicode.com/submit');
dtrum.leaveXhrAction(action); 
})
.catch(error => {});
}

Is this what you mean by defined as separate actions?

Thanks

[radek_jasinski]

Yes, it looks good

[Weilin1]

Thank you!