groupEventDetailsContent.tsx 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518
  1. import {Fragment, lazy, useMemo, useRef} from 'react';
  2. import styled from '@emotion/styled';
  3. import {usePrompt} from 'sentry/actionCreators/prompts';
  4. import GuideAnchor from 'sentry/components/assistant/guideAnchor';
  5. import {Button} from 'sentry/components/button';
  6. import {CommitRow} from 'sentry/components/commitRow';
  7. import ErrorBoundary from 'sentry/components/errorBoundary';
  8. import BreadcrumbsDataSection from 'sentry/components/events/breadcrumbs/breadcrumbsDataSection';
  9. import {EventContexts} from 'sentry/components/events/contexts';
  10. import {EventDevice} from 'sentry/components/events/device';
  11. import {EventAttachments} from 'sentry/components/events/eventAttachments';
  12. import {EventDataSection} from 'sentry/components/events/eventDataSection';
  13. import {EventEvidence} from 'sentry/components/events/eventEvidence';
  14. import {EventExtraData} from 'sentry/components/events/eventExtraData';
  15. import EventHydrationDiff from 'sentry/components/events/eventHydrationDiff';
  16. import {EventProcessingErrors} from 'sentry/components/events/eventProcessingErrors';
  17. import EventReplay from 'sentry/components/events/eventReplay';
  18. import {EventSdk} from 'sentry/components/events/eventSdk';
  19. import AggregateSpanDiff from 'sentry/components/events/eventStatisticalDetector/aggregateSpanDiff';
  20. import EventBreakpointChart from 'sentry/components/events/eventStatisticalDetector/breakpointChart';
  21. import EventComparison from 'sentry/components/events/eventStatisticalDetector/eventComparison';
  22. import {EventDifferentialFlamegraph} from 'sentry/components/events/eventStatisticalDetector/eventDifferentialFlamegraph';
  23. import {EventRegressionSummary} from 'sentry/components/events/eventStatisticalDetector/eventRegressionSummary';
  24. import {EventFunctionBreakpointChart} from 'sentry/components/events/eventStatisticalDetector/functionBreakpointChart';
  25. import {EventTagsAndScreenshot} from 'sentry/components/events/eventTagsAndScreenshot';
  26. import {ScreenshotDataSection} from 'sentry/components/events/eventTagsAndScreenshot/screenshot/screenshotDataSection';
  27. import EventTagsDataSection from 'sentry/components/events/eventTagsAndScreenshot/tags';
  28. import {EventViewHierarchy} from 'sentry/components/events/eventViewHierarchy';
  29. import {EventFeatureFlagList} from 'sentry/components/events/featureFlags/eventFeatureFlagList';
  30. import {EventGroupingInfoSection} from 'sentry/components/events/groupingInfo/groupingInfoSection';
  31. import HighlightsDataSection from 'sentry/components/events/highlights/highlightsDataSection';
  32. import {HighlightsIconSummary} from 'sentry/components/events/highlights/highlightsIconSummary';
  33. import {ActionableItems} from 'sentry/components/events/interfaces/crashContent/exception/actionableItems';
  34. import {actionableItemsEnabled} from 'sentry/components/events/interfaces/crashContent/exception/useActionableItems';
  35. import {CronTimelineSection} from 'sentry/components/events/interfaces/crons/cronTimelineSection';
  36. import {Csp} from 'sentry/components/events/interfaces/csp';
  37. import {DebugMeta} from 'sentry/components/events/interfaces/debugMeta';
  38. import {Exception} from 'sentry/components/events/interfaces/exception';
  39. import {Generic} from 'sentry/components/events/interfaces/generic';
  40. import {Message} from 'sentry/components/events/interfaces/message';
  41. import {AnrRootCause} from 'sentry/components/events/interfaces/performance/anrRootCause';
  42. import {EventTraceView} from 'sentry/components/events/interfaces/performance/eventTraceView';
  43. import {SpanEvidenceSection} from 'sentry/components/events/interfaces/performance/spanEvidence';
  44. import {Request} from 'sentry/components/events/interfaces/request';
  45. import {StackTrace} from 'sentry/components/events/interfaces/stackTrace';
  46. import {Template} from 'sentry/components/events/interfaces/template';
  47. import {Threads} from 'sentry/components/events/interfaces/threads';
  48. import {UptimeDataSection} from 'sentry/components/events/interfaces/uptime/uptimeDataSection';
  49. import {EventPackageData} from 'sentry/components/events/packageData';
  50. import {EventRRWebIntegration} from 'sentry/components/events/rrwebIntegration';
  51. import {DataSection} from 'sentry/components/events/styles';
  52. import {SuspectCommits} from 'sentry/components/events/suspectCommits';
  53. import {EventUserFeedback} from 'sentry/components/events/userFeedback';
  54. import LazyLoad from 'sentry/components/lazyLoad';
  55. import Placeholder from 'sentry/components/placeholder';
  56. import {IconChevron} from 'sentry/icons';
  57. import {t} from 'sentry/locale';
  58. import {space} from 'sentry/styles/space';
  59. import type {Entry, EntryException, Event, EventTransaction} from 'sentry/types/event';
  60. import {EntryType, EventOrGroupType} from 'sentry/types/event';
  61. import type {Group} from 'sentry/types/group';
  62. import {IssueCategory} from 'sentry/types/group';
  63. import type {Project} from 'sentry/types/project';
  64. import {defined} from 'sentry/utils';
  65. import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
  66. import {QuickTraceContext} from 'sentry/utils/performance/quickTrace/quickTraceContext';
  67. import QuickTraceQuery from 'sentry/utils/performance/quickTrace/quickTraceQuery';
  68. import {getReplayIdFromEvent} from 'sentry/utils/replays/getReplayIdFromEvent';
  69. import {useLocation} from 'sentry/utils/useLocation';
  70. import useOrganization from 'sentry/utils/useOrganization';
  71. import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
  72. import {EventDetails} from 'sentry/views/issueDetails/streamline/eventDetails';
  73. import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
  74. import {TraceDataSection} from 'sentry/views/issueDetails/traceDataSection';
  75. import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
  76. const LLMMonitoringSection = lazy(
  77. () => import('sentry/components/events/interfaces/llm-monitoring/llmMonitoringSection')
  78. );
  79. export interface EventDetailsContentProps {
  80. group: Group;
  81. project: Project;
  82. event?: Event;
  83. }
  84. export function EventDetailsContent({
  85. group,
  86. event,
  87. project,
  88. }: Required<EventDetailsContentProps>) {
  89. const organization = useOrganization();
  90. const location = useLocation();
  91. const hasStreamlinedUI = useHasStreamlinedUI();
  92. const tagsRef = useRef<HTMLDivElement>(null);
  93. const eventEntries = useMemo(() => {
  94. const {entries = []} = event;
  95. return entries.reduce<{[key in EntryType]?: Entry}>((entryMap, entry) => {
  96. entryMap[entry.type] = entry;
  97. return entryMap;
  98. }, {});
  99. }, [event]);
  100. const projectSlug = project.slug;
  101. const hasReplay = Boolean(getReplayIdFromEvent(event));
  102. const mechanism = event.tags?.find(({key}) => key === 'mechanism')?.value;
  103. const isANR = mechanism === 'ANR' || mechanism === 'AppExitInfo';
  104. const groupingCurrentLevel = group?.metadata?.current_level;
  105. const hasFeatureFlagSection = organization.features.includes('feature-flag-ui');
  106. const hasActionableItems = actionableItemsEnabled({
  107. eventId: event.id,
  108. organization,
  109. projectSlug,
  110. });
  111. const {
  112. isLoading: promptLoading,
  113. isError: promptError,
  114. isPromptDismissed,
  115. dismissPrompt,
  116. showPrompt,
  117. } = usePrompt({
  118. feature: 'issue_feedback_hidden',
  119. organization,
  120. projectId: project.id,
  121. });
  122. // default to show on error or isPromptDismissed === undefined
  123. const showFeedback = !isPromptDismissed || promptError || hasStreamlinedUI;
  124. const issueTypeConfig = getConfigForIssueType(group, group.project);
  125. return (
  126. <Fragment>
  127. {hasStreamlinedUI && <HighlightsIconSummary event={event} group={group} />}
  128. {hasActionableItems && !hasStreamlinedUI && (
  129. <ActionableItems event={event} project={project} isShare={false} />
  130. )}
  131. <StyledDataSection>
  132. {!hasStreamlinedUI && <TraceDataSection event={event} />}
  133. {!hasStreamlinedUI && (
  134. <SuspectCommits
  135. projectSlug={project.slug}
  136. eventId={event.id}
  137. group={group}
  138. commitRow={CommitRow}
  139. />
  140. )}
  141. </StyledDataSection>
  142. {event.userReport && (
  143. <InterimSection
  144. title={t('User Feedback')}
  145. type={SectionKey.USER_FEEDBACK}
  146. actions={
  147. hasStreamlinedUI ? null : (
  148. <ErrorBoundary mini>
  149. <Button
  150. size="xs"
  151. icon={<IconChevron direction={showFeedback ? 'up' : 'down'} />}
  152. onClick={showFeedback ? dismissPrompt : showPrompt}
  153. title={
  154. showFeedback
  155. ? t('Hide feedback on all issue details')
  156. : t('Unhide feedback on all issue details')
  157. }
  158. disabled={promptError}
  159. busy={promptLoading}
  160. >
  161. {showFeedback ? t('Hide') : t('Show')}
  162. </Button>
  163. </ErrorBoundary>
  164. )
  165. }
  166. >
  167. {promptLoading ? (
  168. <Placeholder />
  169. ) : showFeedback ? (
  170. <EventUserFeedback
  171. report={event.userReport}
  172. orgSlug={organization.slug}
  173. issueId={group.id}
  174. showEventLink={false}
  175. />
  176. ) : null}
  177. </InterimSection>
  178. )}
  179. {event.type === EventOrGroupType.ERROR &&
  180. organization.features.includes('insights-addon-modules') &&
  181. event?.entries
  182. ?.filter((x): x is EntryException => x.type === EntryType.EXCEPTION)
  183. .flatMap(x => x.data.values ?? [])
  184. .some(({value}) => {
  185. const lowerText = value?.toLowerCase();
  186. return (
  187. lowerText &&
  188. (lowerText.includes('api key') || lowerText.includes('429')) &&
  189. (lowerText.includes('openai') ||
  190. lowerText.includes('anthropic') ||
  191. lowerText.includes('cohere') ||
  192. lowerText.includes('langchain'))
  193. );
  194. }) ? (
  195. <LazyLoad
  196. LazyComponent={LLMMonitoringSection}
  197. event={event}
  198. organization={organization}
  199. />
  200. ) : null}
  201. {group.issueCategory === IssueCategory.UPTIME && (
  202. <UptimeDataSection event={event} project={project} group={group} />
  203. )}
  204. {group.issueCategory === IssueCategory.CRON && (
  205. <CronTimelineSection
  206. event={event}
  207. organization={organization}
  208. project={project}
  209. />
  210. )}
  211. {!hasStreamlinedUI && issueTypeConfig.tags.enabled && (
  212. <HighlightsDataSection event={event} project={project} viewAllRef={tagsRef} />
  213. )}
  214. <EventEvidence event={event} group={group} project={project} />
  215. {defined(eventEntries[EntryType.MESSAGE]) && (
  216. <EntryErrorBoundary type={EntryType.MESSAGE}>
  217. <Message event={event} data={eventEntries[EntryType.MESSAGE].data} />
  218. </EntryErrorBoundary>
  219. )}
  220. {/* Wrapping all stacktrace components since multiple could appear */}
  221. <GuideAnchor
  222. target="stacktrace"
  223. position="top"
  224. disabled={
  225. !(
  226. defined(eventEntries[EntryType.EXCEPTION]) ||
  227. defined(eventEntries[EntryType.STACKTRACE]) ||
  228. defined(eventEntries[EntryType.THREADS])
  229. )
  230. }
  231. >
  232. {defined(eventEntries[EntryType.EXCEPTION]) && (
  233. <EntryErrorBoundary type={EntryType.EXCEPTION}>
  234. <Exception
  235. event={event}
  236. data={eventEntries[EntryType.EXCEPTION].data}
  237. projectSlug={project.slug}
  238. group={group}
  239. groupingCurrentLevel={groupingCurrentLevel}
  240. />
  241. </EntryErrorBoundary>
  242. )}
  243. {issueTypeConfig.stacktrace.enabled &&
  244. defined(eventEntries[EntryType.STACKTRACE]) && (
  245. <EntryErrorBoundary type={EntryType.STACKTRACE}>
  246. <StackTrace
  247. event={event}
  248. data={eventEntries[EntryType.STACKTRACE].data}
  249. projectSlug={projectSlug}
  250. groupingCurrentLevel={groupingCurrentLevel}
  251. />
  252. </EntryErrorBoundary>
  253. )}
  254. {defined(eventEntries[EntryType.THREADS]) && (
  255. <EntryErrorBoundary type={EntryType.THREADS}>
  256. <Threads
  257. event={event}
  258. data={eventEntries[EntryType.THREADS].data}
  259. projectSlug={project.slug}
  260. groupingCurrentLevel={groupingCurrentLevel}
  261. group={group}
  262. />
  263. </EntryErrorBoundary>
  264. )}
  265. </GuideAnchor>
  266. {defined(eventEntries[EntryType.DEBUGMETA]) && (
  267. <EntryErrorBoundary type={EntryType.DEBUGMETA}>
  268. <DebugMeta
  269. event={event}
  270. projectSlug={projectSlug}
  271. groupId={group?.id}
  272. data={eventEntries[EntryType.DEBUGMETA].data}
  273. />
  274. </EntryErrorBoundary>
  275. )}
  276. {hasStreamlinedUI && (
  277. <ScreenshotDataSection event={event} projectSlug={project.slug} />
  278. )}
  279. {isANR && (
  280. <QuickTraceQuery
  281. event={event}
  282. location={location}
  283. orgSlug={organization.slug}
  284. type={'spans'}
  285. skipLight
  286. >
  287. {results => {
  288. return (
  289. <QuickTraceContext.Provider value={results}>
  290. <AnrRootCause event={event} organization={organization} />
  291. </QuickTraceContext.Provider>
  292. );
  293. }}
  294. </QuickTraceQuery>
  295. )}
  296. {issueTypeConfig.spanEvidence.enabled && (
  297. <SpanEvidenceSection
  298. event={event as EventTransaction}
  299. organization={organization}
  300. projectSlug={project.slug}
  301. />
  302. )}
  303. {issueTypeConfig.regression.enabled && (
  304. <ErrorBoundary mini>
  305. <EventRegressionSummary event={event} group={group} />
  306. </ErrorBoundary>
  307. )}
  308. {issueTypeConfig.performanceDurationRegression.enabled && (
  309. <Fragment>
  310. <ErrorBoundary mini>
  311. <EventBreakpointChart event={event} />
  312. </ErrorBoundary>
  313. <ErrorBoundary mini>
  314. <AggregateSpanDiff event={event} project={project} />
  315. </ErrorBoundary>
  316. <ErrorBoundary mini>
  317. <EventComparison event={event} project={project} />
  318. </ErrorBoundary>
  319. </Fragment>
  320. )}
  321. {issueTypeConfig.profilingDurationRegression.enabled && (
  322. <Fragment>
  323. <ErrorBoundary mini>
  324. <EventFunctionBreakpointChart event={event} />
  325. </ErrorBoundary>
  326. <ErrorBoundary mini>
  327. <InterimSection
  328. type={SectionKey.REGRESSION_FLAMEGRAPH}
  329. title={t('Regression Flamegraph')}
  330. >
  331. <b>{t('Largest Changes in Call Stack Frequency')}</b>
  332. <p>
  333. {t(`See which functions changed the most before and after the regression. The
  334. frame with the largest increase in call stack population likely
  335. contributed to the cause for the duration regression.`)}
  336. </p>
  337. <EventDifferentialFlamegraph event={event} />
  338. </InterimSection>
  339. </ErrorBoundary>
  340. </Fragment>
  341. )}
  342. <EventHydrationDiff event={event} group={group} />
  343. {issueTypeConfig.replays.enabled && (
  344. <EventReplay event={event} group={group} projectSlug={project.slug} />
  345. )}
  346. {defined(eventEntries[EntryType.HPKP]) && (
  347. <EntryErrorBoundary type={EntryType.HPKP}>
  348. <Generic
  349. type={EntryType.HPKP}
  350. data={eventEntries[EntryType.HPKP].data}
  351. meta={event._meta?.hpkp ?? {}}
  352. />
  353. </EntryErrorBoundary>
  354. )}
  355. {defined(eventEntries[EntryType.CSP]) && (
  356. <EntryErrorBoundary type={EntryType.CSP}>
  357. <Csp event={event} data={eventEntries[EntryType.CSP].data} />
  358. </EntryErrorBoundary>
  359. )}
  360. {defined(eventEntries[EntryType.EXPECTCT]) && (
  361. <EntryErrorBoundary type={EntryType.EXPECTCT}>
  362. <Generic
  363. type={EntryType.EXPECTCT}
  364. data={eventEntries[EntryType.EXPECTCT].data}
  365. />
  366. </EntryErrorBoundary>
  367. )}
  368. {defined(eventEntries[EntryType.EXPECTSTAPLE]) && (
  369. <EntryErrorBoundary type={EntryType.EXPECTSTAPLE}>
  370. <Generic
  371. type={EntryType.EXPECTSTAPLE}
  372. data={eventEntries[EntryType.EXPECTSTAPLE].data}
  373. />
  374. </EntryErrorBoundary>
  375. )}
  376. {defined(eventEntries[EntryType.TEMPLATE]) && (
  377. <EntryErrorBoundary type={EntryType.TEMPLATE}>
  378. <Template event={event} data={eventEntries[EntryType.TEMPLATE].data} />
  379. </EntryErrorBoundary>
  380. )}
  381. <BreadcrumbsDataSection event={event} group={group} project={project} />
  382. {hasStreamlinedUI && event.contexts.trace?.trace_id && (
  383. <EventTraceView group={group} event={event} organization={organization} />
  384. )}
  385. {defined(eventEntries[EntryType.REQUEST]) && (
  386. <EntryErrorBoundary type={EntryType.REQUEST}>
  387. <Request event={event} data={eventEntries[EntryType.REQUEST].data} />
  388. </EntryErrorBoundary>
  389. )}
  390. {issueTypeConfig.tags.enabled ? (
  391. <Fragment>
  392. {hasStreamlinedUI ? (
  393. <Fragment>
  394. <HighlightsDataSection
  395. event={event}
  396. project={project}
  397. viewAllRef={tagsRef}
  398. />
  399. <EventTagsDataSection
  400. event={event}
  401. projectSlug={project.slug}
  402. ref={tagsRef}
  403. />
  404. </Fragment>
  405. ) : (
  406. <div ref={tagsRef}>
  407. <EventTagsAndScreenshot event={event} projectSlug={project.slug} />
  408. </div>
  409. )}
  410. </Fragment>
  411. ) : null}
  412. <EventContexts group={group} event={event} />
  413. {hasFeatureFlagSection && (
  414. <EventFeatureFlagList group={group} project={project} event={event} />
  415. )}
  416. <EventExtraData event={event} />
  417. <EventPackageData event={event} />
  418. <EventDevice event={event} />
  419. <EventViewHierarchy event={event} project={project} />
  420. <EventAttachments event={event} project={project} group={group} />
  421. <EventSdk sdk={event.sdk} meta={event._meta?.sdk} />
  422. {hasStreamlinedUI && (
  423. <EventProcessingErrors event={event} project={project} isShare={false} />
  424. )}
  425. {event.groupID && (
  426. <EventGroupingInfoSection
  427. projectSlug={project.slug}
  428. event={event}
  429. showGroupingConfig={
  430. organization.features.includes('set-grouping-config') &&
  431. 'groupingConfig' in event
  432. }
  433. group={group}
  434. />
  435. )}
  436. {!hasReplay && (
  437. <EventRRWebIntegration
  438. event={event}
  439. orgId={organization.slug}
  440. projectSlug={project.slug}
  441. />
  442. )}
  443. </Fragment>
  444. );
  445. }
  446. export default function GroupEventDetailsContent({
  447. group,
  448. event,
  449. project,
  450. }: EventDetailsContentProps) {
  451. const hasStreamlinedUI = useHasStreamlinedUI();
  452. if (!event) {
  453. return (
  454. <NotFoundMessage>
  455. <h3>{t('Latest event not available')}</h3>
  456. </NotFoundMessage>
  457. );
  458. }
  459. return hasStreamlinedUI ? (
  460. <EventDetails event={event} group={group} project={project} />
  461. ) : (
  462. <EventDetailsContent group={group} event={event} project={project} />
  463. );
  464. }
  465. /**
  466. * This component is only necessary while the streamlined UI is not in place.
  467. * The FoldSection by default wraps its children with an ErrorBoundary, preventing content
  468. * from crashing the whole page if an error occurs, but EventDataSection does not do this.
  469. */
  470. function EntryErrorBoundary({
  471. children,
  472. type,
  473. }: {
  474. children: React.ReactNode;
  475. type: EntryType;
  476. }) {
  477. return (
  478. <ErrorBoundary
  479. customComponent={
  480. <EventDataSection type={type} title={type}>
  481. <p>{t('There was an error rendering this data.')}</p>
  482. </EventDataSection>
  483. }
  484. >
  485. {children}
  486. </ErrorBoundary>
  487. );
  488. }
  489. const NotFoundMessage = styled('div')`
  490. padding: ${space(2)} ${space(4)};
  491. `;
  492. const StyledDataSection = styled(DataSection)`
  493. padding: ${space(0.5)} ${space(2)};
  494. @media (min-width: ${p => p.theme.breakpoints.medium}) {
  495. padding: ${space(1)} ${space(4)};
  496. }
  497. &:empty {
  498. display: none;
  499. }
  500. `;