Skip to content

Commit

Permalink
feat(issues): Add highlights and remove duplicate data (#10042)
Browse files Browse the repository at this point in the history
- Adding a section describing the new Event Highlights page on issue details
- Removed duplicate data from /issues/issue-details/ and /issues/issue-details/error-issues/, most images/content lives on the root page now
- Updates screenshots of context and tags for these pages
- Removes sections for trace details in favor of 'Contexts'
- [Bonus] Fixed a bug where the table of contents would encode a %20 in the anchor links and not scroll due to an extra space.

---------

Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com>
  • Loading branch information
leeandher and vivianyentran committed May 16, 2024
1 parent 324eb07 commit 7fbe5a4
Show file tree
Hide file tree
Showing 18 changed files with 67 additions and 108 deletions.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
75 changes: 5 additions & 70 deletions docs/product/issues/issue-details/error-issues/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,13 @@ description: "Learn how to use the information on the Issue Details page to debu

An _error issue_ is a grouping of error events. What counts as an error varies by platform, but in general, if there's something that looks like an exception, it can be captured as an error in Sentry. Sentry automatically captures errors, uncaught exceptions, and unhandled rejections, as well as other types of errors, depending on platform. We group similar error events into issues based on a fingerprint. For error issues, a fingerprint is primarily defined by the event stack trace.

The **Issue Details** page helps you to gain further insight into the source of an error issue and the impact it has on your application's users. The main area of the page displays information about a specific error event that's part of an issue. The top panel and right-hand sidebar of the page display a summary of all the error events grouped together in this issue:
![Issue details](../img/issue-details-page.png)

![Issue details](./img/issue_details_page.png)
## Subscribe to Issue Alerts
To subscribe to an error issue and receive alerts about it, click the bell icon, then fine tune [workflow notifications](/product/alerts/notifications/#workflow-notifications) related to the issue in **User Settings > Notifications**.

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. To subscribe to an error issue and receive alerts about it, click the bell icon, then fine tune [workflow notifications](/product/alerts/notifications/#workflow-notifications) related to the issue in **User Settings > Notifications**. The event description is displayed just below the issue title along with an icon representing the error level of the event:
## Error Levels
The event description is displayed just below the issue title along with an icon representing the error level of the event:

![Error level icon in issue details](./img/error-level-icon-2.png)

Expand All @@ -25,73 +27,6 @@ The level can be:

In the right hand sidebar, [sentry.io](https://sentry.io) reflects a summary that includes information such as how often the error <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. You can also use this section to link to existing GitHub or Jira issues. Learn more about linking issues in [Integrations](/organization/integrations/). Lastly, there is a facet map, which shows the distribution of values for the tags for all events included in the error issue. All of these values are based on the environment that you've selected in the environment dropdown.

In addition, this page provides several other key pieces of information explained below.

## Trace Navigator

![Trace Navigator](./img/trace-navigator.png)

The trace navigator (which displays below the date) is an abbreviated view of the related [trace](/product/sentry-basics/tracing/distributed-tracing) for the current transaction. It displays up to six nodes, each representing different groups of the event's trace:

- **Root**: Starting transaction
- **Ancestor**: Events that are descendants of the root, and are directly related to the current event
- **Parent**: Event that directly started the current event
- **This Event**: Node representing the current event being viewed
- **Children**: Events that the current event directly started
- **Descendants**: Future generations of events created by children of this event

A node will be red if it is associated with errors.
Click "View Full Trace" to display the [Trace View](/product/sentry-basics/tracing/trace-view).

## Suspect Commits

![Suspect Commit](./img/suspect-commit.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 error issue.

## Tags

<Include name="common-imgs/tags" />

[Tags](/product/sentry-basics/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.

The tags displayed in the main section of this page are specific to the event that you're viewing. In contrast, 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

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 a 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:

- [.NET Xamarin](/platforms/dotnet/guides/xamarin/)
- [Android](/platforms/android/enriching-events/screenshots/)
- [Flutter](/platforms/flutter/enriching-events/screenshots/)
- [iOS](/platforms/apple/guides/ios/enriching-events/screenshots/)
- [JavaScript Electron](/platforms/javascript/guides/electron/enriching-events/screenshots/)
- [React Native](/platforms/react-native/enriching-events/screenshots/)
- [Unity](/platforms/unity/enriching-events/screenshots/)

## Stack Trace

The "Stack Trace" section of the page displays the stack trace, which 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 error issue. You can also customize how error events are grouped. Learn more about customized grouping in [Issue Grouping](/concepts/data-management/event-grouping/).

## Breadcrumbs

[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:

![Breadcrumbs](./img/issue-breadcrumbs.png)

You can set your own <PlatformLink to="/enriching-events/breadcrumbs/">breadcrumbs</PlatformLink> to make them more useful for debugging.

If you’ve enabled [Session Replay](/product/session-replay/), you’ll see a replay preview under Breadcrumbs if there’s one associated with the error event you’re viewing. Replays can be associated with both frontend and [backend errors](/product/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/session-replay/replay-details/) page.

## Trace Details

![Trace Details](./img/trace-details.png)

[Tracing](/product/sentry-basics/tracing/distributed-tracing/) augments your existing error data by capturing interactions between your software systems. In the "Trace Details" section, you can click the "Search by Trace" button to see all the events that share the same trace ID.

## Event Grouping Information

Expand Down
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file modified docs/product/issues/issue-details/img/trace-navigator.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7fbe5a4

Please sign in to comment.