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

**URL:** <https://discuss.elastic.co/t/angular-elastic-apm-rum-init-source-maps-code-completion-in-ide-ngrx/245829>\
**Category:** APM\
**Tags:** rum\
**Created:** [August 20, 2020, 10:42pm UTC](https://discuss.elastic.co/t/angular-elastic-apm-rum-init-source-maps-code-completion-in-ide-ngrx/245829 "2020-08-20T22:42:16Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sureshkumargarlapati](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sureshkumargarlapati/32/62734_2.png) [@sureshkumargarlapati](https://discuss.elastic.co/u/sureshkumargarlapati)\
**Post date:** [August 20, 2020, 10:42pm UTC](https://discuss.elastic.co/t/angular-elastic-apm-rum-init-source-maps-code-completion-in-ide-ngrx/245829/1 "2020-08-20T22:42:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![vigneshshanmugam](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vigneshshanmugam/32/40324_2.png) [@vigneshshanmugam](https://discuss.elastic.co/u/vigneshshanmugam)\
**Post date:** [August 21, 2020, 10:51am UTC](https://discuss.elastic.co/t/angular-elastic-apm-rum-init-source-maps-code-completion-in-ide-ngrx/245829/2 "2020-08-21T10:51:33Z")

</div>

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](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 [Anguar Package Format · Issue #757 · elastic/apm-agent-rum-js · GitHub](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](https://www.elastic.co/guide/en/apm/agent/rum-js/current/agent-api.html#apm-start-transaction) 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.

```auto
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 [Source maps | APM Real User Monitoring JavaScript Agent Reference [5.x] | Elastic](https://www.elastic.co/guide/en/apm/agent/rum-js/current/sourcemap.html)

Let us know if you need any help.

Thanks,  
Vignesh

---

<div class="post-metadata">

**Author:** ![sureshkumargarlapati](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sureshkumargarlapati/32/62734_2.png) [@sureshkumargarlapati](https://discuss.elastic.co/u/sureshkumargarlapati)\
**Post date:** [August 21, 2020, 12:03pm UTC](https://discuss.elastic.co/t/angular-elastic-apm-rum-init-source-maps-code-completion-in-ide-ngrx/245829/3 "2020-08-21T12:03:01Z")

</div>

Hi Vignesh,

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

> [@vigneshshanmugam](#):
>
> 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

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?

---

<div class="post-metadata">

**Author:** ![vigneshshanmugam](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vigneshshanmugam/32/40324_2.png) [@vigneshshanmugam](https://discuss.elastic.co/u/vigneshshanmugam)\
**Post date:** [August 26, 2020, 9:54am UTC](https://discuss.elastic.co/t/angular-elastic-apm-rum-init-source-maps-code-completion-in-ide-ngrx/245829/4 "2020-08-26T09:54:23Z")

</div>

> 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

```js
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

---

<div class="post-metadata">

**Author:** ![sureshkumargarlapati](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sureshkumargarlapati/32/62734_2.png) [@sureshkumargarlapati](https://discuss.elastic.co/u/sureshkumargarlapati)\
**Post date:** [August 26, 2020, 8:34pm UTC](https://discuss.elastic.co/t/angular-elastic-apm-rum-init-source-maps-code-completion-in-ide-ngrx/245829/5 "2020-08-26T20:34:08Z")

</div>

> [@vigneshshanmugam](#):
>
> 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

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.

---

<div class="post-metadata">

**Author:** ![vigneshshanmugam](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vigneshshanmugam/32/40324_2.png) [@vigneshshanmugam](https://discuss.elastic.co/u/vigneshshanmugam)\
**Post date:** [September 4, 2020, 10:01am UTC](https://discuss.elastic.co/t/angular-elastic-apm-rum-init-source-maps-code-completion-in-ide-ngrx/245829/6 "2020-09-04T10:01:45Z")

</div>

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](https://github.com/elastic/apm-agent-rum-js/issues) with more details. We will prioritise it appropriately.

Thanks,  
Vignesh

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [October 2, 2020, 10:01am UTC](https://discuss.elastic.co/t/angular-elastic-apm-rum-init-source-maps-code-completion-in-ide-ngrx/245829/7 "2020-10-02T10:01:50Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.