ref(sdk-updates): Refactor types and args related to useOrganizationSDKUpdates and uses (#97642)

The hook `useOrganizationSDKUpdates` was returning the wrong types, it
was way to narrow and didn't get the `isFetched` return changed over to
`isPending` back when react-query updated. Now it's got the proper
response type.

Also, i updated `useProjectSdkNeedsUpdate` and added tests, to use
`useOrganizationSDKUpdates` internally. This gives it the correct types
too.

Finally, i updated all the replay callsites to use consts for all the
minVersion fields. This way we can see all the special versions of the
replay SDK that are out there in one spot. All the min_version_* stuff
also has a link to docs or something, even if that's not yet used in the
UI; it's a reference for us too.

Author: ryan953

static/app/components/replays/canvasSupportNotice.tsx

@@ -9,6 +9,7 @@ import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useReplayReader} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
+import {MIN_CANVAS_SUPPORTED_SDK} from 'sentry/utils/replays/sdkVersions';
 import useDismissAlert from 'sentry/utils/useDismissAlert';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjectSdkNeedsUpdate from 'sentry/utils/useProjectSdkNeedsUpdate';
@@ -25,8 +26,7 @@ export function CanvasSupportNotice() {
   const {isFetching} = useReplayContext();
   const projectId = replay?.getReplay().project_id;
   const {needsUpdate} = useProjectSdkNeedsUpdate({
-    minVersion: '7.98.0',
-    organization,
+    minVersion: MIN_CANVAS_SUPPORTED_SDK.minVersion,
     projectId: [projectId ?? '-1'],
   });
 

static/app/components/replays/jetpackComposePiiNotice.tsx

@@ -38,7 +38,9 @@ export function JetpackComposePiiNotice() {
               <ExternalLink href="https://github.com/getsentry/sentry-java/security/advisories/GHSA-7cjh-xx4r-qh3f" />
             ),
             link: (
-              <ExternalLink href={MIN_JETPACK_COMPOSE_VIEW_HIERARCHY_PII_FIX.changelog} />
+              <ExternalLink
+                href={MIN_JETPACK_COMPOSE_VIEW_HIERARCHY_PII_FIX.releaseNotes}
+              />
             ),
           }
         )}

static/app/utils/replays/sdkVersions.tsx

