# Is it possible to obtain User-Centric Metrics with Custom Transactions?

**URL:** <https://discuss.elastic.co/t/is-it-possible-to-obtain-user-centric-metrics-with-custom-transactions/267707>\
**Category:** APM\
**Tags:** rum\
**Created:** [March 18, 2021, 5:33pm UTC](https://discuss.elastic.co/t/is-it-possible-to-obtain-user-centric-metrics-with-custom-transactions/267707 "2021-03-18T17:33:34Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![randy\_a](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/randy_a/32/85982_2.png) [@randy\_a](https://discuss.elastic.co/u/randy_a)\
**Post date:** [March 18, 2021, 5:33pm UTC](https://discuss.elastic.co/t/is-it-possible-to-obtain-user-centric-metrics-with-custom-transactions/267707/1 "2021-03-18T17:33:34Z")

</div>

Hi there, I'm a front-end developer with limited experience, therefore I'm a bit stuck at the moment.

I've applied Elastic RUM for the front-end (Angular) part of our single-page application. Our use case is to obtain performance metrics when users are traversing / clicking through the application. Unfortunately, because it is a single-page application, the user-centric metrics obtained during page-load don't suffice. We don't make use of the Angular router either.  
From reading the documentation I figured I could use Custom Transactions to obtain user-centric metrics:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/3/7/374ef0cfa68186624bc61468dd7b1e3239b44ac2.png)

However, when attempting to use the code above an error is thrown, referring to { blocking: true } at line 4:

```auto
public createCustomEvent(data: eventData, event: string): void {
    const transaction = apm.startTransaction(event, 'custom event', { managed: true });
    if (transaction) {
      const span = transaction.startSpan('async-task', 'app', { blocking: true })
      if (span) {
        setTimeout(() => {
          span.end()
          /**
           * This would also end the managed transaction once all the blocking spans are completed and
           * transaction would also contain other timing information and spans similar to auto
           * instrumented transactions like `page-load` and `route-change`.
           */
        }, 1000)
      }
    }
    const url = 'URL_ADDRESS';
    if (transaction) {
    const httpSpan = transaction.startSpan('GET ' + url, 'external.http');
      if (httpSpan) {
        fetch(url)
        .then((resp) => {
            if (!resp.ok) {
            apm.captureError(new Error(`fetch failed with status ${resp.status} ${resp.statusText}`));
            }
            apm.addLabels(this.convertToLabels(data));
            httpSpan.end();
            transaction.end();
        });
      }
    }
  }

```

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/8/0/80d074679dba3bcf653af2ba8fa0b03865720501.png)

This error is correct, because this is what the interface SpanOptions looks like:

```auto
    interface SpanOptions {
      /**
      * undocumented, might be removed in future versions
      */
      startTime?: number
      sync: boolean
    }

```

I tried replacing 'blocking' with 'sync', but this had no effect.

Am I on the right track here, or is it simply not possible to use Custom Transactions to obtain user-centric metrics?

---

