Angular - Elastic APM RUM init/ Source Maps/ Code Completion in IDE/ ngrx

Elastic Observability APM
#1

Hi, have few questions about angular integration with APM RUM.

  1. Would I be able to modify apm init configuration at run time?
    Ex: 1. If I want to turnoff elastic APM, I need to change the active flag to false
    2. Not just active flag any other init values if I want to change at run time?

  2. One strange thing is, I am not getting code autoCompletion for elastic rum angular package items. I did read the article Using Typescript, but didnt get at what actually I need to do. Could you guys share more specific details about it.

  3. Do you guys have any article/ code repo using ngrx with elastic APM RUM. This is some what different how we handle asynchronous operations.

  4. Would I be able to customize transaction name which is generated by eventTarget and also can I add any labels on this transaction?
    example: On click of a button, I got a transaction name as Click - button["Connect"], instead of this I would just need Connect

SourceMaps:

In angular we get multiple sourcemap files like "polyfills/main/runtime/css" etc. I need to upload all these files into the service and the rest kibana will take care on mapping stuff right? Do you guys have any sample for it?

Thanks in Advance.

#2

Hi @sureshkumargarlapati,

  1. Would I be able to modify apm init configuration at run time?

Interesting question. You can tune any config at runtime locally other than these following properties

  • instrument & active - you can go from false to true and not the other way around
  • disableInstrumentations - you can activate the instrumentation for supported values (page-load, route-change, error etc), but not the other way around

The reason for this is that , we register event listeners for the load and error events during the init phase and we don't have any mechanism currently to remove those already registered ones. We have not seen any use-case at the moment but wouldn't be hard to implement if there is a strong reason.

  1. One strange thing is, I am not getting code autoCompletion for elastic rum angular package items.

We currently do not publish Typescript bindings for the Angular package, that is why you are not getting the auto completion. But it would be easier to build it from our base package @elastic-apm-rum which is available here https://github.com/elastic/apm-agent-rum-js/blob/master/packages/rum/src/apm-base.js. Feel free to give a PR if you can.

  1. Do you guys have any article/ code repo using ngrx with elastic APM RUM. This is some what different how we handle asynchronous operations.

Not at the moment, sorry. We are planning to rewrite the Angular package to support the Angular packaging format out of the box. Please check the issue here https://github.com/elastic/apm-agent-rum-js/issues/757, not sure if it helps but if you want to handle async operations that the agent cannot auto instrument, use our Custom transaction API to get timing information.

  1. Would I be able to customize transaction name which is generated by eventTarget and also can I add any labels on this transaction?

Yes, you can. To observe these events you can add an observe function and listen for these specific transactions.

apm.observe('end', function (transaction) {
  if (transaction.type === 'user-interaction') {
    transaction.name = // change it here
    transaction.addLabels({ 'custom-label': 'custom-value' })
  }
})

In angular we get multiple sourcemap files like "polyfills/main/runtime/css" etc. I need to upload all these files into the service and the rest kibana will take care on mapping stuff right?

Yes, here are the docs https://www.elastic.co/guide/en/apm/agent/rum-js/current/sourcemap.html

Let us know if you need any help.

Thanks,
Vignesh

#3

Hi Vignesh,

Thanks for quick reply. Nice to know all the above information.

I feel like it would be nice to have thing. If at all kibana is overloaded with some junk logs for some reason, we can turn on/off apm in the client using some feature flags.

And you mentioned that we can change the state from false to true. How would I do that?

One morething, why eventTarget(user-interaction) not capturing http request body or query parameters as labels. Do we have any plan to add those?

#4

And you mentioned that we can change the state from false to true . How would I do that?

Assume you have set the agent to inactive by default, apm.init({active: false}), Its not easy to reenable it since we allow initialisation to happen only once, But you can work around by setting

import {apm, init} from '@elastic/apm-rum';
// internal variable that is used to stop initialising multiple times
apm.__initialized = false;
init({ active: true })

Please dont use this as we might change the mechanics since its internal code, Just saying there is a way to do it if its really really required.

One more thing, why eventTarget(user-interaction) not capturing http request body or query parameters as labels. Do we have any plan to add those?

The agent does not capture request body at the moment as it would increase the payload size of the beacon, Curios to know more about the use case.

Thanks,
Vignesh

#5

I agree request body may be huge at times, but if we could conditionally capture request body/query parameters, it will be much more easy to debug.

#6

Sure, it would be valuable at times for debugging. Would you mind creating an enhancement issue request https://github.com/elastic/apm-agent-rum-js/issues with more details. We will prioritise it appropriately.

Thanks,
Vignesh