-
-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ref(feedback): move trace section to below replay and add section tit…
…le/icon (#77668) Ref #68481. Also refactors TraceDataSection to its own file. After: ![Screenshot 2024-09-17 at 3 58 31 PM](https://github.com/user-attachments/assets/1c0cbb21-8f35-46c2-82d6-ed3c485997ae) Before: ![Screenshot 2024-09-17 at 3 59 24 PM](https://github.com/user-attachments/assets/669e8ffd-3cce-4fb7-8f2e-2482c2e93565)
- Loading branch information
Showing
2 changed files
with
76 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
67 changes: 67 additions & 0 deletions
67
static/app/components/feedback/feedbackItem/traceDataSection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
import {useEffect} from 'react'; | ||
|
||
import Section from 'sentry/components/feedback/feedbackItem/feedbackItemSection'; | ||
import {IconSpan} from 'sentry/icons'; | ||
import {t} from 'sentry/locale'; | ||
import type {Event} from 'sentry/types/event'; | ||
import {trackAnalytics} from 'sentry/utils/analytics'; | ||
import useOrganization from 'sentry/utils/useOrganization'; | ||
import {TraceDataSection as IssuesTraceDataSection} from 'sentry/views/issueDetails/traceDataSection'; | ||
import {useTraceTimelineEvents} from 'sentry/views/issueDetails/traceTimeline/useTraceTimelineEvents'; | ||
|
||
/** | ||
* Doesn't require a Section wrapper. Rendered conditionally if | ||
* 1. there are 2 or more same-trace issues (timeline). | ||
* 2. there is 1 same-trace issue, different from crashReportId (issue link). | ||
*/ | ||
export default function TraceDataSection({ | ||
eventData, | ||
crashReportId, | ||
hasProject, | ||
}: { | ||
crashReportId: string | undefined; | ||
eventData: Event; | ||
hasProject: boolean; | ||
}) { | ||
// If there's a linked error from a crash report and only one other issue, showing both could be redundant. | ||
// TODO: we could add a jest test .spec for this ^ | ||
const organization = useOrganization(); | ||
const {oneOtherIssueEvent, traceEvents, isLoading, isError} = useTraceTimelineEvents({ | ||
event: eventData, | ||
}); | ||
const show = | ||
!isLoading && | ||
!isError && | ||
traceEvents.length > 1 && // traceEvents include the current event. | ||
(!hasProject || !crashReportId || oneOtherIssueEvent?.id === crashReportId); | ||
|
||
useEffect(() => { | ||
if (isError) { | ||
trackAnalytics('feedback.trace-section.error', {organization}); | ||
} else if (!isLoading) { | ||
if (traceEvents.length > 1) { | ||
trackAnalytics('feedback.trace-section.loaded', { | ||
numEvents: traceEvents.length - 1, | ||
organization, | ||
}); | ||
} | ||
if (hasProject && !!crashReportId && oneOtherIssueEvent?.id === crashReportId) { | ||
trackAnalytics('feedback.trace-section.crash-report-dup', {organization}); | ||
} | ||
} | ||
}, [ | ||
crashReportId, | ||
hasProject, | ||
isError, | ||
isLoading, | ||
oneOtherIssueEvent?.id, | ||
organization, | ||
traceEvents.length, | ||
]); | ||
|
||
return show && organization.features.includes('user-feedback-trace-section') ? ( | ||
<Section icon={<IconSpan size="xs" />} title={t('Data From The Same Trace')}> | ||
<IssuesTraceDataSection event={eventData} /> | ||
</Section> | ||
) : null; | ||
} |