Session replay plugin
The LaunchDarkly observability features are available for early access
Observability features in the LaunchDarkly UI are publicly available in early access.
The SDK observability plugins are designed for use with the in-app observability features. They are currently in available in Early Access and APIs are subject to change until a 1.x version is released. They are available in conjunction with the JavaScript, React Web, and Vue SDKs.
Sign up for early access to observability features for server-side SDKs
If you are interested participating in the Early Access Program for our upcoming observability plugins for server-side SDKs, sign up here.
Overview
This topic documents how to get started with the LaunchDarkly session replay plugin, which is compatible with the LaunchDarkly client-side JavaScript-based SDKs.
The session replay plugin provides a way to record and replay end-user sessions from your application. This plugin does not include any of the error monitoring, logging, or tracing functionality of the observability plugin.
SDK quick links
LaunchDarkly’s SDKs are open source. In addition to this reference guide, we provide source, API reference documentation, and a sample application:
For use in client applications only
This session replay plugin is for LaunchDarkly client-side JavaScript-based browser SDKs.
To learn more about LaunchDarkly’s different SDK types, read Client-side, server-side, and edge SDKs.
Prerequisites and dependencies
This reference guide assumes that you are somewhat familiar with the LaunchDarkly JavaScript SDK.
The session replay plugin is compatible with the JavaScript SDK, version 3.7.0 and later. It is also compatible with the React Web SDK, version 3.7.0 and later, and the Vue SDK, version 2.4.0 and later.
Do you need information about Angular, Remix, Svelte, or other frameworks?
LaunchDarkly does not offer SDKs for all languages or frameworks. If you’re using another framework, such as Angular, Remix, or Svelte, you may be able to use the JavaScript SDK instead. Install the session replay plugin and initialize it when you initialize the client for the JavaScript SDK.
To request support for a specific language or framework, start a Support ticket.
Most customers who use the session replay plugin also use the observability plugin. However, there is no dependency between the plugins, and you can use only one or the other if you like.
Get started
Follow these steps to get started using the observability plugin:
- Install the plugin
- Initialize the SDK client
- Configure the plugin options
- Explore supported features
- Review session replays in LaunchDarkly
Install the plugin
LaunchDarkly uses a plugin to the JavaScript SDK to provide observability.
The first step is to make both the SDK and the session replay plugin available as dependencies.
The observability plugin is available separately. To learn more, read Observability plugin.
Here’s how:
Then, import the plugin into your code:
Initialize the client
Next, initialize the SDK and the session replay plugin.
To initialize, you need your LaunchDarkly environment’s client-side ID. This authorizes your application to connect to a particular environment within LaunchDarkly. To learn more, read Initialize the client in the JavaScript SDK reference guide.
Here’s how to initialize the SDK and plugin:
You can also initialize the plugin before you initialize the SDK if you like. This may be helpful if you need observability data very early in your application’s lifecycle.
Here’s how:
Finally, you can optionally register the plugin after you initialize the SDK:
We do not recommend this option because you will miss observability data generated before you register the plugin.
Configure the plugin options
You can configure options for the session replay plugin when you initialize the SDK if you like. The plugin constructor takes an optional object with the configuration details.
Here is an example:
For more information on plugin options, read Client-side observability.
Set Context-Security-Policy (CSP)
If your application runs in an environment that enforces content security policies, you must set the Content-Security-Policy
(CSP) in your application to tell the browser how your page can interact with third-party scripts.
Here are the policies you need to set to use the session replay plugin:
connect-src: https://pub.observability.app.launchdarkly.com https://otel.observability.app.launchdarkly.com
: This policy allows connecting with LaunchDarkly servers to send recorded session data.worker-src: data: blob:
: This policy allows creating an inlined web worker initialized by thenpm
package for this plugin.
Your CSP definition may look something like this:
Alternatively, you can set the CSP in the HTML document response header Content-Security-Policy
. Check your initial app HTML document load for the header to make sure you are setting it to the desired value.
Explore supported features
The session replay plugin supports the following features. After the SDK and session replay plugin are initialized, you can access these from within your application.
Record canvas
The session replay plugin can record a snapshot bitmap of an HTMLCanvasElement
for WebGL capture. The plugin hooks into your WebGL render function after you paint to the WebGL context.
To set this up, pass the following options when you initialize the plugin:
Then, hook into your WebGL rendering code and call snapshot
:
To learn more, read snapshot
.
Manually control session recording
By default, sessions are automatically recorded after you initialize the session replay plugin. If you want to control recording manually, set manualStart
to true
in the plugin options:
Then, start session replay yourself:
To stop session replay:
To learn more, read start
and stop
.
Retrieve session URLs on the client
The session replay plugin also provides options for retrieving details about the current recorded session. This can be useful for building a custom integration with the session replay data.
getSession
returns details of the current recording session, including a URL to view the session, and a URL for the exact time the method is called, relative to the session recording. For example, suppose an error is thrown in your app and you want to save the session URL to another application. You can use the session details urlWithTimestamp
to set the player to the time when the error occurs.
Here’s how:
To learn more, read getSession
.
To determine whether the current session is recording, use getRecordingState
:
To learn more, read getRecordingState
.
Review session replays in LaunchDarkly
After you initialize the SDK and session replay plugin, your application automatically starts sending session replay data back to LaunchDarkly. You can review this information in the LaunchDarkly user interface. To learn how, read Observability and Session replay.
When the session replay plugin send replay data back to LaunchDarkly, it automatically injects several attributes, to provide additional help with searching for sessions in the LaunchDarkly user interface. To learn more, read Search.