Ask Miss O11y  

Ask Miss O11y: OpenTelemetry in the Front End: Tracing Across Page Load

By Jessica Kerr  |   Last modified on April 20, 2022

We want to measure the time that a user waits between pushing a button and seeing their result. The examples for creating a trace span only work within a single page, and the button triggers a page load. How can I do this?

Ah, good question! 

TL;DR: store the start time of the span, and then create the span on the new page.

Usually, you want to start a span, do some work, and then end the span. The whole span gets sent to your OpenTelemetry collector (and thence to Honeycomb) when you end it.

start and end of span

But when a page load happens, that span object is lost. Honeycomb never hears about it becausespan.end()wasn’t called.

page load

How can we deal with this?

session storage

Create the span only on the new page, where you can end it. But! Tell it the startTime explicitly, and give it a time that you pull from storage. Populate that storage when they push the button! This way you get a new span that started at button-push time, and you’re ready to end it.

In code, that looks like these two operations:

In the first page, when the button is pushed, store the time:


And in the second page, retrieve the time and turn it back into a Date:

const whenString = window.sessionStorage.getItem("when");
const when = new Date(Number(whenString));
const span = opentelemetry.trace.getTracer("my app")
    .startSpan("get report", { startTime: when });

That’s it. This is the simplest solution to a trace that crosses a page.

This does assume that it’s a single span by itself that you want to create. If we had an existing trace and wanted to continue it after a page load, we’d need to store the trace context in sessionStorage, too. Want to know how to do that, or anything else with observability? Ask Miss O11y


Related Posts

Tracing   Metrics   Ask Miss O11y  

Ask Miss O11y: To Metric or to Trace?

Dear Miss O11y, I remember reading quite interesting opinions from you about usage of metrics and traces in an application. Did you elaborate on those...

Observability   Ask Miss O11y  

Ask Miss O11y: Is There a Beginner’s Guide On How to Add Observability to Your Applications?

Dear Miss O11y, I want to make my microservices more observable. Currently, I only have logs. I’ll add metrics soon, but I’m not really sure...

Ask Miss O11y  

Ask Miss O11y: Error: missing ‘x-honeycomb-dataset’ header

Your API Key (in the x-honeycomb-team header) tells Honeycomb where to put your data. It specifies a team and an environment. Then, Honeycomb figures out...