Instrumenting React component using withTransaction doesn't work

[Sayaka]

Kibana version : 7.3.2

Elasticsearch version : 7.3.2

APM Server version : 7.3.2

APM Agent language and version : 4.2.2

Browser version : 77.0.3865.90

Original install method (e.g. download page, yum, deb, from source, etc.) and version : cannot recall

Fresh install or upgraded from other version? 7.1.1

Is there anything special in your setup? For example, are you using the Logstash or Kafka outputs? Are you using a load balancer in front of the APM Servers? Have you changed the index pattern, generated custom templates, changed agent configuration etc.

No

Description of the problem including expected versus actual behavior. Please include screenshots (if relevant):
I am trying to instrument a React component using "withTransaction", but it doesn't work. My code is something like:

initialization

import { init as initApm } from '@elastic/apm-rum'
export const apm = initApm({
  serviceName: <serviceName>,
  serverUrl: <serverUrl>,
  debug: true
});

Home.js

import { withTransaction } from '@elastic/apm-rum-react'

class Home extends React.Component {
  render () {
    return <div>Home</div>;
  }
}

export default withTransaction("Home component", "component")(Home);

I enabled the debug flag, and transactions of the type of "page-load" are detected. However, I don't see any logs for "withTransaction".

Can anyone give me some advice what i should do?

[Hamidreza (Hamidreza Jahtalabziabari)]

Hi @Sayaka,

Thanks for reaching out.

The issue you're facing is most likely a result of an internal filter to discard transactions with no spans. You should see a log entry in your console about the transaction being discarded. We're considering ways to improve this behaviour.

The component in this case doesn't generate any spans (for example doesn't make any http requests). Furthermore, the duration of the transaction would be very small if the agent would capture it. I suggest to use the withTransaction on components that generate spans.

You can also manually create a span on the current transaction:

let tr = apm.getCurrentTransaction()

if (tr) {
  var span = tr.startSpan('name','type')
}


// .....

if (tr && span) {
  span.end()
  tr.end()
}

Cheers,
Hamid

[Sayaka]

Hi @Hamidreza,

Thank you very much for your quick reply. I understand how it works.

The reason why I tried with the simple component is because withTransaction didn't work with Redux. In my case, it seems like the transaction catches the start of spans(http requests), but doesn't catch the end of spans.

The log

TransactionService.startSpan GET http://localhost:3001/.....
TransactionService.addTask task1
TransactionService.removeTask task1

In order to make it work, I need to tell the transaction the end of the spans. Is this correct?

Thank you,
Sayaka

[Hamidreza (Hamidreza Jahtalabziabari)]

Hi @Sayaka,

This could potentially be a bug in the agent, since if the agent starts a span it should end it as well. You shouldn't need to end spans that are created by the agent.

Could I ask you to open an issue on our Github repo, possibly with code examples to reproduce this?

Cheers,
Hamid

[Sayaka]

Hi Hamidreza, I will try to do it. Thank you for your help.