ref(replay): add docs about custom breadcrumbs (#12180)

* ref(replay): add docs about custom breadcrumbs

* updates

* fix title

Author: michellewzhang

docs/platforms/javascript/common/session-replay/configuration.mdx

@@ -158,3 +158,19 @@ 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](/platforms/javascript/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 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)
+
+The title of the breadcrumb will be the breadcrumb `category` that you set. If no `category` is set, then we will use the breadcrumb `message`. If that doesn't exist, we'll use the `description`. The last fallback with be a default title of "Custom".

docs/platforms/javascript/common/session-replay/img/data-custom-breadcrumb.png

@@ -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](/platforms/javascript/session-replay/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.