Some custom spans not included in payload in Angular + @elastic/apm-rum

[zzye-projects]

I’m integrating @elastic/apm-rum manually into an Angular app to track custom transactions and spans. I’m not using apm-rum-angular.

I’ve noticed that under certain conditions, some spans or even the transaction itself are not sent to the APM server, even though console logging shows that they were created and ended properly.

async function doSomething(transaction: Transaction) {
  const spanA = transaction?.startSpan('SpanA');
  let result: any;

  try {
    result = await callA(); // some async call
  } finally {
    spanA?.end();
    console.log('spanA', spanA);
  }

  if (result && result.value === 'true') {
    const spanB = transaction?.startSpan('SpanB');
    try {
      await callB(); // some other async call
    } finally {
      spanB?.end();
      console.log('spanB', spanB);
    }
  }

  transaction?.end();
  console.log('transaction', transaction);
}

Observed behavior
I’ve added an apm.addFilter() to log the payload before it’s sent to the APM server, so I can confirm what data is actually being transmitted.

• Logging always occurs in order: spanA, spanB, transaction.
• spanA and spanB’s parentId matches the transaction ID.
• If the condition passes (result.value === 'true'), the transaction is sent to APM but only includes spanB.
• If the condition does not pass, spanA logs correctly, but the transaction is not sent at all; no errors appear in DevTools.
• Making spanA blocking causes spanB to be undefined and the transaction is never sent.

Expected behavior

All spans and transactions that are started and ended should appear in the APM server payload, regardless of conditional logic.

Question
Has anyone seen similar behavior with conditional spans? Could there be a timing issue with ending spans before a transaction?

[david-luna]

Hi @zzye-projects

Thanks for giving details on the issue

I’ve noticed that under certain conditions...
I see you described conditions within the function body but I think I would also be good to know some external conditions like:

• what's the agent's config?
• what kind of transaction are you passing to the function? one managed by the agent or a manual one? how do you pass it to the function?
• which angular version are you on?

Cheers
David

[zzye-projects]

Hi @zzye-projects

Thanks for giving details on the issue

I’ve noticed that under certain conditions...
I see you described conditions within the function body but I think I would also be good to know some external conditions like:

• what's the agent's config?
• what kind of transaction are you passing to the function? one managed by the agent or a manual one? how do you pass it to the function?
• which angular version are you on?

Cheers David

@david-luna Thanks for responding to this:

1. what's the agent's config?

const apmConfig = {
    serviceName: 'mock-service-name',
    serviceVersion: 'mock-version',
    serverUrl: 'https://mock-url.com', // this does work because some transactions do make it through
    environment: 'mock-environment',
    transactionSampleRate: 1,
    pageLoadTransactionName: window.location.pathname,
    logLevel: ('debug' as Loglevel)
}

apm.init(apmConfig)

2. what kind of transaction are you passing to the function? one managed by the agent or a manual one? how do you pass it to the function?

transaction gets passed apm.startTransaction(transactionName, 'custom') // default is managed=false I believe

3. which angular version are you on?
   Angular 19
   @elastic/apm-rum: ^5.17.0

I've also notice that if I put a delay after result = await... then spanA does get send to the apm server. I am not sure whether there is a race condition or if the rum agent automatically drops too short spans (something I read online) even though I have sampling rate=1.

try {
  result = await callA(); // some async call
  new promise(resolve => setTimeOut(resolve, 500)) // with the inserting of this line spanA always get send to apm server
}

Thanks in advance!