feat(breadcrumbs): Update issue details breadcrumbs docs (GA) (#10685)

* ✏️ Update breadcrumb docs

* ✏️ Apply suggestions from code review

Co-authored-by: Liza Mock <[email protected]>

* 💄 Update docs again for new design

* ✅ Update 404'd docs link

---------

Co-authored-by: Liza Mock <[email protected]>

docs/product/issues/issue-details/breadcrumbs/index.mdx

@@ -1,61 +1,45 @@
 ---
 title: Using Breadcrumbs
-description: "Learn about using breadcrumbs on the Issue Details page to help resolve issues."
+description: "Learn about using breadcrumbs on the Issue Details page to help debug faster."
 sidebar_order: 40
 ---
 
 Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an issue. These events are very similar to traditional logs, but can record more rich structured data.
 
-SDKs automatically start recording breadcrumbs by enabling integrations. To learn how to do this for your platform, select the platform from the dropdown at the top of the page, then review the breadcrumbs documentation for that platform.
+SDKs automatically start recording breadcrumbs by enabling integrations. To learn how to do this for your platform, select it from the dropdown at the top of the left hand nav. You'll be taken to the breadcrumb documentation specific to the platform you use.
 
-If an error event provides a trail, [sentry.io](https://sentry.io) displays the breadcrumbs on the **Issue Details** page:
+If an error event provides a trail, you'll see the breadcrumbs on the **Issue Details** page in [Sentry.io](https://sentry.io/orgredirect/organizations/:orgslug/issues/) displays .
 
-![Breadcrumbs section](./img/breadcrumbs-section.png)
+![Breadcrumbs section](../img/issue-breadcrumbs.png)
 
 ## Breadcrumbs Display
 
-Each part of the breadcrumb displays in a separate row and each row includes the following details: Type, Category, Description, Level, and Time.
+You'll see a few of the breadcrumbs that may be available for the event in the issue "Details" tab. To access the rest of them, click the "View All" button at the bottom of the section. This will open a slide out drawer where you can search, filter, sort, and change the time display for all available breadcrumbs.
 
-Type
+Here are all the ways you can narrow down what you see:
+- **Search**: Shows only breadcrumbs that match the query. Matches can occur on `type`, `category`, `message` and `data`.
+- **Filter**:  Filters by the associated `type`.
+- **Sort**: Determines whether breadcrumbs are shown by Newest or Oldest first. (Your sort preference will be saved to the browser.)
+- **Time Display:** Determines how breadcrumb timestamps are displayed, either as absolute timestamps (respecting user preferences for a 24-hour clocks/timezone), or relative to the first breadcrumb in the list. If a relative timestamp appear negative, it means that it took place before the top-most breadcrumb in the list. (Your time display preference will be saved to the browser.)
 
-A semi-internal attribute `type` can control the type of the breadcrumb. By default, all breadcrumbs are recorded as `default`, which makes them appear as a `Debug` entry, but Sentry provides other [types](https://develop.sentry.dev/sdk/event-payloads/breadcrumbs/#breadcrumb-types) that influence how the breadcrumbs are rendered.
+![Breadcrumbs drawer](./img/breadcrumbs-drawer.png)
 
-Category
 
-The category of the event. This data is similar to a logger name, and helps you understand the area in which an event took place, such as auth.
+## Breadcrumb Attributes
 
-Description
+Each breadcrumb is composed of the following:
 
-A description is either:
+- **Type**: `type` is a semi-internal attribute that controls how breadcrumbs are categorized. If left unchanged, all breadcrumbs are recorded as `default`, but Sentry provides other [types](https://develop.sentry.dev/sdk/event-payloads/breadcrumbs/#breadcrumb-types) that each have their own color/icon in the UI.
 
-- Message: A string describing the event, rendered as text with all whitespace preserved. It's often used as a drop-in for a traditional log message.
+- **Category**: The event category. This data is similar to a logger name and helps you understand where an event took place, such as `auth`.
 
-- Data: A key-value mapping of event metadata. This is often used instead of a message, but may be used in addition to one. [sentry.io](https://sentry.io) displays all the data sent.
+- **Message**: A string describing the event, rendered as text with all whitespace preserved. It's often used as a drop-in for a traditional log message.
 
-Level
+- **Data**: A key-value mapping of a breadcrumb's arbitrary data. This is useful for attaching structured information related to the breadcrumb, like IDs or variable values.
 
-The severity of an event. The level is set to one of five values, which are — in order of severity — fatal, error, warning, info, and debug.
+- **Level**: The severity of an event. The level is set to one of five values: fatal, error, warning, info, and debug, in order of severity.
 
-Time
+- **Time**: A timestamp showing when the breadcrumb occurred. The format is either a string, as defined in [RFC 3339](https://tools.ietf.org/html/rfc3339), or a numeric value representing the number of seconds that have elapsed since the Unix epoch.
 
-A timestamp representing when the breadcrumb occurred. The format is either a string, as defined in [RFC 3339](https://tools.ietf.org/html/rfc3339), or a numeric (integer or float) value representing the number of seconds that have elapsed since the Unix epoch. By default, [sentry.io](https://sentry.io) displays the timestamp as an absolute time. You can click the toggle to update the display to relative time:
-
-![Switch time format button](./img/breadcrumbs-relative-time-switch.png)
 
 Learn more detailed information about breadcrumb data in the [Breadcrumbs Interface developer documentation](https://develop.sentry.dev/sdk/event-payloads/breadcrumbs/).
-
-## Filtering the Display
-
-You can filter the list of breadcrumbs by type and level. The provided types and levels are displayed as options in the filter:
-
-![Filter By Types/Levels](./img/breadcrumbs-filter-by.png)
-
-## Full-Text Search
-
-If you type anything in the filter search field, [sentry.io](https://sentry.io) filters out all fragmented data and attempts to find a match to the search criteria. If it finds one, the match is highlighted. Full-text search also works in conjunction with Filter By.
-
-## Sorting
-
-By default, breadcrumbs are sorted from newest to oldest. If you prefer a different ordering, use the dropdown to the right of the search bar. Your sort preference will be saved to the browser.
-
-![Breadcrumbs sort dropdown](./img/breadcrumbs-sort.png)

docs/product/issues/issue-details/index.mdx

@@ -97,15 +97,18 @@ The Stack Trace section of the page shows you the line of code that the event er
 
 It's the most important piece of information that the Sentry grouping algorithm uses to group events into one issue. You can also customize how events are grouped. Learn more about customized grouping in [Issue Grouping](/concepts/data-management/event-grouping/).
 
-## Breadcrumbs
+## Session Replay
+If you’ve enabled [Session Replay](/product/explore/session-replay/), you’ll have access to a replay preview on the page (if there’s one associated with the event). Replays can be associated with both frontend and [backend errors](/product/explore/session-replay/getting-started#replays-for-backend-errors), as long as distributed tracing is set up. From here you can navigate to the rest of the replays recorded for this issue, or inspect this replay on the [Replay Details](/product/explore/session-replay/web/replay-details/) page.
 
-[Breadcrumbs](/product/issues/issue-details/breadcrumbs/) provide a history and timeline leading up to the error event. These can include things like HTTP requests, log statements from the console or server, and DOM (document object model) events in JavaScript.
+![Session Replay](./img/issue-replay.png)
+
+## Breadcrumbs
 
 ![Breadcrumbs](./img/issue-breadcrumbs.png)
 
-You can set your own <PlatformLink to="/enriching-events/breadcrumbs/">breadcrumbs</PlatformLink> to make them more useful for debugging.
+[Breadcrumbs](/product/issues/issue-details/breadcrumbs/) provide a history and timeline leading up to the error event. These can include things like HTTP requests, log statements from the console or server, and DOM (document object model) events in JavaScript.
 
-If you’ve enabled [Session Replay](/product/explore/session-replay/), you’ll see a replay preview under Breadcrumbs if there’s one associated with the event you’re viewing. Replays can be associated with both frontend and [backend errors](/product/explore/session-replay/getting-started#replays-for-backend-errors) (as long as distrubted tracing is set up). Clicking on the replay preview will lead you to the [Replay Details](/product/explore/session-replay/web/replay-details/) page.
+You can set your own <PlatformLink to="/enriching-events/breadcrumbs/">breadcrumbs</PlatformLink> to make them more useful for debugging
 
 ## Tags