OpenTelemetry Web Utils

Note: This is an experimental package under active development. New releases may include breaking changes.

This package contains classes and utils that are common for web use cases.

Installation

npm install --save @opentelemetry/web-common

Sessions

Sessions correlate multiple traces, events and logs that happen within a given time period. Sessions are represented as span/log attributes prefixed with the session. namespace. For additional information, see documentation in semantic conventions.

We provide a default implementation of managing sessions that:

• abstracts persisting sessions across page loads, with default implementation based on LocalStorage
• abstracts generating session IDs
• provides a mechanism for resetting the active session after maximum defined duration
• provides a mechanism for resetting the active session after a defined inactivity duration

Example:

const {
  createSessionSpanProcessor,
  createSessionLogRecordProcessor,
  createDefaultSessionIdGenerator,
  createSessionManager,
  SessionManager,
  DefaultIdGenerator,
  LocalStorageSessionStore
} = require('@opentelemetry/web-common');

// session manager
const sessionManager = createSessionManager({
  sessionIdGenerator: createDefaultSessionIdGenerator(),
  sessionStore: new LocalStorageSessionStore(),
  maxDuration: 7200, // 4 hours
  inactivityTimeout: 1800 // 30 minutes
});

// restore or start session
sessionManager.start();

// configure tracer
const tracerProvider = new WebTracerProvider({
  spanProcessors: [
    createSessionSpanProcessor(sessionManager),
  ]
});

// configure logger
const loggerProvider = new LoggerProvider({
  processors: [
    createSessionLogRecordProcessor(sessionManager),
  ]
});

The above implementation can be customized by providing different implementations of SessionStore and SessionIdGenerator.

Observing sessions

The SessionManager class provides a mechanism for observing sessions. This is useful when other components should be notified when a session is started or ended.

sessionManager.addObserver({
  onSessionStarted: (newSession, previousSession) => {
    console.log('Session started', newSession, previousSession);
  },
  onSessionEnded: (session) => {
    console.log('Session ended', session);
  }
});

Custom implementation of managing sessions

If you require a completely custom solution for managing sessions, you can still use the processors that attach attributes to spans/logs. Here is an example:

function getSessionId() {
  return 'abcd1234';
}

// configure tracer
const tracerProvider = new WebTracerProvider({
  spanProcessors: [
    createSessionSpanProcessor({
      getSessionId: getSessionId
    }),
  ]
});

// configure logger
const loggerProvider = new LoggerProvider({
  processors: [
    createSessionLogRecordProcessor({
      getSessionId: getSessionId
    }),
  ]
});

Useful links

• For more information on OpenTelemetry, visit: https://opentelemetry.io/
• For more about OpenTelemetry JavaScript: https://github.com/open-telemetry/opentelemetry-js
• For help or feedback on this project, join us in GitHub Discussions

License

Apache 2.0 - See LICENSE for more information.