feat(issue-details): Update issue details docs for streamlined experience (#12480)

Author: roggenkemper

docs/product/issues/issue-details/img/issue-details-breakdown.png

@@ -4,82 +4,75 @@ sidebar_order: 10
 description: "Learn how to navigate the Issue Details page to help you efficiently triage an issue."
 ---
 
-The **Issue Details** page helps you to gain further insight into the source of the issue and the impact it has on your application's users. The main area of the page displays information about a specific event that's part of an issue. The top panel and right-hand sidebar of the page display a summary of all the events grouped together in this issue:
+The **Issue Details** page helps you gain further insight into the source of the issue and the impact it has on your application's users.
 
-![Issue details](./img/issue-details-page.png)
+![Issue Details breakdown](./img/issue-details-breakdown.png)
 
-You can view information about a specific error event that's part of an issue on the <SandboxLink scenario="oneIssue" projectSlug="react">Issue Details</SandboxLink> page. You can also navigate between the events of an issue using the event navigator.
+The header contains high-level information about the issue such as the error message, total counts of how often it has been seen, and how many users it has affected. Actions such as assigning, resolving, and archiving are also here.
 
-In the right hand sidebar, [sentry.io](https://sentry.io) reflects a summary that includes information such as how often the <SandboxLink scenario="oneIssue" projectSlug="react">issue</SandboxLink> has occurred in the last 24 hours and the last 30 days, as well as the last time and the first time the issue was seen. If the issue is linked to any GitHub or Jira issues, that's displayed here as well. Lastly, there is a facet map, which shows the distribution of values for the tags for all events included in the issue. All of these values are based on the environment that you've selected in the environment dropdown.
+Beneath the header is the event graph, showing a distribution of events and errors. You can use the search bar to filter which events are shown. Tags are shown and can be opened from here too.
 
-## Issue Tabs
+The sidebar shows more about the issue and includes information such as the last time and the first time the issue was seen, if the issue is linked to any GitHub or Jira issues, issue activity and comments, participants and viewers, and Sentry AI features.
 
-![Issue Tabs](./img/issue-tabs.png)
+The main area of the page displays information about a specific event that's part of an issue, including the stack trace, breadcrumbs, tags, and more. You can also see information about replays, attachments, and feedback related to the issue here.
 
-This page displays the "Details" tab when it first opens, but several other tabs are available depending on issue category:
+## Event Search
 
-- **Activity** - A history of activity for the event where team members can share comments.
-- **User Feedback** - Any feedback collected from users through the <PlatformLink to="/user-feedback/">SDK's user feedback</PlatformLink>.
-- **<PlatformLink to="/enriching-events/attachments/">Attachments</PlatformLink>** - Any additional files stored, such as config, log, or screenshot files that are related to the error event.
-- **Tags** - More detailed information about any tags sent with the events included in the issue.
-- **All Events** - A list of all the error events included in the issue.
-- **Merged Issues** - A list of error issues that have been merged with this one.
-- **Similar Issues** - A list of error issues that have a similar stack trace [that you can merge](/concepts/data-management/event-grouping/merging-issues/).
-- **Replays** – A list of [replays](/product/explore/session-replay/) tied to error events included in the issue.
+The embedded search bar allows you to search for events using any of the [event properties](/concepts/search/searchable-properties/events). Environment and time period can also be changed. Once the search is updated, the counts and graph below will be updated. Event navigations such as recommended, first, and last, and All Events will also be updated to only show matching events.
 
-## Issue Categories & Page Details
+## Trends & Aggregates
 
-There are two categories of issues: [error issues](/product/issues/issue-details/error-issues/) and [performance issues](/product/issues/issue-details/performance-issues/). Depending on the issue category and available event data, the **Issue Details** page displays some combination of the following sections:
+The event and user counts represent the counts given the search, environments, or time period selected above. This is different from the counts in the header which are the total counts across the lifetime of the issue.
 
-- **Event Navigator** - Allows you to select between the latest, oldest, or a recommended issue event and navigate between events in sequence.
-- **Trace Navigator** - An abbreviated view of the related [trace](/product/sentry-basics/tracing/distributed-tracing) for the current transaction.
-- **Suspect Commits** - A commit that's been identified as potentially having caused an error event.
-- **Event Highlights** - Specific [tags](#tags) and [context](#contexts) values that are useful for debugging.
-- **Stack Trace** - Shows you the line of code that the event errored on.
-- **Span Evidence** - Information about the performance problem in the context of the current event.
-- **Breadcrumbs** - Provide a history and timeline leading up to the error event and are customizable.
-- **<PlatformLink to="/enriching-events/tags/">Tags</PlatformLink>** - Searchable key/value string pairs providing information, such as the browser or device.
-- **Screenshot** - Screenshot taken when a user experiences an error, an exception, or a crash; only available on [certain SDKs](/product/issues/issue-details/error-issues/#screenshots).
-- **<PlatformLink to="/enriching-events/context/">Contexts</PlatformLink>** - Non-searchable key/value data that helps provide context (haha) in debugging the issue.
-- **Event Grouping Information** - Provides details of how Sentry fingerprinted the event into the group.
+The graph is similarly affected by any search and can be toggled between user and event counts by the selection on the left. Releases and feature flag data can be hidden by clicking on the field in the upper right corner.
 
-Learn more about what's included an issue detail for each of these in [Error Issues](/product/issues/issue-details/error-issues/) and [Performance Issues](/product/issues/issue-details/performance-issues/).
+A few tags are shown as a preview on the page, but to see more, you can either click into any preview tag to see more details or click "All Tags" to see all tags for an issue. Tags are not affected by the search filters above.
 
-## Event Navigator
+## Sidebar
 
-![Event Navigator](./img/event-navigator.png)
+The first and last time the issue has been seen will be displayed here. These values will depend on your environment selection and will be updated if you change the environments. If you have releases set up, the first and last release where the issue was seen will be shown
 
-By default, the **Issue Details** page displays the "Recommended" event with the most context to help you solve the issue. Sentry uses the following criteria in determining the recommended event:
+The solutions hub contains features from [Sentry AI](/product/issues/issue-details/sentry-ai) that help you understand and fix issues.
 
-- **Recency**: The recommended event is never more than 7 days older than the latest event.
-- **Relevance**: The recommended event takes into account what terms you've searched for on your way to the issue.
-- **Content**: The recommended event prioritizes events that contain debugging tools such as replays, profiles, and traces.
+If you have [issue tracking](/organization/integrations/issue-tracking) set up, integrations or linked issues will appear.
 
-To view other events, you can use the dropdown to skip to the latest or oldest event, or view the full list of events. You can change the default event in your [User Settings](https://sentry.io/settings/account/details/#defaultIssueEvent).
+The activity section shows a chronological lifetime of the issue. Information including assignments, regressions, escalations, and more can be found here. Any comments users leave on an issue will also appear here.
 
-## Trace Navigator
+Participants and viewers of an issue will be shown along with the time that users viewed the issue, which can be found if you hover over a user or see all viewers.
 
-![Trace Navigator](./img/trace-navigator.png)
+Similar and merged issues allow you to learn more about and control [grouped issues](/product/issues/grouping-and-fingerprints). Similar Issues can be used to find any other issues in your project that are similar to the one you are viewing. Merged issues shows any issues that have been merged into the issue you are viewing.
 
-The trace navigator (which you'll see right below the Event ID), is a timeline view that shows any other issues that might be part of the current event's [trace](/product/sentry-basics/tracing/distributed-tracing). The trace navigator shows up to 100 additional issues and you can click on any of them to view their details. Seeing (and being able to toggle between) multiple issues connected to a single event can be helpful for figuring out what went wrong. Note that the trace navigator is only available for issues that are part of a trace and have more than one issue.
+## Issue Content
 
-- **Current Issue**: The current event you're viewing, which is larger than the other events in the trace.
-- **Error Issue**: Represented with a solid, closed red dot. The shade varies from lighter to darker, with darker shades representing more events occurring at the same timestamp.
-- **Performance Issue**: Represented with an open dot.
+In addition to events, information about replays, attachments, and feedback can be found from the page.
 
-### Trace-related Issues
+- **Replays** – A list of [replays](/product/explore/session-replay/) tied to error events included in the issue.
+- **User Feedback** - Any feedback collected from users through the <PlatformLink to="/user-feedback/">SDK's user feedback</PlatformLink>.
+- **<PlatformLink to="/enriching-events/attachments/">Attachments</PlatformLink>** - Any additional files stored, such as config, log, or screenshot files that are related to the error event.
 
-![Trace Related Issue](./img/trace_related_issue.png)
+While attachments are affected by the search filters on the page, replays and user feedback are not.
 
-Sometimes the Trace Navigator will be replaced by a Trace-related Issue. A Trace-related Issue is a different issue that occurred during the same trace as the event in view. This is useful for understanding the context of the current issue and may help you identify its root cause. A Trace-related Issue allows the developer to quickly navigate between the two related events.
+## Event Navigation
 
-## Suspect Commits
+By default, the **Issue Details** page displays the "Recommended" event with the most context to help you solve the issue. Sentry uses the following criteria in determining the recommended event:
 
-![Suspect Commit](./img/suspect-commit.png)
+- **Recency**: The recommended event is never more than 7 days older than the latest event.
+- **Relevance**: The recommended event takes into account what terms you've searched for on your way to the issue.
+- **Content**: The recommended event prioritizes events that contain debugging tools such as replays, profiles, and traces.
 
-A _suspect commit_ is a commit that's been identified as potentially having caused the error event. If you've configured [suspect commits](/product/issues/suspect-commits/), these are displayed. This allows you to immediately investigate commits that are likely to have generated the issue. The author of the suspect commit is also suggested as an assignee for the issue.
+To view other events, you can use the dropdown to skip to the latest or oldest event, or view the full list of events. You can change the default event in your [User Settings](https://sentry.io/settings/account/details/#defaultIssueEvent).
+
+In addition, you can scroll between events chronologically or view all events. All event navigations will respect any search filter on the page, including search queries, environments, or date filters.
+
+## Event Actions
+
+Relevant actions for specific events can be found here including copying the link to the event or event ID. You can also view the JSON of the event here.
+
+## Event Details
 
-## Event Highlights
+Depending on the issue category and available event data, the Issue Details page displays some combination of the following sections:
+
+### Event Highlights
 
 ![Event Highlights](./img/issue-highlights.png)
 
@@ -89,38 +82,67 @@ By default, Sentry will surface a few common tags and context values based on yo
 
 ![Editing Event Highlights](./img/issue-highlights-edit.png)
 
-## Stack Trace
+### Stack Trace
 
 The Stack Trace section of the page shows you the line of code that the event errored on.
 
 ![Exception](./img/issue-exception.png)
 
 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/).
 
-## 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.
+### Suspect Commits
+
+![Suspect Commit](./img/suspect-commit.png)
 
-![Session Replay](./img/issue-replay.png)
+A _suspect commit_ is a commit that's been identified as potentially having caused the error event. If you've configured [suspect commits](/product/issues/suspect-commits/), these are displayed. This allows you to immediately investigate commits that are likely to have generated the issue. The author of the suspect commit is also suggested as an assignee for the issue.
 
-## Breadcrumbs
+### Breadcrumbs
 
 ![Breadcrumbs](./img/issue-breadcrumbs.png)
 
 [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.
 
 You can set your own <PlatformLink to="/enriching-events/breadcrumbs/">breadcrumbs</PlatformLink> to make them more useful for debugging
 
-## Tags
+### Trace Preview
+
+An abbreviated view of the related [trace](/product/sentry-basics/tracing/distributed-tracing) for the current transaction.
+
+![Trace Related Issue](./img/trace_related_issue.png)
+
+Sometimes the trace will be supplemented by a Trace-related Issue. A Trace-related Issue is a different issue that occurred during the same trace as the event in view. This is useful for understanding the context of the current issue and may help you identify its root cause. A Trace-related Issue allows the developer to quickly navigate between the two related events.
+
+### 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.
+
+### HTTP Request
+
+Information from the HTTP request including the query string, cookies, and headers.
+
+### Packages
+
+Packages used in your application and their versions.
+
+### Additional data
+
+Any additional data sent from the SDK.
+
+### Span Evidence
+
+Information about the performance problem in the context of the current event.
+
+### Tags
 
 <Include name="common-imgs/tags" />
 
 [Tags](/concepts/search/) are key/value string pairs that are both indexed and searchable. For example, a tag provides you with information such as the browser, device, or user associated with the event. Tags are the diagnostic information sent by the SDK for the individual event.
 
-You can use the tag tabs to filter these event tags by category ("All", "Custom", "Application", "Other").  If you hover over a tag and then click "...", you can choose to view more events or issues with that tag value (and sometimes other information associated with that tag, such as the release itself). Sentry will display tags containing '`.`' characters as a tree structure to make things a bit more readable, but searching should always use the full tag name (for example, `organization.slug` instead of `slug`).
+You can use the tag tabs to filter these event tags by category ("All", "Custom", "Application", "Other"). If you hover over a tag and then click "...", you can choose to view more events or issues with that tag value (and sometimes other information associated with that tag, such as the release itself). Sentry will display tags containing '`.`' characters as a tree structure to make things a bit more readable, but searching should always use the full tag name (for example, `organization.slug` instead of `slug`).
 
 The tags displayed in the main section of the page are specific to the event that you're viewing. The tags displayed in the right-hand sidebar are a summary of all tag values for all events included in the issue. You can set your own tags to make them more useful for debugging as described in <PlatformLink to="/enriching-events/tags/">Customize Tags</PlatformLink>.
 
-## Screenshot
+### Screenshot
 
 Sentry provides the ability to take a screenshot and include it as an attachment when a user experiences an error, an exception, or a crash. Screenshot attachments sent as part of an event are displayed in this section. This feature only applies to SDKs with a user interface. It's supported for the following SDKs:
 
@@ -133,7 +155,7 @@ Sentry provides the ability to take a screenshot and include it as an attachment
 - [Unity](/platforms/unity/enriching-events/screenshots/)
 - [Unreal Engine](/platforms/unreal/enriching-events/screenshots/)
 
-## Contexts
+### Contexts
 
 ![Contexts Section](./img/issue-contexts-section.png)
 
@@ -143,7 +165,7 @@ The issue details page only displays context for the individual event, and conte
 
 You can set up your own context items to collect useful debugging information in your next event, as described in <PlatformLink to="/enriching-events/context/">Structured Context</PlatformLink>.
 
-## Feature Flags
+### Feature Flags
 
 <Alert title="Currently in Beta">
 
@@ -160,3 +182,7 @@ Enabling a [change tracking integration](/product/explore/feature-flags/#change-
 ![Feature Flag Release Chart](./img/ff-release.png)
 
 Enabling both a change tracking integration and a evaluation tracking integration will enable suspect feature flag detection. Sentry will attempt to identify feature flags which might have caused an error event and highlight them for review.
+
+### Event Grouping Information
+
+Provides details of how Sentry fingerprinted the event into the group.