feat(replay): Add warning banners for Jetpack Compose 1.8+ (#93916)

billyvg · web-flow · commit 633f26d19a31 · 2025-06-19T17:09:03.000-04:00
This displays warning banners on the replay list and details when: - any replay has sdk name `sentry.java.android` - sdk version is < 8.14.0 - on replay details we also check to see if it is a video replay ![image](https://github.com/user-attachments/assets/51ae7cc6-22d4-4353-9afd-d79f9d25ba4e) ![image](https://github.com/user-attachments/assets/f52a21d2-23ba-4172-acf5-8086e57e12f4)
diff --git a/static/app/components/replays/replayView.tsx b/static/app/components/replays/replayView.tsx
@@ -14,10 +14,13 @@ import {ReplaySidebarToggleButton} from 'sentry/components/replays/replaySidebar
 import TextCopyInput from 'sentry/components/textCopyInput';
 import {tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {MIN_JETPACK_COMPOSE_VIEW_HIERARCHY_PII_FIX} from 'sentry/utils/replays/sdkVersions';
+import {semverCompare} from 'sentry/utils/versions/semverCompare';
 import useIsFullscreen from 'sentry/utils/window/useIsFullscreen';
 import Breadcrumbs from 'sentry/views/replays/detail/breadcrumbs';
 import BrowserOSIcons from 'sentry/views/replays/detail/browserOSIcons';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
+import {JetpackComposePiiNotice} from 'sentry/views/replays/jetpackComposePiiNotice';
 
 import {CanvasSupportNotice} from './canvasSupportNotice';
 
@@ -82,6 +85,14 @@ function ReplayView({toggleFullscreen, isLoading}: Props) {
             <ReplayProcessingError processingErrors={replay.processingErrors()} />
           ) : (
             <FluidHeight>
+              {isVideoReplay &&
+              replay?.getReplay()?.sdk.name === 'sentry.java.android' &&
+              semverCompare(
+                replay?.getReplay()?.sdk.version || '',
+                MIN_JETPACK_COMPOSE_VIEW_HIERARCHY_PII_FIX.minVersion
+              ) === -1 ? (
+                <JetpackComposePiiNotice />
+              ) : null}
               <CanvasSupportNotice />
               <Panel>
                 <ReplayPlayer inspectable />
diff --git a/static/app/utils/replays/sdkVersions.tsx b/static/app/utils/replays/sdkVersions.tsx
@@ -3,3 +3,8 @@ export const MIN_DEAD_RAGE_CLICK_SDK = {
   changelog:
     'https://changelog.getsentry.com/announcements/user-frustration-signals-rage-and-dead-clicks-in-session-replay',
 };
+
+export const MIN_JETPACK_COMPOSE_VIEW_HIERARCHY_PII_FIX = {
+  minVersion: '8.14.0',
+  changelog: 'https://github.com/getsentry/sentry-java/releases',
+};
diff --git a/static/app/views/replays/detail/tagPanel/useTagFilters.spec.tsx b/static/app/views/replays/detail/tagPanel/useTagFilters.spec.tsx
@@ -24,7 +24,7 @@ describe('useTagsFilters', () => {
     const {result} = renderHook(useTagFilters, {
       initialProps: {tags},
     });
-    expect(Object.keys(result.current.items)).toHaveLength(9);
+    expect(Object.keys(result.current.items)).toHaveLength(10);
   });
 
   it('should filter by searchTerm', () => {
diff --git a/static/app/views/replays/jetpackComposePiiNotice.tsx b/static/app/views/replays/jetpackComposePiiNotice.tsx
@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+
+import {Alert} from 'sentry/components/core/alert';
+import ExternalLink from 'sentry/components/links/externalLink';
+import {tct} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import {MIN_JETPACK_COMPOSE_VIEW_HIERARCHY_PII_FIX} from 'sentry/utils/replays/sdkVersions';
+
+export function JetpackComposePiiNotice() {
+  return (
+    <AndroidSdkWarningContainer>
+      <Alert type="error" showIcon>
+        {tct(
+          'There is a [advisory:known PII/masking issue] with [jetpack:Jetpack Compose versions 1.8 and above]. [link:Update your Sentry SDK to version 8.14.0 or later] to ensure replays are properly masked.',
+          {
+            jetpack: <strong />,
+            advisory: (
+              <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} />
+            ),
+          }
+        )}
+      </Alert>
+    </AndroidSdkWarningContainer>
+  );
+}
+
+const AndroidSdkWarningContainer = styled('div')`
+  margin-bottom: ${space(2)};
+`;
diff --git a/static/app/views/replays/list/replaysList.tsx b/static/app/views/replays/list/replaysList.tsx
@@ -6,13 +6,16 @@ import {t, tct} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {decodeList, decodeScalar, decodeSorts} from 'sentry/utils/queryString';
 import useFetchReplayList from 'sentry/utils/replays/hooks/useFetchReplayList';
+import {MIN_JETPACK_COMPOSE_VIEW_HIERARCHY_PII_FIX} from 'sentry/utils/replays/sdkVersions';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import useLocationQuery from 'sentry/utils/url/useLocationQuery';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjectSdkNeedsUpdate from 'sentry/utils/useProjectSdkNeedsUpdate';
+import {semverCompare} from 'sentry/utils/versions/semverCompare';
 import useAllMobileProj from 'sentry/views/replays/detail/useAllMobileProj';
+import {JetpackComposePiiNotice} from 'sentry/views/replays/jetpackComposePiiNotice';
 import ReplayTable from 'sentry/views/replays/replayTable';
 import {ReplayColumn} from 'sentry/views/replays/replayTable/types';
 
@@ -84,8 +87,19 @@ function ReplaysList() {
         ReplayColumn.ACTIVITY,
       ];
 
+  const needsJetpackComposePiiWarning = replays?.find(replay => {
+    return (
+      replay?.sdk.name === 'sentry.java.android' &&
+      semverCompare(
+        replay?.sdk.version ?? '',
+        MIN_JETPACK_COMPOSE_VIEW_HIERARCHY_PII_FIX.minVersion
+      ) === -1
+    );
+  });
+
   return (
     <Fragment>
+      {needsJetpackComposePiiWarning && <JetpackComposePiiNotice />}
       <ReplayTable
         referrerLocation={'replay'}
         fetchError={error}
diff --git a/static/app/views/replays/types.tsx b/static/app/views/replays/types.tsx
@@ -20,10 +20,34 @@ export type ReplayRecord = {
     name: null | string;
     version: null | string;
   };
+  clicks: Array<{
+    ['click.alt']: string | null;
+    ['click.class']: string | null;
+    ['click.component_name']: string | null;
+    ['click.id']: string | null;
+    ['click.label']: string | null;
+    ['click.role']: string | null;
+    ['click.tag']: string | null;
+    ['click.testid']: string | null;
+    ['click.text']: string | null;
+    ['click.title']: string | null;
+  }>;
+  /**
+   * The number of dead clicks associated with the replay.
+   */
+  count_dead_clicks: number;
   /**
    * The number of errors associated with the replay.
    */
   count_errors: number;
+  /**
+   * The number of infos associated with the replay.
+   */
+  count_infos: number;
+  /**
+   * The number of rage clicks associated with the replay.
+   */
+  count_rage_clicks: number;
   /**
    * The number of segments that make up the replay.
    */
@@ -32,6 +56,10 @@ export type ReplayRecord = {
    * The number of urls visited in the replay.
    */
   count_urls: number;
+  /**
+   * The number of warnings associated with the replay.
+   */
+  count_warnings: number;
   device: {
     brand: null | string;
     family: null | string;
@@ -44,6 +72,9 @@ export type ReplayRecord = {
    */
   duration: Duration;
   environment: null | string;
+  /**
+   * The IDs of the errors associated with the replay.
+   */
   error_ids: string[];
   /**
    * The **latest** timestamp received as determined by the SDK.
@@ -57,6 +88,10 @@ export type ReplayRecord = {
    * The ID of the Replay instance
    */
   id: string;
+  /**
+   * The IDs of the infos associated with the replay.
+   */
+  info_ids: string[];
   /**
    * Whether the replay was deleted.
    * When deleted the rrweb data & attachments are removed from blob storage,
@@ -67,9 +102,15 @@ export type ReplayRecord = {
     name: null | string;
     version: null | string;
   };
+  ota_updates: {
+    channel: string;
+    runtime_version: string;
+    update_id: string;
+  };
   platform: string;
   project_id: string;
   releases: null | string[];
+  replay_type: 'buffer' | 'session';
   sdk: {
     name: null | string;
     version: null | string;
@@ -89,14 +130,7 @@ export type ReplayRecord = {
     username: null | string;
     geo?: Geo;
   };
-  /**
-   * The number of dead clicks associated with the replay.
-   */
-  count_dead_clicks?: number;
-  /**
-   * The number of rage clicks associated with the replay.
-   */
-  count_rage_clicks?: number;
+  warning_ids: string[];
 };
 
 // The ReplayRecord fields, but with nested fields represented as `foo.bar`.
@@ -152,18 +186,37 @@ export type ReplayListRecord = Pick<
   ReplayRecord,
   | 'activity'
   | 'browser'
+  | 'clicks'
   | 'count_dead_clicks'
   | 'count_errors'
+  | 'count_infos'
   | 'count_rage_clicks'
+  | 'count_segments'
+  | 'count_urls'
+  | 'count_warnings'
+  | 'device'
+  | 'dist'
   | 'duration'
+  | 'environment'
+  | 'error_ids'
   | 'finished_at'
   | 'has_viewed'
   | 'id'
+  | 'info_ids'
   | 'is_archived'
   | 'os'
+  | 'ota_updates'
+  | 'platform'
   | 'project_id'
+  | 'releases'
+  | 'replay_type'
+  | 'sdk'
   | 'started_at'
+  | 'tags'
+  | 'trace_ids'
+  | 'urls'
   | 'user'
+  | 'warning_ids'
 >;
 
 /**
diff --git a/tests/js/fixtures/replayList.ts b/tests/js/fixtures/replayList.ts
@@ -15,9 +15,24 @@ export function ReplayListFixture(
         name: 'Firefox',
         version: '111.0',
       },
+      clicks: [],
       count_dead_clicks: 0,
-      count_rage_clicks: 0,
       count_errors: 0,
+      count_infos: 0,
+      count_rage_clicks: 0,
+      count_segments: 0,
+      count_urls: 0,
+      count_warnings: 0,
+      device: {
+        brand: 'Firefox',
+        family: 'Firefox',
+        model_id: '111.0',
+        name: 'Firefox',
+      },
+      dist: '111.0',
+      environment: 'production',
+      error_ids: [],
+      info_ids: [],
       duration: duration(30000),
       finished_at: new Date('2022-09-15T06:54:00+00:00'),
       has_viewed: false,
@@ -27,8 +42,24 @@ export function ReplayListFixture(
         name: 'sentry.javascript.react',
         version: '7.42.0',
       },
+      ota_updates: {
+        channel: 'stable',
+        runtime_version: '111.0',
+        update_id: '1234567890',
+      },
+      platform: 'javascript',
       project_id: '2',
+      releases: [],
+      replay_type: 'buffer',
+      sdk: {
+        name: 'sentry.javascript.react',
+        version: '7.42.0',
+      },
       started_at: new Date('2022-09-15T06:50:03+00:00'),
+      tags: {},
+      trace_ids: [],
+      urls: [],
+      warning_ids: [],
       user: {
         display_name: 'testDisplayName',
         email: '',
diff --git a/tests/js/fixtures/replayRecord.ts b/tests/js/fixtures/replayRecord.ts
@@ -7,15 +7,18 @@ export function ReplayRecordFixture(
 ): ReplayRecord {
   return {
     activity: 0,
+    clicks: [],
     browser: {
       name: 'Other',
       version: '',
     },
     count_dead_clicks: 1,
-    count_rage_clicks: 1,
     count_errors: 1,
+    count_infos: 1,
+    count_rage_clicks: 1,
     count_segments: 14,
     count_urls: 1,
+    count_warnings: 1,
     device: {
       name: '',
       brand: '',
@@ -29,14 +32,21 @@ export function ReplayRecordFixture(
     finished_at: new Date('Sep 22, 2022 5:00:03 PM UTC'),
     has_viewed: false,
     id: '761104e184c64d439ee1014b72b4d83b',
+    info_ids: [],
     is_archived: false,
     os: {
       name: 'Other',
       version: '',
     },
+    ota_updates: {
+      channel: 'stable',
+      runtime_version: '1.0.0',
+      update_id: '1234567890',
+    },
     platform: 'javascript',
     project_id: '6273278',
     releases: ['1.0.0', '2.0.0'],
+    replay_type: 'buffer',
     sdk: {
       name: 'sentry.javascript.browser',
       version: '7.1.1',
@@ -51,6 +61,7 @@ export function ReplayRecordFixture(
       ip: '127.0.0.1',
       display_name: '127.0.0.1',
     },
+    warning_ids: [],
     ...replayRecord,
     tags: {
       ...replayRecord.tags,
@@ -60,6 +71,7 @@ export function ReplayRecordFixture(
       'os.name': [replayRecord.os?.name ?? 'Other'],
       platform: [replayRecord.platform ?? 'javascript'],
       releases: replayRecord.releases ?? ['1.0.0', '2.0.0'],
+      replayType: ['buffer'],
       'sdk.name': [replayRecord.sdk?.name ?? 'sentry.javascript.browser'],
       'sdk.version': [replayRecord.sdk?.version ?? '7.1.1'],
       'user.ip': [replayRecord.user?.ip ?? '127.0.0.1'],
