# Instrumenting React component using withTransaction doesn't work

**URL:** <https://discuss.elastic.co/t/instrumenting-react-component-using-withtransaction-doesnt-work/210437>\
**Category:** APM\
**Tags:** rum\
**Created:** [December 3, 2019, 11:30pm UTC](https://discuss.elastic.co/t/instrumenting-react-component-using-withtransaction-doesnt-work/210437 "2019-12-03T23:30:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sayaka](https://avatars.discourse-cdn.com/v4/letter/s/d78d45/32.png) [@Sayaka](https://discuss.elastic.co/u/Sayaka)\
**Post date:** [December 3, 2019, 11:30pm UTC](https://discuss.elastic.co/t/instrumenting-react-component-using-withtransaction-doesnt-work/210437/1 "2019-12-03T23:30:05Z")

</div>

**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?

---

<div class="post-metadata">

**Author:** ![Hamidreza](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/hamidreza/32/21369_2.png) [@Hamidreza](https://discuss.elastic.co/u/Hamidreza)\
**Post date:** [December 4, 2019, 9:31am UTC](https://discuss.elastic.co/t/instrumenting-react-component-using-withtransaction-doesnt-work/210437/2 "2019-12-04T09:31:04Z")

</div>

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:

```auto
let tr = apm.getCurrentTransaction()

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

// .....

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

```

Cheers,  
Hamid

---

<div class="post-metadata">

**Author:** ![Sayaka](https://avatars.discourse-cdn.com/v4/letter/s/d78d45/32.png) [@Sayaka](https://discuss.elastic.co/u/Sayaka)\
**Post date:** [December 4, 2019, 7:57pm UTC](https://discuss.elastic.co/t/instrumenting-react-component-using-withtransaction-doesnt-work/210437/3 "2019-12-04T19:57:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Hamidreza](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/hamidreza/32/21369_2.png) [@Hamidreza](https://discuss.elastic.co/u/Hamidreza)\
**Post date:** [December 6, 2019, 9:45am UTC](https://discuss.elastic.co/t/instrumenting-react-component-using-withtransaction-doesnt-work/210437/4 "2019-12-06T09:45:45Z")

</div>

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](https://github.com/elastic/apm-agent-rum-js), possibly with code examples to reproduce this?

Cheers,  
Hamid

---

<div class="post-metadata">

**Author:** ![Sayaka](https://avatars.discourse-cdn.com/v4/letter/s/d78d45/32.png) [@Sayaka](https://discuss.elastic.co/u/Sayaka)\
**Post date:** [December 6, 2019, 4:42pm UTC](https://discuss.elastic.co/t/instrumenting-react-component-using-withtransaction-doesnt-work/210437/5 "2019-12-06T16:42:03Z")

</div>

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

---

<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:** [December 27, 2019, 12:42pm UTC](https://discuss.elastic.co/t/instrumenting-react-component-using-withtransaction-doesnt-work/210437/6 "2019-12-27T12:42:04Z")

</div>

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