fix: Protect against feedbacks ingested without project association (#74218)

ryan953 · web-flow · commit ee95b6819543 · 2024-07-22T14:13:04.000-07:00
Fixes some feedback types to make them align with reality a little more. This comment is still true: ``` // Typescript is a lie. `project` might be missing if feedback didn't go // through the new ingest pipeline. This can happen in new self-hosted upgrades. ``` So what I did is bake that into the feedback item type, and fix any downstream callsites, so that the feedback item page can render in this case. I also wrapped the FeedbackItem component in an ErrorBoundary, so if there are problems the rest of the page should appear. Fixes #67412 Fixes #70136
diff --git a/static/app/components/deprecatedAssigneeSelectorDropdown.tsx b/static/app/components/deprecatedAssigneeSelectorDropdown.tsx
@@ -223,7 +223,7 @@ export class DeprecatedAssigneeSelectorDropdown extends Component<
       return [];
     }
 
-    const teams = ProjectsStore.getBySlug(group.project.slug)?.teams ?? [];
+    const teams = ProjectsStore.getBySlug(group.project?.slug)?.teams ?? [];
     return teams
       .sort((a, b) => a.slug.localeCompare(b.slug))
       .map(team => ({
diff --git a/static/app/components/devtoolbar/components/feedback/feedbackPanel.tsx b/static/app/components/devtoolbar/components/feedback/feedbackPanel.tsx
@@ -143,13 +143,15 @@ function FeedbackListItem({item}: {item: FeedbackIssueListItem}) {
       </div>
 
       <div css={[badgeWithLabelCss, xSmallCss]} style={{gridArea: 'owner'}}>
-        <ProjectBadge
-          css={css({'&& img': {boxShadow: 'none'}})}
-          project={item.project}
-          avatarSize={16}
-          hideName
-          avatarProps={{hasTooltip: false}}
-        />
+        {item.project ? (
+          <ProjectBadge
+            css={css({'&& img': {boxShadow: 'none'}})}
+            project={item.project}
+            avatarSize={16}
+            hideName
+            avatarProps={{hasTooltip: false}}
+          />
+        ) : null}
         <TextOverflow>{item.shortId}</TextOverflow>
       </div>
 
diff --git a/static/app/components/feedback/feedbackItem/feedbackActions.tsx b/static/app/components/feedback/feedbackItem/feedbackActions.tsx
@@ -11,6 +11,7 @@ import {IconEllipsis} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
+import type {Group} from 'sentry/types/group';
 import {defined} from 'sentry/utils';
 import type {FeedbackIssue} from 'sentry/utils/feedback/types';
 
@@ -33,7 +34,7 @@ export default function FeedbackActions({
     <Flex gap={space(1)} align="center" className={className} style={style}>
       <ErrorBoundary mini>
         <FeedbackAssignedTo
-          feedbackIssue={feedbackItem}
+          feedbackIssue={feedbackItem as any as Group}
           feedbackEvent={eventData}
           showActorName={['medium', 'large'].includes(size)}
         />
diff --git a/static/app/components/feedback/feedbackItem/feedbackActivitySection.tsx b/static/app/components/feedback/feedbackItem/feedbackActivitySection.tsx
@@ -4,16 +4,20 @@ import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicato
 import useFeedbackCache from 'sentry/components/feedback/useFeedbackCache';
 import useMutateActivity from 'sentry/components/feedback/useMutateActivity';
 import {t} from 'sentry/locale';
-import type {Group, GroupActivity, GroupActivityNote, User} from 'sentry/types';
 import type {NoteType} from 'sentry/types/alerts';
-import {GroupActivityType} from 'sentry/types/group';
-import type {FeedbackIssue} from 'sentry/utils/feedback/types';
+import {
+  type Group,
+  type GroupActivity,
+  type GroupActivityNote,
+  GroupActivityType,
+} from 'sentry/types/group';
+import type {User} from 'sentry/types/user';
 import {uniqueId} from 'sentry/utils/guid';
 import useOrganization from 'sentry/utils/useOrganization';
 import ActivitySection from 'sentry/views/issueDetails/activitySection';
 
 type Props = {
-  feedbackItem: FeedbackIssue;
+  feedbackItem: Group;
 };
 
 function FeedbackActivitySection(props: Props) {
@@ -30,7 +34,7 @@ function FeedbackActivitySection(props: Props) {
       invalidateCached([feedbackItem.id]);
     },
     organization,
-    group: feedbackItem as unknown as Group,
+    group: feedbackItem,
   });
 
   const deleteOptions = useMemo(() => {
diff --git a/static/app/components/feedback/feedbackItem/feedbackAssignedTo.tsx b/static/app/components/feedback/feedbackItem/feedbackAssignedTo.tsx
@@ -11,14 +11,15 @@ import {getAssignedToDisplayName, getOwnerList} from 'sentry/components/group/as
 import {IconChevron, IconUser} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {FeedbackEvent, FeedbackIssue} from 'sentry/utils/feedback/types';
+import type {Group} from 'sentry/types/group';
+import type {FeedbackEvent} from 'sentry/utils/feedback/types';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
 
 interface Props {
   feedbackEvent: FeedbackEvent | undefined;
-  feedbackIssue: FeedbackIssue;
+  feedbackIssue: Group;
   showActorName: boolean;
 }
 
diff --git a/static/app/components/feedback/feedbackItem/feedbackItem.tsx b/static/app/components/feedback/feedbackItem/feedbackItem.tsx
@@ -18,6 +18,7 @@ import {IconChat, IconFire, IconLink, IconTag} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
+import type {Group} from 'sentry/types/group';
 import type {FeedbackIssue} from 'sentry/utils/feedback/types';
 import useOrganization from 'sentry/utils/useOrganization';
 
@@ -76,7 +77,7 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
           </Section>
         ) : null}
 
-        {crashReportId && (
+        {crashReportId && feedbackItem.project ? (
           <Section icon={<IconFire size="xs" />} title={t('Linked Error')}>
             <ErrorBoundary mini>
               <CrashReportSection
@@ -86,7 +87,7 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
               />
             </ErrorBoundary>
           </Section>
-        )}
+        ) : null}
 
         <FeedbackReplay
           eventData={eventData}
@@ -98,22 +99,24 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
           <TagsSection tags={tags} />
         </Section>
 
-        <Section
-          icon={<IconChat size="xs" />}
-          title={
-            <Fragment>
-              {t('Internal Activity')}
-              <QuestionTooltip
-                size="xs"
-                title={t(
-                  'Use this section to post comments that are visible only to your organization. It will also automatically update when someone resolves or assigns the feedback.'
-                )}
-              />
-            </Fragment>
-          }
-        >
-          <FeedbackActivitySection feedbackItem={feedbackItem} />
-        </Section>
+        {feedbackItem.project ? (
+          <Section
+            icon={<IconChat size="xs" />}
+            title={
+              <Fragment>
+                {t('Internal Activity')}
+                <QuestionTooltip
+                  size="xs"
+                  title={t(
+                    'Use this section to post comments that are visible only to your organization. It will also automatically update when someone resolves or assigns the feedback.'
+                  )}
+                />
+              </Fragment>
+            }
+          >
+            <FeedbackActivitySection feedbackItem={feedbackItem as unknown as Group} />
+          </Section>
+        ) : null}
       </OverflowPanelItem>
     </Fragment>
   );
diff --git a/static/app/components/feedback/feedbackItem/feedbackItemHeader.tsx b/static/app/components/feedback/feedbackItem/feedbackItemHeader.tsx
@@ -51,7 +51,7 @@ export default function FeedbackItemHeader({eventData, feedbackItem}: Props) {
         />
       </Flex>
 
-      {eventData && (
+      {eventData && feedbackItem.project ? (
         <Flex wrap="wrap" justify="flex-start" css={fixIssueLinkSpacing}>
           <ErrorBoundary mini>
             <IssueTrackingSection
@@ -61,7 +61,7 @@ export default function FeedbackItemHeader({eventData, feedbackItem}: Props) {
             />
           </ErrorBoundary>
         </Flex>
-      )}
+      ) : null}
     </VerticalSpacing>
   );
 }
diff --git a/static/app/components/feedback/feedbackItem/feedbackItemLoader.tsx b/static/app/components/feedback/feedbackItem/feedbackItemLoader.tsx
@@ -1,5 +1,6 @@
 import {useEffect} from 'react';
 
+import ErrorBoundary from 'sentry/components/errorBoundary';
 import FeedbackEmptyDetails from 'sentry/components/feedback/details/feedbackEmptyDetails';
 import FeedbackErrorDetails from 'sentry/components/feedback/details/feedbackErrorDetails';
 import FeedbackItem from 'sentry/components/feedback/feedbackItem/feedbackItem';
@@ -37,9 +38,13 @@ export default function FeedbackItemLoader() {
     <Placeholder height="100%" />
   ) : issueResult.isError ? (
     <FeedbackErrorDetails error={t('Unable to load feedback')} />
-  ) : !issueData ? (
-    <FeedbackEmptyDetails />
+  ) : issueData ? (
+    <ErrorBoundary
+      customComponent={<FeedbackErrorDetails error={t('Unable to load feedback')} />}
+    >
+      <FeedbackItem eventData={eventData} feedbackItem={issueData} tags={tags} />
+    </ErrorBoundary>
   ) : (
-    <FeedbackItem eventData={eventData} feedbackItem={issueData} tags={tags} />
+    <FeedbackEmptyDetails />
   );
 }
diff --git a/static/app/components/feedback/feedbackItem/feedbackReplay.tsx b/static/app/components/feedback/feedbackItem/feedbackReplay.tsx
@@ -29,7 +29,7 @@ export default function FeedbackReplay({eventData, feedbackItem, organization}:
   const {hasSentOneReplay, fetching: isFetchingSentOneReplay} =
     useHaveSelectedProjectsSentAnyReplayEvents();
   const platformSupported = replayPlatforms.includes(
-    feedbackItem.project.platform as PlatformKey
+    feedbackItem.project?.platform as PlatformKey
   );
 
   if (replayId && hasReplayId) {
diff --git a/static/app/components/feedback/feedbackItem/feedbackShortId.tsx b/static/app/components/feedback/feedbackItem/feedbackShortId.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 
 import {Flex} from 'sentry/components/container/flex';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import useCurrentFeedbackProject from 'sentry/components/feedback/useCurrentFeedbackProject';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import TextOverflow from 'sentry/components/textOverflow';
 import {IconChevron} from 'sentry/icons';
@@ -36,12 +37,17 @@ const hideDropdown = css`
 
 export default function FeedbackShortId({className, feedbackItem, style}: Props) {
   const organization = useOrganization();
+  const projectSlug = useCurrentFeedbackProject();
 
   const feedbackUrl =
     window.location.origin +
-    normalizeUrl(
-      `/organizations/${organization.slug}/feedback/?feedbackSlug=${feedbackItem.project.slug}:${feedbackItem.id}&project=${feedbackItem.project.id}`
-    );
+    normalizeUrl({
+      pathname: `/organizations/${organization.slug}/feedback/`,
+      query: {
+        feedbackSlug: `${projectSlug}:${feedbackItem.id}`,
+        project: feedbackItem.project?.id,
+      },
+    });
 
   const {onClick: handleCopyUrl} = useCopyToClipboard({
     successMessage: t('Copied Feedback URL to clipboard'),
@@ -62,12 +68,14 @@ export default function FeedbackShortId({className, feedbackItem, style}: Props)
       css={hideDropdown}
     >
       <Flex gap={space(0.75)} align="center">
-        <ProjectBadge
-          project={feedbackItem.project}
-          avatarSize={16}
-          hideName
-          avatarProps={{hasTooltip: true, tooltip: feedbackItem.project.slug}}
-        />
+        {feedbackItem.project ? (
+          <ProjectBadge
+            project={feedbackItem.project}
+            avatarSize={16}
+            hideName
+            avatarProps={{hasTooltip: true, tooltip: feedbackItem.project.slug}}
+          />
+        ) : null}
         <ShortId>{feedbackItem.shortId}</ShortId>
       </Flex>
       <DropdownMenu
diff --git a/static/app/components/feedback/feedbackItem/messageSection.tsx b/static/app/components/feedback/feedbackItem/messageSection.tsx
@@ -21,6 +21,7 @@ interface Props {
 
 export default function MessageSection({eventData, feedbackItem}: Props) {
   const organization = useOrganization();
+  const project = feedbackItem.project;
   return (
     <Fragment>
       <Flex wrap="wrap" flex="1 1 auto" gap={space(1)} justify="space-between">
@@ -39,19 +40,19 @@ export default function MessageSection({eventData, feedbackItem}: Props) {
       <Blockquote>
         <pre>{feedbackItem.metadata.message}</pre>
 
-        {eventData && (
+        {eventData && project ? (
           <Role organization={organization} role={organization.attachmentsRole}>
             {({hasRole}) =>
               hasRole ? (
                 <ScreenshotSection
                   event={eventData}
                   organization={organization}
-                  projectSlug={feedbackItem.project.slug}
+                  projectSlug={project.slug}
                 />
               ) : null
             }
           </Role>
-        )}
+        ) : null}
       </Blockquote>
       <Flex justify="flex-end">
         <Flex gap={space(1)} align="center">
diff --git a/static/app/components/feedback/feedbackItem/useFeedbackActions.ts b/static/app/components/feedback/feedbackItem/useFeedbackActions.ts
@@ -25,13 +25,13 @@ const mutationOptions = {
   },
 };
 
-export default function useActions({feedbackItem}: Props) {
+export default function useFeedbackActions({feedbackItem}: Props) {
   const organization = useOrganization();
 
   const {markAsRead, resolve} = useMutateFeedback({
     feedbackIds: [feedbackItem.id],
     organization,
-    projectIds: [feedbackItem.project.id],
+    projectIds: feedbackItem.project ? [feedbackItem.project.id] : [],
   });
 
   // reuse the issues ignored category for spam feedbacks
diff --git a/static/app/components/feedback/hydrateFeedbackTags.tsx b/static/app/components/feedback/hydrateFeedbackTags.tsx
@@ -28,7 +28,7 @@ export default function hydrateFeedbackTags(
       ? {transaction: eventTags.find(e => e.key === 'transaction')?.value}
       : {}),
     ...(eventData.platform
-      ? {platform: issueData?.project.platform ?? eventData.platform}
+      ? {platform: issueData?.project?.platform ?? eventData.platform}
       : {}),
     ...(eventData.sdk?.name ? {'sdk.name': eventData.sdk?.name} : {}),
     ...(eventData.sdk?.version ? {'sdk.version': eventData.sdk?.version} : {}),
diff --git a/static/app/components/feedback/list/feedbackList.tsx b/static/app/components/feedback/list/feedbackList.tsx
@@ -10,6 +10,7 @@ import styled from '@emotion/styled';
 
 import waitingForEventImg from 'sentry-images/spot/waiting-for-event.svg';
 
+import ErrorBoundary from 'sentry/components/errorBoundary';
 import FeedbackListHeader from 'sentry/components/feedback/list/feedbackListHeader';
 import FeedbackListItem from 'sentry/components/feedback/list/feedbackListItem';
 import useListItemCheckboxState from 'sentry/components/feedback/list/useListItemCheckboxState';
@@ -83,14 +84,16 @@ export default function FeedbackList() {
         parent={parent}
         rowIndex={index}
       >
-        <FeedbackListItem
-          feedbackItem={item}
-          isSelected={checkboxState.isSelected(item.id)}
-          onSelect={() => {
-            checkboxState.toggleSelected(item.id);
-          }}
-          style={style}
-        />
+        <ErrorBoundary mini>
+          <FeedbackListItem
+            feedbackItem={item}
+            isSelected={checkboxState.isSelected(item.id)}
+            onSelect={() => {
+              checkboxState.toggleSelected(item.id);
+            }}
+            style={style}
+          />
+        </ErrorBoundary>
       </CellMeasurer>
     );
   };
diff --git a/static/app/components/feedback/list/feedbackListItem.tsx b/static/app/components/feedback/list/feedbackListItem.tsx
diff --git a/static/app/components/feedback/useCurrentFeedbackId.tsx b/static/app/components/feedback/useCurrentFeedbackId.tsx
diff --git a/static/app/components/feedback/useCurrentFeedbackProject.tsx b/static/app/components/feedback/useCurrentFeedbackProject.tsx
diff --git a/static/app/components/feedback/useFetchFeedbackData.tsx b/static/app/components/feedback/useFetchFeedbackData.tsx
diff --git a/static/app/components/feedback/useRedirectToFeedbackFromEvent.tsx b/static/app/components/feedback/useRedirectToFeedbackFromEvent.tsx
diff --git a/static/app/utils/feedback/types.tsx b/static/app/utils/feedback/types.tsx
diff --git a/static/app/views/feedback/feedbackListPage.tsx b/static/app/views/feedback/feedbackListPage.tsx

Original file line number	Diff line number	Diff line change
`@@ -223,7 +223,7 @@ export class DeprecatedAssigneeSelectorDropdown extends Component<`
`223`	`223`	`return [];`
`224`	`224`	`}`
`225`	`225`
`226`		`- const teams = ProjectsStore.getBySlug(group.project.slug)?.teams ?? [];`
	`226`	`+ const teams = ProjectsStore.getBySlug(group.project?.slug)?.teams ?? [];`
`227`	`227`	`return teams`
`228`	`228`	`.sort((a, b) => a.slug.localeCompare(b.slug))`
`229`	`229`	`.map(team => ({`