Replay Recordings

A replay recording consists of a list of instructions for the replayer to play back for the viewer. This page aims to document the custom events that are used on top of the events provided by rrweb, the recording library that powers Session Replay.

The recording event is an object with the following required properties:

type

EventTypeEnum The type describes what type of event it is. See the enum below.

EventTypeEnum {
  DomContentLoaded,
  Load,
  FullSnapshot,
  IncrementalSnapshot,
  Meta,
  Custom,
  Plugin,
}

timestamp

float The timestamp (in milliseconds) at which the event occurs

data

unknown data schema is dependent on the type. View the base types or Sentry's custom types.

Custom Events

Sentry custom events augment the replay with additional context in order to help the user debug issues. Custom events have the following format for the data property of the event:

tag

string The tag is used to describe the "type" of custom event. This will determine how the event gets used in the UI.

payload

object The payload is similar to the upper level data attribute, whose schema is dependent on the tag.

In addition to the TypeScript references linked above, the following sections will describe the expected payload for custom events.

options

This recording event is used to record the SDK configuration options. This should only be sent on the first segment as we do not expect the options to change throughout the lifecycle of a replay. See this issue for more context around the decision to send this as a recording event rather than part of the "replay_event". Note that these options are generally used internally to debug rather than a customer-facing feature (e.g. there is no way to query/filter replays using these options).

The payload for "options" is a record of configuration name -> configuration value. There is no defined schema as options can vary by SDKs.

{
  "type": 5,
  "timestamp": 1709218280301,
  "data": {
    "tag": "options",
    "payload": {
      "shouldRecordCanvas": false,
      "sessionSampleRate": 1,
      "errorSampleRate": 1,
      "useCompressionOption": true,
      "blockAllMedia": false,
      "maskAllText": false,
      "maskAllInputs": false,
      "useCompression": false,
      "networkDetailHasUrls": false,
      "networkCaptureBodies": true,
      "networkRequestHasHeaders": true,
      "networkResponseHasHeaders": true
    }
  }
}

breadcrumb

Breadcrumbs are named as such because they are intercepted from the web SDK and forwarded as a custom recording event. They have the same structure as describe in breadcrumbs interface.

{
  "type": 5,
  "timestamp": 1710853999781,
  "data": {
    "tag": "breadcrumb",
    "payload": {
      "timestamp": 1710853999.781,
      "type": "default",
      "category": "navigation",
      "data": {
        "from": "/issues/4893218638/",
        "to": "/performance/trace/b6e75da452bf40ee8330af41c5989545/"
      }
    }
  }
}

performanceSpan

Similar to breadcrumbs, "performanceSpan" has a similar interface to Spans. The following is an example of a network request made in the browser. We have additional instrumentation to capture request and response payloads when configured to do so.

{
  "type": 5,
  "timestamp": 1710854008431,
  "data": {
    "tag": "performanceSpan",
    "payload": {
      "op": "resource.fetch",
      "description": "https://us.sentry.io/api/0/projects/foo/javascript/events/eea92bc02315448591e159d8138ef3e8/owners/",
      "startTimestamp": 1710854008.431,
      "endTimestamp": 1710854009.234,
      "data": {
        "method": "GET",
        "statusCode": 200,
        "request": {
          "headers": {
            "content-type": "application/json",
            "accept": "application/json; charset=utf-8",
            "sentry-trace": "b07d0e356aa1477bb279d9fe5680fcd0-83881f299ca64b4f-1"
          }
        },
        "response": {
          "headers": {
            "content-length": "36",
            "content-type": "application/json"
          },
          "size": 36,
          "body": {
            "owners": [],
            "rule": null,
            "rules": []
          }
        }
      }
    }
  }
},

Mobile Replay Events

Mobile replays are captured as video rather than a series of mutations. In order to support mobile replays, the following custom event is required:

{
  "type": 5,
  "timestamp": 1710854008431,
  "data": {
    "tag": "video",
    "payload": {
      "duration": 5000,
      "segmentId": 0
    }
  }
}

Additional Events

Mobile replays follow the same rrweb protocol, but because mobile replays are captured by video, a majority of the rrweb events do not apply. Outlined below are the ones that do.

Meta Event

This should be emitted at the start of a replay (i.e. on the first segment) and when the user's viewport dimensions change.

{
  "type": 4,
  "timestamp": 1710854008431,
  "data": {
    "href": "file://screen",
    "width": 360,
    "height": 800
  }
}

Touch Interactions