@@ -1,6 +1,18 @@
 export const MIN_REPLAY_CLICK_SDK = {
   minVersion: '7.44.0',
-  changelog: 'https://github.com/getsentry/sentry-javascript/releases/tag/7.44.0',
+  releaseNotes: 'https://github.com/getsentry/sentry-javascript/releases/tag/7.44.0',
+};
+
+// Knowns bugs in v7.50 to v7.53.0 inclusive
+export const MIN_REPLAY_NETWORK_BODIES_SDK_KNOWN_BUG = {
+  minVersion: '7.50.0',
+  releaseNotes: 'https://github.com/getsentry/sentry-javascript/releases/tag/7.50.0',
+};
+
+// This version fixes the known bugs when capturing network bodies
+export const MIN_REPLAY_NETWORK_BODIES_SDK = {
+  minVersion: '7.53.1',
+  releaseNotes: 'https://github.com/getsentry/sentry-javascript/releases/tag/7.53.1',
 };
 
 export const MIN_DEAD_RAGE_CLICK_SDK = {
@@ -9,7 +21,12 @@ export const MIN_DEAD_RAGE_CLICK_SDK = {
     'https://changelog.getsentry.com/announcements/user-frustration-signals-rage-and-dead-clicks-in-session-replay',
 };
 
+export const MIN_CANVAS_SUPPORTED_SDK = {
+  minVersion: '7.98.0',
+  docs: 'https://docs.sentry.io/platforms/javascript/session-replay/troubleshooting/#my-canvas-elements-arent-getting-captured',
+};
+
 export const MIN_JETPACK_COMPOSE_VIEW_HIERARCHY_PII_FIX = {
   minVersion: '8.14.0',
-  changelog: 'https://github.com/getsentry/sentry-java/releases/tag/8.14.0',
+  releaseNotes: 'https://github.com/getsentry/sentry-java/releases/tag/8.14.0',
 };

static/app/utils/useOrganizationSDKUpdates.tsx

@@ -7,11 +7,7 @@ interface Options {
   projectId?: string[];
 }
 
-export function useOrganizationSDKUpdates({projectId, enabled}: Options): {
-  isError: boolean;
-  isFetching: boolean;
-  data?: ProjectSdkUpdates[];
-} {
+export function useOrganizationSDKUpdates({projectId, enabled}: Options) {
   const organization = useOrganization();
 
   return useApiQuery<ProjectSdkUpdates[]>(

static/app/utils/useProjectSdkNeedsUpdate.spec.tsx

@@ -7,13 +7,16 @@ import {renderHook, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import {QueryClientProvider} from 'sentry/utils/queryClient';
 import useProjectSdkNeedsUpdate from 'sentry/utils/useProjectSdkNeedsUpdate';
+import {OrganizationContext} from 'sentry/views/organizationContext';
 
 const MOCK_ORG = OrganizationFixture();
 const MOCK_PROJECT = ProjectFixture();
 
 function wrapper({children}: {children?: ReactNode}) {
   return (
-    <QueryClientProvider client={makeTestQueryClient()}>{children}</QueryClientProvider>
+    <OrganizationContext value={MOCK_ORG}>
+      <QueryClientProvider client={makeTestQueryClient()}>{children}</QueryClientProvider>
+    </OrganizationContext>
   );
 }
 
@@ -47,17 +50,14 @@ describe('useProjectSdkNeedsUpdate', () => {
       wrapper,
       initialProps: {
         minVersion: '1.0.0',
-        organization: MOCK_ORG,
         projectId: [MOCK_PROJECT.id],
       },
     });
 
     await waitFor(() => {
       expect(result.current.isError).toBeFalsy();
     });
-    await waitFor(() => {
-      expect(result.current.isFetching).toBeFalsy();
-    });
+    expect(result.current.isFetching).toBeFalsy();
     expect(result.current.needsUpdate).toBeFalsy();
   });
 
@@ -73,20 +73,17 @@ describe('useProjectSdkNeedsUpdate', () => {
       wrapper,
       initialProps: {
         minVersion: '8.0.0',
-        organization: MOCK_ORG,
         projectId: [MOCK_PROJECT.id],
       },
     });
     await waitFor(() => {
       expect(result.current.isError).toBeFalsy();
     });
-    await waitFor(() => {
-      expect(result.current.isFetching).toBeFalsy();
-    });
+    expect(result.current.isFetching).toBeFalsy();
     expect(result.current.needsUpdate).toBeTruthy();
   });
 
-  it('should return needsUpdate if multiple projects', async () => {
+  it('should return needsUpdate if all projects are below minSdk', async () => {
     mockCurrentVersion([
       {
         projectId: '1',
@@ -102,17 +99,14 @@ describe('useProjectSdkNeedsUpdate', () => {
       wrapper,
       initialProps: {
         minVersion: '8.0.0',
-        organization: MOCK_ORG,
         projectId: ['1', '2'],
       },
     });
 
     await waitFor(() => {
       expect(result.current.isError).toBeFalsy();
     });
-    await waitFor(() => {
-      expect(result.current.isFetching).toBeFalsy();
-    });
+    expect(result.current.isFetching).toBeFalsy();
     expect(result.current.needsUpdate).toBeTruthy();
   });
 
@@ -132,17 +126,14 @@ describe('useProjectSdkNeedsUpdate', () => {
       wrapper,
       initialProps: {
         minVersion: '8.0.0',
-        organization: MOCK_ORG,
         projectId: ['1', '2'],
       },
     });
 
     await waitFor(() => {
       expect(result.current.isError).toBeFalsy();
     });
-    await waitFor(() => {
-      expect(result.current.isFetching).toBeFalsy();
-    });
+    expect(result.current.isFetching).toBeFalsy();
     expect(result.current.needsUpdate).toBeFalsy();
   });
 });

static/app/utils/useProjectSdkNeedsUpdate.tsx

@@ -1,55 +1,38 @@
-import type {Organization} from 'sentry/types/organization';
-import {useQuery} from 'sentry/utils/queryClient';
-import useApi from 'sentry/utils/useApi';
+import {useOrganizationSDKUpdates} from 'sentry/utils/useOrganizationSDKUpdates';
 import {semverCompare} from 'sentry/utils/versions/semverCompare';
 
 type Opts = {
   minVersion: string;
-  organization: Organization;
   projectId: string[];
 };
 
-function useProjectSdkNeedsUpdate({
+export default function useProjectSdkNeedsUpdate({
   minVersion,
-  organization,
   projectId,
 }: Opts):
   | {isError: false; isFetching: true; needsUpdate: undefined}
   | {isError: true; isFetching: false; needsUpdate: undefined}
   | {isError: false; isFetching: false; needsUpdate: boolean} {
-  const path = `/organizations/${organization.slug}/sdk-updates/`;
-  const api = useApi({persistInFlight: true});
-  const {data, isPending, isError} = useQuery({
-    queryKey: [path],
-    queryFn: async () => {
-      try {
-        return await api.requestPromise(path, {
-          method: 'GET',
-        });
-      } catch {
-        return [];
-      }
-    },
-    staleTime: 5000,
-    refetchOnMount: false,
+  const {data, isError, isPending} = useOrganizationSDKUpdates({
+    projectId,
+    enabled: true,
   });
 
   if (isPending) {
     return {isError: false, isFetching: true, needsUpdate: undefined};
   }
-
   if (isError) {
     return {isError: true, isFetching: false, needsUpdate: undefined};
   }
 
-  const selectedProjects = data.filter((sdkUpdate: any) =>
+  const selectedProjects = data.filter(sdkUpdate =>
     projectId.includes(sdkUpdate.projectId)
   );
 
   const needsUpdate =
     selectedProjects.length > 0 &&
     selectedProjects.every(
-      (sdkUpdate: any) => semverCompare(sdkUpdate.sdkVersion || '', minVersion) === -1
+      sdkUpdate => semverCompare(sdkUpdate.sdkVersion || '', minVersion) === -1
     );
 
   return {
@@ -58,5 +41,3 @@ function useProjectSdkNeedsUpdate({
     needsUpdate,
   };
 }
-
-export default useProjectSdkNeedsUpdate;

static/app/views/replays/detail/network/details/onboarding.tsx

@@ -7,6 +7,10 @@ import TextCopyInput from 'sentry/components/textCopyInput';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {useReplayReader} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
+import {
+  MIN_REPLAY_NETWORK_BODIES_SDK,
+  MIN_REPLAY_NETWORK_BODIES_SDK_KNOWN_BUG,
+} from 'sentry/utils/replays/sdkVersions';
 import type {SpanFrame} from 'sentry/utils/replays/types';
 import useDismissAlert from 'sentry/utils/useDismissAlert';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -59,13 +63,11 @@ export function Setup({
   showSnippet: Output;
   visibleTab: TabKey;
 }) {
-  const organization = useOrganization();
   const {isFetching, needsUpdate} = useProjectSdkNeedsUpdate({
-    // Only show update instructions if not >= 7.50.0, but our instructions
+    // Only show update instructions if <7.50.0, but our instructions
     // will show a different min version as there are known bugs in 7.50 ->
     // 7.53
-    minVersion: '7.50.0',
-    organization,
+    minVersion: MIN_REPLAY_NETWORK_BODIES_SDK_KNOWN_BUG.minVersion,
     projectId: [projectId],
   });
   const sdkNeedsUpdate = !isFetching && Boolean(needsUpdate);
@@ -89,7 +91,7 @@ export function Setup({
     ) : null
   ) : (
     <SetupInstructions
-      minVersion="7.53.1"
+      minVersion={MIN_REPLAY_NETWORK_BODIES_SDK.minVersion}
       sdkNeedsUpdate={sdkNeedsUpdate}
       showSnippet={showSnippet}
       url={url}

static/app/views/replays/list.tsx

@@ -39,7 +39,6 @@ export default function ReplaysListContainer() {
   } = usePageFilters();
   const rageClicksSdkVersion = useProjectSdkNeedsUpdate({
     minVersion: MIN_DEAD_RAGE_CLICK_SDK.minVersion,
-    organization,
     projectId: projects.map(String),
   });
 

static/app/views/replays/list/replayIndexTable.tsx

@@ -79,7 +79,6 @@ export default function ReplayIndexTable() {
 
   const rageClicksSdkVersion = useProjectSdkNeedsUpdate({
     minVersion: MIN_DEAD_RAGE_CLICK_SDK.minVersion,
-    organization,
     projectId: projects.map(String),
   });
   const hasSentReplays = useHaveSelectedProjectsSentAnyReplayEvents();
@@ -186,13 +185,11 @@ export default function ReplayIndexTable() {
 }
 
 function useNeedsSDKUpdateForClickSearch({query}: {query: string}) {
-  const organization = useOrganization();
   const {
     selection: {projects},
   } = usePageFilters();
   const {needsUpdate} = useProjectSdkNeedsUpdate({
     minVersion: MIN_REPLAY_CLICK_SDK.minVersion,
-    organization,
     projectId: projects.map(String),
   });