Programatic way to indicate that a pageload / navigation transaction has completed

[bcoe]

Problem Statement

When setting duration on pageload / navigation transactions today, we use a heuristic approach to determine the timing

From internal conversation:

IIRC they end via a combination of idleTimeout, finalTimeout, and heartbeatInterval (docs), or a new transaction starting.

Being a heuristic, there are many opinions about what constitutes the completion of a pageload or navigation event. Rather than addressing all these alternate opinions, it would be interesting to give developers a programatic way to indicate that the pageload, or navigation, is complete.

Solution Brainstorm

I could imagine something like this:

Sentry.reportPageLoaded()

Similar to Time to Full Display is handled.

[Lms24]

I think it's worth exploring this direction. Essentially, such a function would be syntactic sugar around this code:

const rootSpan = getRootSpan(getActiveSpan())
if (rootSpan && spanToJSON(rootSpan).op === "pageload") {
  rootSpan.end();
}

which is not a lot but of course more unintuitive than calling reportPageLoaded(). However, it would also result in a bundle size increase for CDN bundle (or loader) users if we decided to add it to our CDN bundles in addition to NPM packages.

Importantly though: If we added this API, we'd also need to ensure that the pageload span is active until this function is called. Or IOW, we should deactivate all idle span heuristics to end the span. Which is another bundle size increase and makes this a bit more complex.