Custom transactions not showing in dashboard

[covid19 (Toni Bahčić)]

Hello,

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.

rum.js

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 });

    axios.interceptors.response.use(
      (response) => {

        if (transaction) {
          span.end();
          transaction.end();
        }

        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!

[Alberto_Delgado]

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:

2. 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?

Thanks,
Alberto

[covid19 (Toni Bahčić)]

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.

[Alberto_Delgado]

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?

Thanks,
Alberto

[covid19 (Toni Bahčić)]

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

HTML:

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

Elastic Stack version: 7.12.0

[system]

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 )

[covid19 (Toni Bahčić)]

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!

[Alberto_Delgado]

Hi,

Glad to hear it!

The selector was added in the release 7.13.0

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

[covid19 (Toni Bahčić)]

Thanks for help!