Custom transactions not showing in dashboard


I am trying to implement RUM APM in our frontend application. We use React SPA and first thing I noticed is that only initial page load is being recorded. To overcome that I added request interceptor to axios config in order to create custom transaction for each request but unfortunately it doesn't work. Nothing is shown in the dashboard.


import { init as initApm } from "@elastic/apm-rum";
const apm = initApm({
  serviceName: "admin-dashboard",
  serviceVersion: "v1.0.0",
  environment: "local",
  serverUrl: "-- NOT SHARING --",

export default apm;

index.js contains

apm.setInitialPageLoadName("Admin Homepage")

axios interceptor

  private invoke<T>(
    method: string,
    url: string,
    data?: any,
    options?: IInvokeOptions,
    defaultResponseType = "json"
  ) {
    const transaction = apm.startTransaction(`API Request`, 'custom', { managed: true });
    const span = apm.startSpan(`${method} ${url}`, "external.http", { blocking: true });

      (response) => {

        if (transaction) {

        return response;

And in logs I get

The only transaction in elastic dashboard is "Admin Homepage" one which was set under initial page load name.

Any ideas what I am doing wrong or better ways to implement APM in SPA application?

Thanks in advance!

Hi @covid19

Thanks for reaching out!

After checking the code and the logs attached everything seems fine from browser perspective. I have a couple of questions, though.

  1. Could you check if the rum agent is sending data after those transactions end?

In your network tab you should see something like:

  1. By default the dashboard only shows page-load transactions that's why you might not be seeing anything else, could you check if you have available the "custom" option in the selector?


Hi, thanks for answering.

Yes, I can see events being sent in network tab, that should be fine.

I actually didn't notice that type "page-load" is pre-selected. Actually for me it is hardcoded and I cannot change it.

When I leave this dashboard and make a query over all APM services I can see "custom" transaction exists in my dashboard.

Hi @covid19 ,

It is weird to see the value hardcoded rather than seeing a dropdown with options.

Could you copy here the HTML code associated with "type:page-load"?

I have additional questions to ask:

  • What browser are you using? Could you check if the value appears also hardcoded in a different browser?
  • What version of the Elastic Stack do you have installed?


Hey, I checked multiple browsers and it looks the same.


<label class="euiFormLabel euiFormControlLayout__prepend">Type: page-load</label>

Elastic Stack version: 7.12.0

1 Like

7.1 is EOL and no longer supported. Please upgrade ASAP.

(This is an automated response from your friendly Elastic bot. Please report this post if you have any suggestions or concerns :elasticheart: )

I created a new deployment with, I guess, latest version 7.16.0 and dashboard looks a bit different but most important thing I can see dropdown now!


Glad to hear it!

The selector was added in the release 7.13.0

  • Moves the transaction type selector to the search bar #96685

Thanks for help!

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