OpenCensus Web trace instrumentation for the initial page load

Usage no npm install needed!

<script type="module">
  import opencensusWebInitialLoad from 'https://cdn.skypack.dev/@opencensus/web-initial-load';


OpenCensus Web Initial Load

Gitter chat

For overview and usage info see the main OpenCensus Web readme.

This package contains the logic for the initial load page tracing.

The library is in alpha stage and the API is subject to change.


This package is currently exporting the trace associated to the initial load trace which generates a root span for the user navigation experience until the browser load event fires. This root span, will have several child spans corresponding to the loaded resources such as CSS or JS scripts. These spans are generated via the browser's Navigation Timing and Resource Timing APIs. Also, the Long Tasks browser API is used to generate spans named as long js task for event loops taking more than 50 ms.

Additionally, the sampling decision for OpenCensus Web is done here and a global initial load span context is stored to be passed around OC Web. This allows other packages to use the same sampling decision or relate their data to the initial load trace. This is the case for a @opencensus/web-instrumentation-zone.


Currently the primary intended usage of OpenCensus Web is to collect spans from the resource timing waterfall of an initial page load and trace on-page user interactions with a series of features like automatic tracing for clicks and route transitions, custom spans, and browser Performance API data. See the OpenCensus Web readme for details.

In the future we would like to make it easy to generate custom spans that will be conveniently exported to the OpenCensus Agent. This package provides the exporter needed to hook up those custom generated spans to be sent to the agent and ultimately then to a trace storage backend. Although it's not fully wired up and supported yet, you're welcome to poke around the source code and try to use it!

Useful links


Apache 2.0 - See LICENSE for more information.