This is an example of how to use custom transactions and custom spans. Please also see API documentation.

Elastic APM uses the concept of transactions and spans to collect performance data. Spans are used to measure an operation and spans are grouped into what transactions.

By default Elastic APM JS agent collects some transactions (page-load transaction for example) and send them to apm-server, however if the current instrumentation doesn’t provide what you need, you can create custom transactions to fill the gaps.

Here is an example application using custom transactions:

import { init as initApm } from '@elastic/apm-rum'
var apm = initApm({
  serviceName: 'service-name',
  serverUrl: 'http://localhost:8200'
})

var transaction = apm.startTransaction('Application start', 'custom')
var url = 'http://example.com/data.json'
var httpSpan = transaction.startSpan('FETCH ' + url, 'http')
fetch(url)
  .then((resp) => {
    if (!resp.ok) {
      apm.captureError(new Error(`fetch failed with status ${resp.status} ${resp.statusText}`))
    }
    httpSpan.end()
    transaction.end()
  })