diff --git a/docs/platforms/javascript/common/session-replay/configuration.mdx b/docs/platforms/javascript/common/session-replay/configuration.mdx index f8942c516459e..a765b917c859c 100644 --- a/docs/platforms/javascript/common/session-replay/configuration.mdx +++ b/docs/platforms/javascript/common/session-replay/configuration.mdx @@ -158,3 +158,17 @@ replayIntegration({ mutationLimit: 1500, }); ``` + +## Custom breadcrumbs + +Our SDKs allow you to send custom breadcrumbs, which will appear in the Replay Details UI alongside existing breadcrumbs. To learn how to send custom breadcrumbs, [read the docs here](/enriching-events/breadcrumbs/#customize-breadcrumbs). Note that any custom breadcrumbs you send will be reflected in both the Issue Details breadcrumbs UI and the Replay Details breadcrumbs tab. + +All custom breadcrumbs in the Replay Details will appear grey, and can be identified by the title "Custom" and the terminal logo. + +In Replay Details, the breadcrumb `message` will take precedence over the `data` property. If the `message` property is set, then the string will be displayed like this: + +![Custom breadcrumb example with message](./img/message-custom-breadcrumb.png) + +If `message` is not set, then the breadcrumb will display the `data` property by default. For example: + +![Custom breadcrumb example with data](./img/data-custom-breadcrumb.png) \ No newline at end of file diff --git a/docs/platforms/javascript/common/session-replay/img/data-custom-breadcrumb.png b/docs/platforms/javascript/common/session-replay/img/data-custom-breadcrumb.png new file mode 100644 index 0000000000000..31e879d715490 Binary files /dev/null and b/docs/platforms/javascript/common/session-replay/img/data-custom-breadcrumb.png differ diff --git a/docs/platforms/javascript/common/session-replay/img/message-custom-breadcrumb.png b/docs/platforms/javascript/common/session-replay/img/message-custom-breadcrumb.png new file mode 100644 index 0000000000000..ee2d73b0a6b3c Binary files /dev/null and b/docs/platforms/javascript/common/session-replay/img/message-custom-breadcrumb.png differ diff --git a/docs/product/explore/session-replay/web/replay-details.mdx b/docs/product/explore/session-replay/web/replay-details.mdx index 57fe3da246ba6..f996e8c84855c 100644 --- a/docs/product/explore/session-replay/web/replay-details.mdx +++ b/docs/product/explore/session-replay/web/replay-details.mdx @@ -15,6 +15,7 @@ Every replay has a detailed view that contains the embedded video player and ric * **Breadcrumbs:** The replay breadcrumbs show when key user interactions took place, specifically: user clicks (including rage and dead clicks), user inputs, [page navigations, page loads](/product/performance/transaction-summary/#what-is-a-transaction), as well as [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs) set by the organization and [Web Vitals](/product/insights/web-vitals/). Web Vitals are augmented with the selector to help users identify which elements are affecting their Web Vital scores. User clicks (including rage and dead clicks), are augmented with surrounding HTML source code to help users understand which event was targeted. These breadcrumbs are synced with the replay player and will auto-scroll as the video plays. - Some [breadcrumb types](/product/issues/issue-details/breadcrumbs/) visible in **Issue Details** are not 1:1 to the replay breadcrumbs list. The trail of events typically seen in the Issue Details page are now displayed in the Console and Network components of the **Replay Details** page. + - To learn more about how custom breadcrumbs are rendered, [read the docs here](configuration/#custom-breadcrumbs). - **Timeline:** This is the section at the bottom of the **Replay Details** page that illustrates where significant events (such as errors, rage clicks, and user interactions) happen over the course of the replay. This allows users to easily scrub to key events by dragging across the timeline. It also visually conveys the amount of time that took place between events and has a zoom functionality so you can easily zoom-in to distinguish between events that happen close together.