Angular integration with Elastic APM

[Mangesh_Mathe]

Hello Team,

My elastic setup is on cloud.
elastic version : 8.4.2
Angular version: 13.0
Where we have integrated Angular APM client with elastic APM server.
We referred the link from documentation, and installed/configured elastic APM.
https://www.elastic.co/guide/en/apm/agent/rum-js/4.x/angular-integration.html

Our requirement is to capture all the real time custom events ,app analytics from UI through APM. We want to build dashboards from these data.
I can see our APM service is created but can't see each and every events that are happening on UI after drilldown, not all the events were captured.

In above image we can see only agent name is captured but what if I want to create visualization to find the number of downloads per user per day.
I think there is no libraries or plugin in elastic APM to capture all the custom events.
If yes , please guide me.

Thank you in advance!

[carly.richmond]

Hi @Mangesh_Mathe,

Can you give a bit more detail on what you mean by custom events? Is it the case that perhaps you might want to add custom transactions to your code using the RUM agent similar to this example.

[Mangesh_Mathe]

I'm explaining this with my requirement.
Example:
I have one portal where users are login and registered themself by creating account. And downloads anything if available , or button click events.
These data I want to capture from our UI through angular and then it will be push further to elastic APM server.

[Alberto_Delgado]

Hi @Mangesh_Mathe,

Thanks for using Elastic APM!

The RUM agent (regardless if you use a framework integration or not) supports this out of the box: Supported Technologies | APM Real User Monitoring JavaScript Agent Reference [5.x] | Elastic. Please have a read at that document page when possible. (btw, recently we added a small section highlighting where framework integrations shine)

I think there is no libraries or plugin in Elastic APM to capture all the custom events.

If you want the agent to capture custom events, you will need to use custom transactions.

You can also enrich your transactions with labels

I also recommend you have a look at the API reference documentation you will see there how you can use leverage RUM agent API to create custom flows:

button click events

As mentioned in supported technologies docs, clicks are automatically captured by the agent. You will see that referenced in the UI as a "user interaction" transaction, or "route-change" in case the click triggered a URL change in a SPA.

Clicks are only captured if they generate network activity (xhr/fetch)

Last but not least, in terms of UI:

Bear in mind, that you will need to use the dropdown to filter by transaction type, the default value tends to be "page-load"

And besides APM, you can also find RUM useful information on the User Experience page:

Cheers,
Alberto