Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
test Add @opencensus/web-instrumentation-zone-peer-dep (#147) Jul 31, 2019
LICENSE Update documentation (#152) Aug 6, 2019
package-lock.json Update dependency rimraf to v3 (#164) Aug 14, 2019
webpack.config.js Set up empty @opencensus/web-instrumentation-zone package. (#82) May 20, 2019

OpenCensus Web instrumentation zone for user interaction tracing

Gitter chat

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

This package generates OpenCensus Web model spans based on user interactions coming after initial page loads. This uses the library Zone.js to generate those spans. For that, the package imports the Zone.js library as hard dependency.

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


This package depends on @opencensus/web-instrumentation-zone-peer-dep which contains all the code related to on-page user interaction tracing. Then, this only exports all from that package and imports the Zone.js library added as hard dependecy.

Instrument your application with this package if your application does not already depends on Zone.js, this is the case for frameworks like React.

See the @opencensus/web-instrumentation-zone-peer-dep documentation for more details.


Custom spans

In addition to automatic user interaction tracing, it is possible to create your own spans for the tasks or code involved in a user interaction. Here is an example for JavaScript

import { tracing } from '@opencensus/web-instrumentation-zone';

function handleClick() {
  // Start child span which will be child of the current root span on the current interaction.
  // To make sure the span is attached to the root span, add this in code that the button is running.
  const childSpan = tracing.tracer.startChildSpan({
    name: 'name of your child span'
  // Do some operation...
  // Finish the child span at the end of it's operation

// Create a fake button to point out the custom span is created in the click handler.
const button = document.createElement('button');
button.onclick = handleClick;

Check the user interaction client example which instruments the package and create some custom spans.

Useful links


Apache 2.0 - See LICENSE for more information.

You can’t perform that action at this time.