diff --git a/static/app/components/feedback/feedbackItem/feedbackItem.tsx b/static/app/components/feedback/feedbackItem/feedbackItem.tsx
index d8d2ac4f034e54..e814ba315897f5 100644
--- a/static/app/components/feedback/feedbackItem/feedbackItem.tsx
+++ b/static/app/components/feedback/feedbackItem/feedbackItem.tsx
@@ -97,11 +97,9 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
/>
{eventData ? (
-
+
+
+
) : null}
} title={t('Tags')}>
diff --git a/static/app/components/feedback/feedbackItem/traceDataSection.tsx b/static/app/components/feedback/feedbackItem/traceDataSection.tsx
index 478cce007a23ce..e37fce4afe4fc0 100644
--- a/static/app/components/feedback/feedbackItem/traceDataSection.tsx
+++ b/static/app/components/feedback/feedbackItem/traceDataSection.tsx
@@ -1,13 +1,17 @@
import {useEffect} from 'react';
import Section from 'sentry/components/feedback/feedbackItem/feedbackItemSection';
+import Placeholder from 'sentry/components/placeholder';
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';
+import {
+ type TimelineEvent,
+ useTraceTimelineEvents,
+} from 'sentry/views/issueDetails/traceTimeline/useTraceTimelineEvents';
/**
* Doesn't require a Section wrapper. Rendered conditionally if
@@ -17,11 +21,9 @@ import {useTraceTimelineEvents} from 'sentry/views/issueDetails/traceTimeline/us
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 ^
@@ -29,11 +31,7 @@ export default function TraceDataSection({
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);
+ // Note traceEvents includes the current event (feedback).
useEffect(() => {
if (isError) {
@@ -45,23 +43,36 @@ export default function TraceDataSection({
organization,
});
}
- if (hasProject && !!crashReportId && oneOtherIssueEvent?.id === crashReportId) {
+ if (eventIsCrashReportDup(oneOtherIssueEvent, crashReportId)) {
trackAnalytics('feedback.trace-section.crash-report-dup', {organization});
}
}
}, [
crashReportId,
- hasProject,
isError,
isLoading,
- oneOtherIssueEvent?.id,
+ oneOtherIssueEvent,
organization,
traceEvents.length,
]);
- return show && organization.features.includes('user-feedback-trace-section') ? (
+ return organization.features.includes('user-feedback-trace-section') &&
+ !isError &&
+ traceEvents.length > 1 &&
+ !eventIsCrashReportDup(oneOtherIssueEvent, crashReportId) ? (
} title={t('Data From The Same Trace')}>
-
+ {isLoading ? (
+
+ ) : (
+
+ )}
) : null;
}
+
+function eventIsCrashReportDup(
+ event: TimelineEvent | undefined,
+ crashReportId: string | undefined
+) {
+ return !!crashReportId && event?.id === crashReportId;
+}