How I can create a track button to track events like http

[alexandreservian]

Kibana version :7.6.2

APM Agent language and version : elastic/apm-rum@5.30.0

Browser version : google chrome 84.0.4147.105

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

Description of the problem including expected versus actual behavior. Please include screenshots (if relevant) :

Hi Guys, I need to create a track button. This button must sometimes handle with events http are request It has traceparent in your header. I need to send to apm-server one transaction with the name button in one transaction type call buttons. I want to know How I track any event http and handle only after the conclussion event http. Is there some tutorial for this? I need like this print:

Im trying to use apm.observe with transaction:end inside the useEffect in the button. However, When I created one transaction with startTransaction and I called transactions.end() it doesnt work, it doesnt call events api.

[vigneshshanmugam]

Hi @alexandreservian

The RUM agent automatically tracks all click user interactions and try to create a transaction with user-interaction as its type. Details are here https://www.elastic.co/guide/en/apm/agent/rum-js/master/supported-technologies.html#user-interactions

If you do want to replicate this behaviour, you can use the API startTransaction and create the click transactions manually.

  button.addEventListener('click', () => {
    const tr = apm.startTransaction('button-click', 'user-interaction');
    // do something which requests the http call which would be captured as span as part of the 
  // click transaction
    tr.end()
  })

Let us know if you need any help.

Thanks,
Vignesh

[alexandreservian]

Hello @vigneshshanmugam
OK, however, I do like this:

useEffect(() => {
    apm.observe('transaction:end', function(tras) {
      if (tras.type === 'query') {
        console.log(tras);
        const transaction = apm.startTransaction(
          'Application start 5',
          'button',
          {
            managed: true,
            canReuse: true
          }
        );
        transaction.end();
      }
    });
  }, []);

And, this example dont work, however, this another example works:

useEffect(() => {
    apm.observe('transaction:end', function(tras) {
      if (tras.type === 'query') {
        console.log(tras);
        const transaction = apm.startTransaction(
          'Application start 5',
          'button',
          {
            managed: true,
            canReuse: true
          }
        );
        afterFrame(() => transaction && transaction.detectFinish());
      }
    });
  }, []);

My question is: How do i send the traceId of the variable tras in this transaction? I want to add this previous traceId in current transaction to create the timeline with traceId first request http.

[alexandreservian]

The another question: You telled me APM JS does automatically tracks all click user interactions, but, how can I add one name for this transaction?Currently it is like this Click - body.
Other question is: the user-interaction can automatically tracks the events http trigger by himself ?

[vigneshshanmugam]

how can I add one name for this transaction?Currently it is like this Click - body .

You can observe for the transaction:end event as per your example and change the transaction name before the transaction events are reported to the server.

Other question is: the user-interaction can automatically tracks the events http trigger by himself ?

Its the other way around, Assume a user clicks on navigation menu of an e-commerce website, that click will render a new page issuing few HTTP requests. In this case, the RUM agent would capture all the information under Click-<button name> transaction and include all of the network activity ( HTTP requests, Resource requests) as spans for this transaction.

Does that help you?

Thanks,
Vignesh