<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:** [March 18, 2021, 6:35pm UTC](https://discuss.elastic.co/t/is-it-possible-to-obtain-user-centric-metrics-with-custom-transactions/267707/2 "2021-03-18T18:35:16Z")

</div>

Hi @randy_a,

The issue is we are not exposing the type information for the new Blocking Transaction and Span API we have added recently. I have created an issue in the agent to fix that - [expose blocking transaction/span type information in typings file · Issue #995 · elastic/apm-agent-rum-js · GitHub](https://github.com/elastic/apm-agent-rum-js/issues/995)

However, it should not block you and you can use `any` type to fix the error for time being until the next release is done to expose these typings.

```auto
const span = transaction.startSpan('async-task', 'app', { blocking: true } as any)

```

The custom transactions with `managed: true` would capture all timing information for requests and also other available user centric metrics like Long tasks, User Timing API, etc.

Please do let us know if you need any other help.

Thanks,  
Vignesh

---

<div class="post-metadata">

**Author:** ![randy\_a](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/randy_a/32/85982_2.png) [@randy\_a](https://discuss.elastic.co/u/randy_a)\
**Post date:** [March 19, 2021, 1:58pm UTC](https://discuss.elastic.co/t/is-it-possible-to-obtain-user-centric-metrics-with-custom-transactions/267707/3 "2021-03-19T13:58:20Z")

</div>

Thank you for the -swift- response @vigneshshanmugam!

The `any` type did indeed fix the error, thanks!  
However, changing my custom transaction to `managed: true` hasn't captured any user centric metrics yet, so I must be doing something wrong.

When it's a custom transaction like this, I receive the data as expected after clicking a button with `labels.name: Selecteren`.

```auto
public createCustomEvent(data: eventData, event: string): void {
    const transaction = apm.startTransaction(event, 'custom event');
    const url = 'URL_ADDRESS';
    if (transaction) {
      const httpSpan = transaction.startSpan('GET ' + url, 'external.http');
      if (httpSpan) {
        fetch(url)
        .then((resp) => {
            if (!resp.ok) {
              apm.captureError(new Error(`fetch failed with status ${resp.status} ${resp.statusText}`));
            }
            apm.addLabels(this.convertToLabels(data));
            httpSpan.end();
            transaction.end();
        });
      }
    }
  }

```

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/3/1/31cb031376e27dd8321167e01bcfec988a88d6b9.png)

When changing my Custom Transaction to a Managed Transaction I expected to do something like this (from reading: [Custom Transactions | APM Real User Monitoring JavaScript Agent Reference [5.x] | Elastic](https://www.elastic.co/guide/en/apm/agent/rum-js/current/custom-transactions.html)):

```auto
public createManagedEvent(data: eventData, event: string): void {
    const transaction = apm.startTransaction(event, 'custom event', { managed: true });
    const url = 'URL_ADDRESS';
    if (transaction) {
      const span = transaction.startSpan('async-task', 'app', { blocking: true } as any )
      if(span) {
        setTimeout(() => {
          const httpSpan = transaction.startSpan('GET ' + url, 'external.http');
          if (httpSpan) {
            fetch(url)
            .then((resp) => {
                if (!resp.ok) {
                apm.captureError(new Error(`fetch failed with status ${resp.status} ${resp.statusText}`));
                }
                apm.addLabels(this.convertToLabels(data));
                httpSpan.end();
                transaction.end();
            });
          }
          span.end()
          /**
          * This would also end the managed transaction once all the blocking spans are completed and
          * transaction would also contain other timing information and spans similar to auto
          * instrumented transactions like `page-load` and `route-change`.
          */
        }, 1000);
      }
    }
  }

```

But this gives me pretty much the same output as before, with no user-centric metrics such as firstContentfulPaint / longtask/etc. data:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/7/6/7648cba9b3da1651a55f1fd25b83873237676574.png)

I'd really appreciate it if you could tell me what I'm doing wrong.

---

<div class="post-metadata">

**Author:** ![randy\_a](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/randy_a/32/85982_2.png) [@randy\_a](https://discuss.elastic.co/u/randy_a)\
**Post date:** [March 21, 2021, 1:42pm UTC](https://discuss.elastic.co/t/is-it-possible-to-obtain-user-centric-metrics-with-custom-transactions/267707/4 "2021-03-21T13:42:10Z")

</div>

Okay, I've been over it during the weekend and I think I'm grasping it a bit more.

I think all I have to do is adjust my original Custom Event like this to turn it into a Managed Event:

```auto
public createManagedEvent(data: eventData, event: string): void {
  const transaction = apm.startTransaction(event, 'managed event', { managed: true});
  const url = 'URL_ADDRESS';
  if (transaction) {
    const httpSpan = transaction.startSpan('GET ' + url, 'external.http', { blocking: true } as any);
    if (httpSpan) {
      fetch(url)
      .then((resp) => {
          if (!resp.ok) {
          apm.captureError(new Error(`fetch failed with status ${resp.status} ${resp.statusText}`));
          }
          apm.addLabels(this.convertToLabels(data));
          httpSpan.end();
          transaction.end();
      });
    }
  }
}

```

This does give me a bit more output in the Trace Sample visualization:

 ![kibana_28](https://us1.discourse-cdn.com/elastic/original/3X/0/a/0a4606bfb9b6a4648aa229d13c52ddbedf9aee12.png)

I suppose Long Tasks and User Timing would show up in this waterfall picture above?

I was hoping I could get user-centric metrics such as First Input Delay and First Contentful Paint, but after diving deeper into the topic I think this is pretty difficult data to gather from our Single-Page-Application.

---

<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:** [March 23, 2021, 4:08am UTC](https://discuss.elastic.co/t/is-it-possible-to-obtain-user-centric-metrics-with-custom-transactions/267707/5 "2021-03-23T04:08:41Z")

</div>

Hi @randy_a ,

Metrics like First Input Delay and First Contentful paint are reported for the initial page load navigation (hard navigation) which is why they show up for page-load transaction and not for subsequent transactions like `route-change` (soft navigation). The only metrics that you should be able to see for custom managed transactions would be `ResourceTiming, UserTiming and Longtasks` if available and reported by the browser.

You can double check if browsers report those metrics during the lifetime of the managed transaction by checking chrome devtools or by using the `Performance` API.

Thanks,  
Vignesh

---

<div class="post-metadata">

**Author:** ![randy\_a](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/randy_a/32/85982_2.png) [@randy\_a](https://discuss.elastic.co/u/randy_a)\
**Post date:** [March 23, 2021, 7:36pm UTC](https://discuss.elastic.co/t/is-it-possible-to-obtain-user-centric-metrics-with-custom-transactions/267707/6 "2021-03-23T19:36:04Z")

</div>

Thanks @vigneshshanmugam , appreciate the feedback!

One last question though, are you 100% certain that `route-changes` don't show metrics such as First Input Delay and First Contentful Paint?  
I'm asking because another (front-end) team within our company has also implemented Elastic RUM and unlike us, their project does make use of angular routing. When I look at their APM transactions I see those paths/routes and they do show First Input Delay/First Contentful Paint when I inspect them.

So good news for them at least. 😉

---

<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:** [March 25, 2021, 2:56pm UTC](https://discuss.elastic.co/t/is-it-possible-to-obtain-user-centric-metrics-with-custom-transactions/267707/7 "2021-03-25T14:56:39Z")

</div>

Hmmm Interesting, So when using the Angular package, we use the Angular route events to listen for all different SPA navigations, so it could be related to that.

But for the metrics itself, you can check this document - [Supported Technologies | APM Real User Monitoring JavaScript Agent Reference [5.x] | Elastic](https://www.elastic.co/guide/en/apm/agent/rum-js/current/supported-technologies.html#user-centric-metrics). All metrics like FCP, LCP, FID measure the load responsiveness and does not really work for route-change events.

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:** [April 22, 2021, 2:57pm UTC](https://discuss.elastic.co/t/is-it-possible-to-obtain-user-centric-metrics-with-custom-transactions/267707/8 "2021-04-22T14:57:32Z")

</div>

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