Distributed Tracing Feature for nested Iframes

Elastic Observability APM
,
1

Hello.
I'm owrking on setting up an APM RUM agent for a old-style website where you have iframes within iframes within iframes. I want to be able to see a collected trace timeline for the entire hierarchy of iframes. I have tried setting up the iframes with the same pageLoadTraceId and pageLoadSpanId, but I cannot see anything beyond one layer deep in the timeline. Is there anyway to get tracing across iframes shown in the tracing timeline?
See my example here: nested frame - CodeSandbox

3

Hi @Bjarke_Jensen,

Thanks for using the agent!

This is not something possible to do out of the box. Each iframe is independent of the other. Since most of the instrumentations we do are window APIs related, you would need to include the agent in every iframe. But in your particular case that wouldn't help either since this is a custom scenario.

If you want to collect the trace timeline for the entire hierarchy you would need to do a few manual steps. Communicate iframes with each other. For instance:

  • top window (the one containing the agent) creates the transaction
    • bear in mind that depending on your action (E.g. user click) the transaction can also be created automatically, and then you can refer to such transaction through getCurrentTransaction.
  • your logic within the iframe communicates the top window that a span should be created (passing the attributes you need).
  • the top window then will create a span and attach it to the transaction. It will reply back to the iframe with the span id.
  • once the process within the iframe ends. you should communicate again with the top frame saying that a span with a certain id (the one that you will send back) should end. Maybe you need to do some extra work to guarantee that all the messages between iframes take place in the expected order.
  • then the top frame will end such span.
  • keep doing the same with all the iframes involved in your flow.
  • once you know the whole flow ended, you can end the transaction.

On this Github issue there is an example of how to perform iframe communication.

Let me know if you need further help.

Thanks,
Alberto

4

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