groupDetails.tsx 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894
  1. import {
  2. cloneElement,
  3. Fragment,
  4. isValidElement,
  5. useCallback,
  6. useEffect,
  7. useState,
  8. } from 'react';
  9. import type {RouteComponentProps} from 'react-router';
  10. import styled from '@emotion/styled';
  11. import * as Sentry from '@sentry/react';
  12. import omit from 'lodash/omit';
  13. import * as qs from 'query-string';
  14. import FloatingFeedbackWidget from 'sentry/components/feedback/widget/floatingFeedbackWidget';
  15. import LoadingError from 'sentry/components/loadingError';
  16. import LoadingIndicator from 'sentry/components/loadingIndicator';
  17. import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
  18. import MissingProjectMembership from 'sentry/components/projects/missingProjectMembership';
  19. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  20. import {TabPanels, Tabs} from 'sentry/components/tabs';
  21. import {t} from 'sentry/locale';
  22. import GroupStore from 'sentry/stores/groupStore';
  23. import {space} from 'sentry/styles/space';
  24. import type {Group, Organization, Project} from 'sentry/types';
  25. import {GroupStatus, IssueCategory, IssueType} from 'sentry/types';
  26. import type {Event} from 'sentry/types/event';
  27. import {defined} from 'sentry/utils';
  28. import {trackAnalytics} from 'sentry/utils/analytics';
  29. import {browserHistory} from 'sentry/utils/browserHistory';
  30. import {getUtcDateString} from 'sentry/utils/dates';
  31. import {
  32. getAnalyticsDataForEvent,
  33. getAnalyticsDataForGroup,
  34. getMessage,
  35. getTitle,
  36. } from 'sentry/utils/events';
  37. import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
  38. import {getAnalyicsDataForProject} from 'sentry/utils/projects';
  39. import type {ApiQueryKey} from 'sentry/utils/queryClient';
  40. import {setApiQueryData, useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
  41. import recreateRoute from 'sentry/utils/recreateRoute';
  42. import useDisableRouteAnalytics from 'sentry/utils/routeAnalytics/useDisableRouteAnalytics';
  43. import useRouteAnalyticsEventNames from 'sentry/utils/routeAnalytics/useRouteAnalyticsEventNames';
  44. import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
  45. import useApi from 'sentry/utils/useApi';
  46. import {useDetailedProject} from 'sentry/utils/useDetailedProject';
  47. import {useLocation} from 'sentry/utils/useLocation';
  48. import {useMemoWithPrevious} from 'sentry/utils/useMemoWithPrevious';
  49. import useOrganization from 'sentry/utils/useOrganization';
  50. import {useParams} from 'sentry/utils/useParams';
  51. import useProjects from 'sentry/utils/useProjects';
  52. import useRouter from 'sentry/utils/useRouter';
  53. import {useUser} from 'sentry/utils/useUser';
  54. import {normalizeUrl} from 'sentry/utils/withDomainRequired';
  55. import {ERROR_TYPES} from './constants';
  56. import GroupHeader from './header';
  57. import SampleEventAlert from './sampleEventAlert';
  58. import {Tab, TabPaths} from './types';
  59. import {
  60. getGroupDetailsQueryData,
  61. getGroupEventDetailsQueryData,
  62. getGroupReprocessingStatus,
  63. markEventSeen,
  64. ReprocessingStatus,
  65. useDefaultIssueEvent,
  66. useEnvironmentsFromUrl,
  67. useFetchIssueTagsForDetailsPage,
  68. } from './utils';
  69. type Error = (typeof ERROR_TYPES)[keyof typeof ERROR_TYPES] | null;
  70. type RouterParams = {groupId: string; eventId?: string};
  71. type RouteProps = RouteComponentProps<RouterParams, {}>;
  72. interface GroupDetailsProps extends RouteComponentProps<{groupId: string}, {}> {
  73. children: React.ReactNode;
  74. }
  75. type FetchGroupDetailsState = {
  76. error: boolean;
  77. errorType: Error;
  78. event: Event | null;
  79. eventError: boolean;
  80. group: Group | null;
  81. loadingEvent: boolean;
  82. loadingGroup: boolean;
  83. refetchData: () => void;
  84. refetchGroup: () => void;
  85. };
  86. interface GroupDetailsContentProps extends GroupDetailsProps, FetchGroupDetailsState {
  87. group: Group;
  88. project: Project;
  89. }
  90. function getFetchDataRequestErrorType(status?: number | null): Error {
  91. if (!status) {
  92. return null;
  93. }
  94. if (status === 404) {
  95. return ERROR_TYPES.GROUP_NOT_FOUND;
  96. }
  97. if (status === 403) {
  98. return ERROR_TYPES.MISSING_MEMBERSHIP;
  99. }
  100. return null;
  101. }
  102. function getCurrentTab({router}: {router: RouteProps['router']}) {
  103. const currentRoute = router.routes[router.routes.length - 1];
  104. // If we're in the tag details page ("/tags/:tagKey/")
  105. if (router.params.tagKey) {
  106. return Tab.TAGS;
  107. }
  108. return (
  109. Object.values(Tab).find(tab => currentRoute.path === TabPaths[tab]) ?? Tab.DETAILS
  110. );
  111. }
  112. function getCurrentRouteInfo({
  113. group,
  114. event,
  115. organization,
  116. router,
  117. }: {
  118. event: Event | null;
  119. group: Group;
  120. organization: Organization;
  121. router: RouteProps['router'];
  122. }): {
  123. baseUrl: string;
  124. currentTab: Tab;
  125. } {
  126. const currentTab = getCurrentTab({router});
  127. const baseUrl = normalizeUrl(
  128. `/organizations/${organization.slug}/issues/${group.id}/${
  129. router.params.eventId && event ? `events/${event.id}/` : ''
  130. }`
  131. );
  132. return {baseUrl, currentTab};
  133. }
  134. function getReprocessingNewRoute({
  135. group,
  136. event,
  137. organization,
  138. router,
  139. }: {
  140. event: Event | null;
  141. group: Group;
  142. organization: Organization;
  143. router: RouteProps['router'];
  144. }) {
  145. const {routes, params, location} = router;
  146. const {groupId} = params;
  147. const {currentTab, baseUrl} = getCurrentRouteInfo({group, event, organization, router});
  148. const {id: nextGroupId} = group;
  149. const reprocessingStatus = getGroupReprocessingStatus(group);
  150. if (groupId !== nextGroupId) {
  151. // Redirects to the Activities tab
  152. if (
  153. reprocessingStatus === ReprocessingStatus.REPROCESSED_AND_HASNT_EVENT &&
  154. currentTab !== Tab.ACTIVITY
  155. ) {
  156. return {
  157. pathname: `${baseUrl}${Tab.ACTIVITY}/`,
  158. query: {...params, groupId: nextGroupId},
  159. };
  160. }
  161. return recreateRoute('', {
  162. routes,
  163. location,
  164. params: {...params, groupId: nextGroupId},
  165. });
  166. }
  167. if (
  168. reprocessingStatus === ReprocessingStatus.REPROCESSING &&
  169. currentTab !== Tab.DETAILS
  170. ) {
  171. return {
  172. pathname: baseUrl,
  173. query: params,
  174. };
  175. }
  176. if (
  177. reprocessingStatus === ReprocessingStatus.REPROCESSED_AND_HASNT_EVENT &&
  178. currentTab !== Tab.ACTIVITY &&
  179. currentTab !== Tab.USER_FEEDBACK
  180. ) {
  181. return {
  182. pathname: `${baseUrl}${Tab.ACTIVITY}/`,
  183. query: params,
  184. };
  185. }
  186. return undefined;
  187. }
  188. function useRefetchGroupForReprocessing({
  189. refetchGroup,
  190. }: Pick<FetchGroupDetailsState, 'refetchGroup'>) {
  191. useEffect(() => {
  192. const refetchInterval = window.setInterval(refetchGroup, 30000);
  193. return () => {
  194. window.clearInterval(refetchInterval);
  195. };
  196. }, [refetchGroup]);
  197. }
  198. function useEventApiQuery({
  199. groupId,
  200. eventId,
  201. environments,
  202. }: {
  203. environments: string[];
  204. groupId: string;
  205. eventId?: string;
  206. }) {
  207. const organization = useOrganization();
  208. const location = useLocation<{query?: string}>();
  209. const router = useRouter();
  210. const defaultIssueEvent = useDefaultIssueEvent();
  211. const eventIdUrl = eventId ?? defaultIssueEvent;
  212. const recommendedEventQuery =
  213. typeof location.query.query === 'string' ? location.query.query : undefined;
  214. const queryKey: ApiQueryKey = [
  215. `/organizations/${organization.slug}/issues/${groupId}/events/${eventIdUrl}/`,
  216. {
  217. query: getGroupEventDetailsQueryData({
  218. environments,
  219. query: recommendedEventQuery,
  220. }),
  221. },
  222. ];
  223. const tab = getCurrentTab({router});
  224. const isOnDetailsTab = tab === Tab.DETAILS;
  225. const isLatestOrRecommendedEvent =
  226. eventIdUrl === 'latest' || eventIdUrl === 'recommended';
  227. const latestOrRecommendedEvent = useApiQuery<Event>(queryKey, {
  228. // Latest/recommended event will change over time, so only cache for 30 seconds
  229. staleTime: 30000,
  230. cacheTime: 30000,
  231. enabled: isOnDetailsTab && isLatestOrRecommendedEvent,
  232. retry: false,
  233. });
  234. const otherEventQuery = useApiQuery<Event>(queryKey, {
  235. // Oldest/specific events will never change
  236. staleTime: Infinity,
  237. enabled: isOnDetailsTab && !isLatestOrRecommendedEvent,
  238. retry: false,
  239. });
  240. useEffect(() => {
  241. if (latestOrRecommendedEvent.isError) {
  242. // If we get an error from the helpful event endpoint, it probably means
  243. // the query failed validation. We should remove the query to try again.
  244. browserHistory.replace({
  245. ...window.location,
  246. query: omit(qs.parse(window.location.search), 'query'),
  247. });
  248. }
  249. }, [latestOrRecommendedEvent.isError]);
  250. return isLatestOrRecommendedEvent ? latestOrRecommendedEvent : otherEventQuery;
  251. }
  252. type FetchGroupQueryParameters = {
  253. environments: string[];
  254. groupId: string;
  255. organizationSlug: string;
  256. };
  257. function makeFetchGroupQueryKey({
  258. groupId,
  259. organizationSlug,
  260. environments,
  261. }: FetchGroupQueryParameters): ApiQueryKey {
  262. return [
  263. `/organizations/${organizationSlug}/issues/${groupId}/`,
  264. {query: getGroupDetailsQueryData({environments})},
  265. ];
  266. }
  267. /**
  268. * This is a temporary measure to ensure that the GroupStore and query cache
  269. * are both up to date while we are still using both in the issue details page.
  270. * Once we remove all references to GroupStore in the issue details page we
  271. * should remove this.
  272. */
  273. function useSyncGroupStore(groupId: string, incomingEnvs: string[]) {
  274. const queryClient = useQueryClient();
  275. const organization = useOrganization();
  276. // It's possible the overview page is still unloading the store
  277. useEffect(() => {
  278. return GroupStore.listen(() => {
  279. const [storeGroup] = GroupStore.getState();
  280. if (
  281. defined(storeGroup) &&
  282. storeGroup.id === groupId &&
  283. // Check for properties that are only set after the group has been loaded
  284. defined(storeGroup.participants) &&
  285. defined(storeGroup.activity)
  286. ) {
  287. setApiQueryData(
  288. queryClient,
  289. makeFetchGroupQueryKey({
  290. groupId: storeGroup.id,
  291. organizationSlug: organization.slug,
  292. environments: incomingEnvs,
  293. }),
  294. storeGroup
  295. );
  296. }
  297. }, undefined) as () => void;
  298. }, [groupId, incomingEnvs, organization.slug, queryClient]);
  299. }
  300. function useFetchGroupDetails(): FetchGroupDetailsState {
  301. const api = useApi();
  302. const organization = useOrganization();
  303. const router = useRouter();
  304. const params = router.params;
  305. const [allProjectChanged, setAllProjectChanged] = useState<boolean>(false);
  306. const environments = useEnvironmentsFromUrl();
  307. const groupId = params.groupId;
  308. const {
  309. data: event,
  310. isLoading: loadingEvent,
  311. isError,
  312. refetch: refetchEvent,
  313. } = useEventApiQuery({
  314. groupId,
  315. eventId: params.eventId,
  316. environments,
  317. });
  318. const {
  319. data: groupData,
  320. isLoading: loadingGroup,
  321. isError: isGroupError,
  322. error: groupError,
  323. refetch: refetchGroupCall,
  324. } = useApiQuery<Group>(
  325. makeFetchGroupQueryKey({organizationSlug: organization.slug, groupId, environments}),
  326. {
  327. staleTime: 30000,
  328. cacheTime: 30000,
  329. retry: false,
  330. }
  331. );
  332. /**
  333. * Allows the GroupEventHeader to display the previous event while the new event is loading.
  334. * This is not closer to the GroupEventHeader because it is unmounted
  335. * between route changes like latest event => eventId
  336. */
  337. const previousEvent = useMemoWithPrevious<typeof event | null>(
  338. previousInstance => {
  339. if (event) {
  340. return event;
  341. }
  342. return previousInstance;
  343. },
  344. [event]
  345. );
  346. const group = groupData ?? null;
  347. useEffect(() => {
  348. if (defined(group)) {
  349. GroupStore.loadInitialData([group]);
  350. }
  351. }, [groupId, group]);
  352. useSyncGroupStore(groupId, environments);
  353. useEffect(() => {
  354. if (group && event) {
  355. const reprocessingNewRoute = getReprocessingNewRoute({
  356. group,
  357. event,
  358. router,
  359. organization,
  360. });
  361. if (reprocessingNewRoute) {
  362. browserHistory.push(reprocessingNewRoute);
  363. }
  364. }
  365. }, [group, event, router, organization]);
  366. useEffect(() => {
  367. const matchingProjectSlug = group?.project?.slug;
  368. if (!matchingProjectSlug) {
  369. return;
  370. }
  371. if (!group.hasSeen) {
  372. markEventSeen(api, organization.slug, matchingProjectSlug, params.groupId);
  373. }
  374. }, [
  375. api,
  376. group?.hasSeen,
  377. group?.project?.id,
  378. group?.project?.slug,
  379. organization.slug,
  380. params.groupId,
  381. ]);
  382. const allProjectsFlag = router.location.query._allp;
  383. useEffect(() => {
  384. const locationQuery = qs.parse(window.location.search) || {};
  385. // We use _allp as a temporary measure to know they came from the
  386. // issue list page with no project selected (all projects included in
  387. // filter).
  388. //
  389. // If it is not defined, we add the locked project id to the URL
  390. // (this is because if someone navigates directly to an issue on
  391. // single-project priveleges, then goes back - they were getting
  392. // assigned to the first project).
  393. //
  394. // If it is defined, we do not so that our back button will bring us
  395. // to the issue list page with no project selected instead of the
  396. // locked project.
  397. if (
  398. locationQuery.project === undefined &&
  399. !allProjectsFlag &&
  400. !allProjectChanged &&
  401. group?.project.id
  402. ) {
  403. locationQuery.project = group?.project.id;
  404. browserHistory.replace({...window.location, query: locationQuery});
  405. }
  406. if (allProjectsFlag && !allProjectChanged) {
  407. delete locationQuery.project;
  408. // We delete _allp from the URL to keep the hack a bit cleaner, but
  409. // this is not an ideal solution and will ultimately be replaced with
  410. // something smarter.
  411. delete locationQuery._allp;
  412. browserHistory.replace({...window.location, query: locationQuery});
  413. setAllProjectChanged(true);
  414. }
  415. }, [allProjectsFlag, group?.project.id, allProjectChanged]);
  416. const errorType = groupError ? getFetchDataRequestErrorType(groupError.status) : null;
  417. useEffect(() => {
  418. if (isGroupError) {
  419. Sentry.captureException(groupError);
  420. }
  421. }, [isGroupError, groupError]);
  422. const refetchGroup = useCallback(() => {
  423. if (group?.status !== GroupStatus.REPROCESSING || loadingGroup || loadingEvent) {
  424. return;
  425. }
  426. refetchGroupCall();
  427. }, [group, loadingGroup, loadingEvent, refetchGroupCall]);
  428. const refetchData = useCallback(() => {
  429. refetchEvent();
  430. refetchGroup();
  431. }, [refetchGroup, refetchEvent]);
  432. // Refetch when group is stale
  433. useEffect(() => {
  434. if (group && (group as Group & {stale?: boolean}).stale) {
  435. refetchGroup();
  436. }
  437. }, [refetchGroup, group]);
  438. useRefetchGroupForReprocessing({refetchGroup});
  439. useEffect(() => {
  440. return () => {
  441. GroupStore.reset();
  442. };
  443. }, []);
  444. return {
  445. loadingGroup,
  446. loadingEvent,
  447. group,
  448. // Allow previous event to be displayed while new event is loading
  449. event: (loadingEvent ? event ?? previousEvent : event) ?? null,
  450. errorType,
  451. error: isGroupError,
  452. eventError: isError,
  453. refetchData,
  454. refetchGroup,
  455. };
  456. }
  457. function useLoadedEventType() {
  458. const params = useParams<{eventId?: string}>();
  459. const defaultIssueEvent = useDefaultIssueEvent();
  460. switch (params.eventId) {
  461. case undefined:
  462. return defaultIssueEvent;
  463. case 'latest':
  464. case 'oldest':
  465. return params.eventId;
  466. default:
  467. return 'event_id';
  468. }
  469. }
  470. function useTrackView({
  471. group,
  472. event,
  473. project,
  474. tab,
  475. }: {
  476. event: Event | null;
  477. group: Group | null;
  478. tab: Tab;
  479. project?: Project;
  480. }) {
  481. const organization = useOrganization();
  482. const location = useLocation();
  483. const {alert_date, alert_rule_id, alert_type, ref_fallback, stream_index, query} =
  484. location.query;
  485. const groupEventType = useLoadedEventType();
  486. const user = useUser();
  487. useRouteAnalyticsEventNames('issue_details.viewed', 'Issue Details: Viewed');
  488. useRouteAnalyticsParams({
  489. ...getAnalyticsDataForGroup(group),
  490. ...getAnalyticsDataForEvent(event),
  491. ...getAnalyicsDataForProject(project),
  492. tab,
  493. stream_index: typeof stream_index === 'string' ? Number(stream_index) : undefined,
  494. query: typeof query === 'string' ? query : undefined,
  495. // Alert properties track if the user came from email/slack alerts
  496. alert_date:
  497. typeof alert_date === 'string' ? getUtcDateString(Number(alert_date)) : undefined,
  498. alert_rule_id: typeof alert_rule_id === 'string' ? alert_rule_id : undefined,
  499. alert_type: typeof alert_type === 'string' ? alert_type : undefined,
  500. ref_fallback,
  501. group_event_type: groupEventType,
  502. has_hierarchical_grouping:
  503. !!organization.features?.includes('grouping-stacktrace-ui') &&
  504. !!(event?.metadata?.current_tree_label || event?.metadata?.finest_tree_label),
  505. new_issue_experience: user?.options?.issueDetailsNewExperienceQ42023 ?? false,
  506. });
  507. // Set default values for properties that may be updated in subcomponents.
  508. // Must be separate from the above values, otherwise the actual values filled in
  509. // by subcomponents may be overwritten when the above values change.
  510. useRouteAnalyticsParams({
  511. // Will be updated by StacktraceLink if there is a stacktrace link
  512. stacktrace_link_viewed: false,
  513. // Will be updated by IssueQuickTrace if there is a trace
  514. trace_status: 'none',
  515. // Will be updated in GroupDetailsHeader if there are replays
  516. group_has_replay: false,
  517. // Will be updated in ReplayPreview if there is a replay
  518. event_replay_status: 'none',
  519. // Will be updated in SuspectCommits if there are suspect commits
  520. num_suspect_commits: 0,
  521. suspect_commit_calculation: 'no suspect commit',
  522. // Will be updated in Autofix if enabled
  523. autofix_status: 'none',
  524. });
  525. useDisableRouteAnalytics(!group || !event || !project);
  526. }
  527. const trackTabChanged = ({
  528. organization,
  529. project,
  530. group,
  531. event,
  532. tab,
  533. }: {
  534. event: Event | null;
  535. group: Group;
  536. organization: Organization;
  537. project: Project;
  538. tab: Tab;
  539. }) => {
  540. if (!project || !group) {
  541. return;
  542. }
  543. trackAnalytics('issue_details.tab_changed', {
  544. organization,
  545. project_id: parseInt(project.id, 10),
  546. tab,
  547. ...getAnalyticsDataForGroup(group),
  548. });
  549. if (group.issueCategory !== IssueCategory.ERROR) {
  550. return;
  551. }
  552. const analyticsData = event
  553. ? event.tags
  554. .filter(({key}) => ['device', 'os', 'browser'].includes(key))
  555. .reduce((acc, {key, value}) => {
  556. acc[key] = value;
  557. return acc;
  558. }, {})
  559. : {};
  560. trackAnalytics('issue_group_details.tab.clicked', {
  561. organization,
  562. tab,
  563. platform: project.platform,
  564. ...analyticsData,
  565. });
  566. };
  567. function GroupDetailsContentError({
  568. errorType,
  569. onRetry,
  570. }: {
  571. errorType: Error;
  572. onRetry: () => void;
  573. }) {
  574. const organization = useOrganization();
  575. const location = useLocation();
  576. const projectId = location.query.project;
  577. const {projects} = useProjects();
  578. const project = projects.find(proj => proj.id === projectId);
  579. switch (errorType) {
  580. case ERROR_TYPES.GROUP_NOT_FOUND:
  581. return (
  582. <StyledLoadingError
  583. message={t('The issue you were looking for was not found.')}
  584. />
  585. );
  586. case ERROR_TYPES.MISSING_MEMBERSHIP:
  587. return <MissingProjectMembership organization={organization} project={project} />;
  588. default:
  589. return <StyledLoadingError onRetry={onRetry} />;
  590. }
  591. }
  592. function GroupDetailsContent({
  593. children,
  594. group,
  595. project,
  596. loadingEvent,
  597. eventError,
  598. event,
  599. refetchData,
  600. }: GroupDetailsContentProps) {
  601. const organization = useOrganization();
  602. const router = useRouter();
  603. const {currentTab, baseUrl} = getCurrentRouteInfo({group, event, router, organization});
  604. const groupReprocessingStatus = getGroupReprocessingStatus(group);
  605. const environments = useEnvironmentsFromUrl();
  606. useTrackView({group, event, project, tab: currentTab});
  607. const childProps = {
  608. environments,
  609. group,
  610. project,
  611. event,
  612. loadingEvent,
  613. eventError,
  614. groupReprocessingStatus,
  615. onRetry: refetchData,
  616. baseUrl,
  617. };
  618. return (
  619. <Tabs
  620. value={currentTab}
  621. onChange={tab => trackTabChanged({tab, group, project, event, organization})}
  622. >
  623. <GroupHeader
  624. organization={organization}
  625. groupReprocessingStatus={groupReprocessingStatus}
  626. event={event ?? undefined}
  627. group={group}
  628. baseUrl={baseUrl}
  629. project={project as Project}
  630. />
  631. <GroupTabPanels>
  632. <TabPanels.Item key={currentTab}>
  633. {isValidElement(children) ? cloneElement(children, childProps) : children}
  634. </TabPanels.Item>
  635. </GroupTabPanels>
  636. </Tabs>
  637. );
  638. }
  639. function GroupDetailsPageContent(props: GroupDetailsProps & FetchGroupDetailsState) {
  640. const projectSlug = props.group?.project?.slug;
  641. const api = useApi();
  642. const organization = useOrganization();
  643. const [injectedEvent, setInjectedEvent] = useState(null);
  644. const {
  645. projects,
  646. initiallyLoaded: projectsLoaded,
  647. fetchError: errorFetchingProjects,
  648. } = useProjects({slugs: projectSlug ? [projectSlug] : []});
  649. // Preload detailed project data for highlighted data section
  650. useDetailedProject(
  651. {
  652. orgSlug: organization.slug,
  653. projectSlug: projectSlug ?? '',
  654. },
  655. {enabled: !!projectSlug}
  656. );
  657. const project = projects.find(({slug}) => slug === projectSlug);
  658. const projectWithFallback = project ?? projects[0];
  659. const isRegressionIssue =
  660. props.group?.issueType === IssueType.PERFORMANCE_DURATION_REGRESSION ||
  661. props.group?.issueType === IssueType.PERFORMANCE_ENDPOINT_REGRESSION;
  662. useEffect(() => {
  663. if (props.group && projectsLoaded && !project) {
  664. Sentry.withScope(scope => {
  665. const projectIds = projects.map(item => item.id);
  666. scope.setContext('missingProject', {
  667. projectId: props.group?.project.id,
  668. availableProjects: projectIds,
  669. });
  670. scope.setFingerprint(['group-details-project-not-found']);
  671. Sentry.captureException(new Error('Project not found'));
  672. });
  673. }
  674. }, [props.group, project, projects, projectsLoaded]);
  675. useEffect(() => {
  676. const fetchLatestEvent = async () => {
  677. const event = await api.requestPromise(
  678. `/organizations/${organization.slug}/issues/${props.group?.id}/events/latest/`
  679. );
  680. setInjectedEvent(event);
  681. };
  682. if (isRegressionIssue && !defined(props.event)) {
  683. fetchLatestEvent();
  684. }
  685. }, [
  686. api,
  687. organization.slug,
  688. props.event,
  689. props.group,
  690. props.group?.id,
  691. isRegressionIssue,
  692. ]);
  693. if (props.error) {
  694. return (
  695. <GroupDetailsContentError errorType={props.errorType} onRetry={props.refetchData} />
  696. );
  697. }
  698. if (errorFetchingProjects) {
  699. return <StyledLoadingError message={t('Error loading the specified project')} />;
  700. }
  701. if (projectSlug && !errorFetchingProjects && projectsLoaded && !projectWithFallback) {
  702. return (
  703. <StyledLoadingError message={t('The project %s does not exist', projectSlug)} />
  704. );
  705. }
  706. const regressionIssueLoaded = defined(injectedEvent ?? props.event);
  707. if (
  708. !projectsLoaded ||
  709. !projectWithFallback ||
  710. !props.group ||
  711. (isRegressionIssue && !regressionIssueLoaded)
  712. ) {
  713. return <LoadingIndicator />;
  714. }
  715. return (
  716. <GroupDetailsContent
  717. {...props}
  718. project={projectWithFallback}
  719. group={props.group}
  720. event={props.event ?? injectedEvent}
  721. />
  722. );
  723. }
  724. function GroupDetails(props: GroupDetailsProps) {
  725. const organization = useOrganization();
  726. const router = useRouter();
  727. const {group, ...fetchGroupDetailsProps} = useFetchGroupDetails();
  728. const environments = useEnvironmentsFromUrl();
  729. const {data} = useFetchIssueTagsForDetailsPage(
  730. {
  731. groupId: router.params.groupId,
  732. orgSlug: organization.slug,
  733. environment: environments,
  734. },
  735. // Don't want this query to take precedence over the main requests
  736. {enabled: defined(group)}
  737. );
  738. const isSampleError = data?.some(tag => tag.key === 'sample_event') ?? false;
  739. const getGroupDetailsTitle = () => {
  740. const defaultTitle = 'Sentry';
  741. if (!group) {
  742. return defaultTitle;
  743. }
  744. const {title} = getTitle(group, organization?.features);
  745. const message = getMessage(group);
  746. const eventDetails = `${organization.slug} — ${group.project.slug}`;
  747. if (title && message) {
  748. return `${title}: ${message} — ${eventDetails}`;
  749. }
  750. return `${title || message || defaultTitle} — ${eventDetails}`;
  751. };
  752. const config = group && getConfigForIssueType(group, group.project);
  753. return (
  754. <Fragment>
  755. {isSampleError && group && (
  756. <SampleEventAlert project={group.project} organization={organization} />
  757. )}
  758. <SentryDocumentTitle noSuffix title={getGroupDetailsTitle()}>
  759. <PageFiltersContainer
  760. skipLoadLastUsed
  761. forceProject={group?.project}
  762. shouldForceProject
  763. >
  764. {config?.showFeedbackWidget && <FloatingFeedbackWidget />}
  765. <GroupDetailsPageContent
  766. {...props}
  767. {...{
  768. group,
  769. ...fetchGroupDetailsProps,
  770. }}
  771. />
  772. </PageFiltersContainer>
  773. </SentryDocumentTitle>
  774. </Fragment>
  775. );
  776. }
  777. export default Sentry.withProfiler(GroupDetails);
  778. const StyledLoadingError = styled(LoadingError)`
  779. margin: ${space(2)};
  780. `;
  781. const GroupTabPanels = styled(TabPanels)`
  782. flex-grow: 1;
  783. display: flex;
  784. flex-direction: column;
  785. justify-content: stretch;
  786. `;