Basic example of Span with RUM?

Elastic Observability APM
1

I am trying to test the span feature of RUM. So i wrote this simple code:

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="utf-8" />
	<title>Span</title>
	<script src="https://unpkg.com/@elastic/apm-rum@5.12.0/dist/bundles/elastic-apm-rum.umd.min.js"></script>
   <script>
const apm = window.elasticApm.init({
  serviceName: 'rumexperiment',
  serverUrl: 'http://192.168.0.101:8200',
  serviceVersion: '0.90'
});
const sendSpan = (msg, isBlocking) => {
  //const transaction = apm.startTransaction(msg + '-transaction', 'user-interaction');
  const transaction = apm.getCurrentTransaction();

  //const span = apm.startSpan(msg, 'custom', {blocking: isBlocking});
  const span = transaction.startSpan(msg, 'custom', {blocking: isBlocking});

  setTimeout(() => {
	span.end();
	transaction.end();
	console.log('End Span');
  }, 1000);
};
   </script>
  </head>
  <body>
	<button id="blocking" name="blocking" onClick="sendSpan('MySpanBlocking', true)">Send Span - Blocking</button>
	<button id="non_blocking" name="non_blocking" onClick="sendSpan('MySpanNonBlocking', false)">Send Span - Not Blocking</button>
  </body>
</html>

I visit the web page in either firefox or chrome. Then I go to my Kibana>Observability>Services>rumexperiment and I can see that Kibana APM has recorded my web page visit. Pressing refresh in my browser for my web page successfully transmits a log to Kibana APM and i see each page load in the Transaction widget.

However, when I press any of the buttons on the web page, that information is NOT sent over to Kibana Observability Services rumexperiment. I do not see any of my span details sent over. Can someone tell me how to test a basic example of a span or what i did wrong in my code above?

2

Hi @learningelastic,

Are there any errors in the DevTools console? It's a long shot but it's probably worth confirming that you're using a supported browser as per the supported technologies

It might be worth trying out some of the debugging steps to see if you can see an error. But alternatively you could be being caught out by the agent discarding transactions with no spans:

The RUM agent automatically instruments click event listeners that are registered by the application. The click events are captured as user-interaction transactions. However, to avoid sending too many user-interaction transactions to the server, the agent discards transactions with no spans (e.g. no network activity). Furthermore, if the click interaction results in route change, then a route-change transaction would be captured instead.

The transaction name can be influenced either by using the name or preferably the data-transaction-name HTML attribute.

Do share any debug information that you manage to collect.

Hope that helps!

3

thanks, i’m still working through this, and here’s what i discovered so far:

i do not see any errors in the developer tools of either Firefox or Chrome. In both firefox and chrome, i always see a 202 status for post submissions to a http://192.168.0.101:8200/intake/v2/rum/eventsevery time i click either of the buttons.

But when I look in Kibana, sometimes the span appears, and sometimes it doesn’t. I can’t consistently reproduce either outcome. When the span DOES appear in kibana, it would be found under: Transactions>Click - button[“blocking”], and then shown in the graph here:

image
image979×590 41.5 KB

But I can’t consistently reproduce this outcome. I’m not sure why it works sometimes and not other times. Maybe one out of every 20 random button clicks, does my span actually appear in Kibana

@carly.richmond

4

Hi @learningelastic

If you see these requests it means the transactions have been sent to the APM server. So we can check if the documents are stored in ES by doing a search in the discover section. Just use a simple query to get the documents that have transaction.name property. Put this filter in the filter box.

transaction.name: *

Another way to check it is if you go to Observability → Traces menu. Since the RUM transactions are the start of the trace you will see them listed there.

I did some tests and found a similar issue. I see the transaction documents in discover and in traces menu but they do not appear in the service summary. I’ll check with the team.

PS: The code you showed is straight forward but I would suggest to use blocking spans always. Click transaction is managed and we need a blacking span to keep it open. ref: Custom Transactions | APM RUM JavaScript agent

Cheers,

David