Skip to main content
Skip to main content
Edit this page

Browser JS

The ClickStack browser SDK allows you to instrument your frontend application to send events to ClickStack. This allows you to view network requests and exceptions alongside backend events in a single timeline.

Additionally, it'll automatically capture and correlate session replay data, so you can visually step through and debug what a user was seeing while using your application.

This guide integrates the following:

  • Console Logs
  • Session Replays
  • XHR/Fetch/Websocket Requests
  • Exceptions

Getting started​


Install via package import (Recommended)

Use the following command to install the browser package.

Initialize ClickStack

Options​

  • apiKey - Your ClickStack Ingestion API Key.
  • service - The service name events will show up as in HyperDX UI.
  • tracePropagationTargets - A list of regex patterns to match against HTTP requests to link frontend and backend traces, it will add an additional traceparent header to all requests matching any of the patterns. This should be set to your backend API domain (ex. api.yoursite.com).
  • consoleCapture - (Optional) Capture all console logs (default false).
  • advancedNetworkCapture - (Optional) Capture full request/response headers and bodies (default false).
  • url - (Optional) The OpenTelemetry collector URL, only needed for self-hosted instances.
  • maskAllInputs - (Optional) Whether to mask all input fields in session replay (default false).
  • maskAllText - (Optional) Whether to mask all text in session replay (default false).
  • disableIntercom - (Optional) Whether to disable Intercom integration (default false)
  • disableReplay - (Optional) Whether to disable session replay (default false)

Additional configuration​

Attach user information or metadata​

Attaching user information will allow you to search/filter sessions and events in the HyperDX UI. This can be called at any point during the client session. The current client session and all events sent after the call will be associated with the user information.

userEmail, userName, and teamName will populate the sessions UI with the corresponding values, but can be omitted. Any other additional values can be specified and used to search for events.

Auto capture React error boundary errors​

If you're using React, you can automatically capture errors that occur within React error boundaries by passing your error boundary component into the attachToReactErrorBoundary function.

Send custom actions​

To explicitly track a specific application event (ex. sign up, submission, etc.), you can call the addAction function with an event name and optional event metadata.

Example:

Enable network capture dynamically​

To enable or disable network capture dynamically, simply invoke the enableAdvancedNetworkCapture or disableAdvancedNetworkCapture function as needed.

Enable resource timing for CORS requests​

If your frontend application makes API requests to a different domain, you can optionally enable the Timing-Allow-Originheader to be sent with the request. This will allow ClickStack to capture fine-grained resource timing information for the request such as DNS lookup, response download, etc. via PerformanceResourceTiming.

If you're using express with cors packages, you can use the following snippet to enable the header: