DTRUM - Real User Monitoring - How to Capture Load Actions, XHR Actions, and Route Changes under Custom Actions?

[RR123]

Hello,

I am new to the DTRUM API and instrumenting RUM in Javascript on my applications.

I was exploring the API from this documentation page: https://www.dynatrace.com/support/doc/javascriptapi/doc/interfaces/dtrum_types.DtrumApi.html?_gl=1*1...

I am experimenting with creating custom actions using an automation script that runs a user flow on a web app in a browser. I tried the following to capture all the network requests in Dynatrace RUM between when the user clicks on submit and when the user lands on the subsequent screen.

1. User clicks "Submit" button
   
   • const actionID = dtrum.enterAction("Clicked submit")
2. User lands on the following screen
   • dtrum.leaveAction(actionID)

However, in Dynatrace, I notice the following types of User Actions

• Custom Action (the "Clicked submit" load action as defined in my script)
• Load Action (For loading of a new page)
• XHR Action (During XHR/Fetch requests)
• Route Changes (During a specific call made on the same page)

Ideally, what I would like to see is the load action(s), XHR action(s), Route Change(s) - all appear under the Custom Action as defined in my script. I am seeing each of the various types of actions with the W3C Resource timings appear separately in Dynatrace RUM.

Please refer to the screenshot below, which shows the various types of actions - I would like to see them all appear under my Custom Action. I have labelled them accordingly. 

Could someone please provide any recommendations as to how I can accomplish this? (e.g: using any function to disable automatic action capturing or a function that couples all those Load, XHR, and/or Route change actions under my custom-defined custom action)

Thank you, and appreciate the support! Please let me know if you require further details.