feat(projects): Show ANR rate for Apple projects

philipphofmann · philipphofmann · commit 182a789e55e2 · 2025-03-11T09:52:38.000+01:00
Show the ANR rate for Apple projects and hide the foreground ANR rate. It's acceptable to still call it ANR rate, because the feature is hidden behind a feature flag. We will update the descriptions in an upcoming PR to rename ANR rate to App Hang rate, see GH-86666. Fixes GH-86665
diff --git a/src/sentry/features/temporary.py b/src/sentry/features/temporary.py
@@ -522,6 +522,10 @@ def register_temporary_features(manager: FeatureManager):
     manager.add("projects:plugins", ProjectPluginFeature, FeatureHandlerStrategy.INTERNAL, default=True, api_expose=True)
 
     manager.add("projects:profiling-ingest-unsampled-profiles", ProjectFeature, FeatureHandlerStrategy.FLAGPOLE, api_expose=False)
+
+    # Enable apple app hang rate
+    manager.add("projects:project-detail-apple-app-hang-rate", ProjectFeature, FeatureHandlerStrategy.FLAGPOLE, api_expose=False)
+
     # fmt: on
 
     # Partner oauth
diff --git a/static/app/views/projectDetail/projectCharts.spec.tsx b/static/app/views/projectDetail/projectCharts.spec.tsx
@@ -7,10 +7,14 @@ import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrar
 import type {PlatformKey} from 'sentry/types/project';
 import ProjectCharts from 'sentry/views/projectDetail/projectCharts';
 
-function renderProjectCharts(platform?: PlatformKey, chartDisplay?: string) {
+function renderProjectCharts(
+  platform?: PlatformKey,
+  chartDisplay?: string,
+  features?: [string]
+) {
   const {organization, router, project} = initializeOrg({
     organization: OrganizationFixture(),
-    projects: [{platform}],
+    projects: [{platform, features}],
     router: {
       params: {orgId: 'org-slug', projectId: 'project-slug'},
       location: {
@@ -76,6 +80,43 @@ describe('ProjectDetail > ProjectCharts', () => {
     expect(screen.getByText('ANR Rate')).toBeInTheDocument();
   });
 
+  it('renders App Hang options for apple projects when the feature flag is enabled', async () => {
+    renderProjectCharts('apple', undefined, [
+      'projects:project-detail-apple-app-hang-rate',
+    ]);
+
+    await userEvent.click(
+      screen.getByRole('button', {name: 'Display Crash Free Sessions'})
+    );
+
+    expect(screen.getByText('ANR Rate')).toBeInTheDocument();
+    expect(screen.queryByText('Foreground ANR Rate')).not.toBeInTheDocument();
+  });
+
+  it('renders App Hang options for apple-ios projects when the feature flag is enabled', async () => {
+    renderProjectCharts('apple-ios', undefined, [
+      'projects:project-detail-apple-app-hang-rate',
+    ]);
+
+    await userEvent.click(
+      screen.getByRole('button', {name: 'Display Crash Free Sessions'})
+    );
+
+    expect(screen.getByText('ANR Rate')).toBeInTheDocument();
+    expect(screen.queryByText('Foreground ANR Rate')).not.toBeInTheDocument();
+  });
+
+  it('does not render App Hang options for apple-ios projects when the feature flag is disabled', async () => {
+    renderProjectCharts('apple-ios', undefined);
+
+    await userEvent.click(
+      screen.getByRole('button', {name: 'Display Crash Free Sessions'})
+    );
+
+    expect(screen.queryByText('ANR Rate')).not.toBeInTheDocument();
+    expect(screen.queryByText('Foreground ANR Rate')).not.toBeInTheDocument();
+  });
+
   it('does not render ANR options for non-compatible platforms', async () => {
     renderProjectCharts('python');
 
@@ -109,10 +150,7 @@ describe('ProjectDetail > ProjectCharts', () => {
       groups: [
         {
           by: {},
-          totals: {
-            'anr_rate()': 492,
-            'count_unique(user)': 3,
-          },
+          totals: {'anr_rate()': 492, 'count_unique(user)': 3},
           series: {
             'anr_rate()': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 490],
             'count_unique(user)': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1],
@@ -132,9 +170,7 @@ describe('ProjectDetail > ProjectCharts', () => {
       expect(mockSessions).toHaveBeenCalledWith(
         '/organizations/org-slug/sessions/',
         expect.objectContaining({
-          query: expect.objectContaining({
-            field: ['anr_rate()', 'count_unique(user)'],
-          }),
+          query: expect.objectContaining({field: ['anr_rate()', 'count_unique(user)']}),
         })
       )
     );
diff --git a/static/app/views/projectDetail/projectCharts.tsx b/static/app/views/projectDetail/projectCharts.tsx
@@ -37,7 +37,10 @@ import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import withApi from 'sentry/utils/withApi';
-import {isPlatformANRCompatible} from 'sentry/views/projectDetail/utils';
+import {
+  isPlatformANRCompatible,
+  isPlatformForegroundANRCompatible,
+} from 'sentry/views/projectDetail/utils';
 import {
   getSessionTermDescription,
   SessionTerm,
@@ -95,7 +98,7 @@ class ProjectCharts extends Component<Props, State> {
     }
 
     if (hasSessions && !hasTransactions) {
-      if (isPlatformANRCompatible(project?.platform)) {
+      if (isPlatformANRCompatible(project?.platform, project?.features)) {
         return [DisplayModes.STABILITY, DisplayModes.ANR_RATE];
       }
       return [DisplayModes.STABILITY, DisplayModes.ERRORS];
@@ -105,7 +108,7 @@ class ProjectCharts extends Component<Props, State> {
       return [DisplayModes.FAILURE_RATE, DisplayModes.APDEX];
     }
 
-    if (isPlatformANRCompatible(project?.platform)) {
+    if (isPlatformANRCompatible(project?.platform, project?.features)) {
       return [DisplayModes.STABILITY, DisplayModes.ANR_RATE];
     }
 
@@ -218,25 +221,29 @@ class ProjectCharts extends Component<Props, State> {
       },
     ];
 
-    if (isPlatformANRCompatible(project?.platform)) {
-      return [
+    if (isPlatformANRCompatible(project?.platform, project?.features)) {
+      const anrRateOptions = [
         {
           value: DisplayModes.ANR_RATE,
           label: t('ANR Rate'),
           disabled:
             this.otherActiveDisplayModes.includes(DisplayModes.ANR_RATE) || !hasSessions,
           tooltip: !hasSessions ? noHealthTooltip : undefined,
         },
-        {
+      ];
+
+      if (isPlatformForegroundANRCompatible(project?.platform)) {
+        anrRateOptions.push({
           value: DisplayModes.FOREGROUND_ANR_RATE,
           label: t('Foreground ANR Rate'),
           disabled:
             this.otherActiveDisplayModes.includes(DisplayModes.FOREGROUND_ANR_RATE) ||
             !hasSessions,
           tooltip: !hasSessions ? noHealthTooltip : undefined,
-        },
-        ...options,
-      ];
+        });
+      }
+
+      return [...anrRateOptions, ...options];
     }
 
     return options;
@@ -319,7 +326,13 @@ class ProjectCharts extends Component<Props, State> {
     const {totalValues} = this.state;
     const hasDiscover = organization.features.includes('discover-basic');
     const displayMode = this.displayMode;
-    const hasAnrRateFeature = isPlatformANRCompatible(project?.platform);
+    const hasAnrRateFeature = isPlatformANRCompatible(
+      project?.platform,
+      project?.features
+    );
+    const hasAnrForegroundRateFeature = isPlatformForegroundANRCompatible(
+      project?.platform
+    );
 
     return (
       <Panel>
@@ -447,17 +460,21 @@ class ProjectCharts extends Component<Props, State> {
                   query={query}
                 />
               )}
-              {hasAnrRateFeature && displayMode === DisplayModes.FOREGROUND_ANR_RATE && (
-                <ProjectBaseSessionsChart
-                  title={t('Foreground ANR Rate')}
-                  help={getSessionTermDescription(SessionTerm.FOREGROUND_ANR_RATE, null)}
-                  api={api}
-                  organization={organization}
-                  onTotalValuesChange={this.handleTotalValuesChange}
-                  displayMode={displayMode}
-                  query={query}
-                />
-              )}
+              {hasAnrForegroundRateFeature &&
+                displayMode === DisplayModes.FOREGROUND_ANR_RATE && (
+                  <ProjectBaseSessionsChart
+                    title={t('Foreground ANR Rate')}
+                    help={getSessionTermDescription(
+                      SessionTerm.FOREGROUND_ANR_RATE,
+                      null
+                    )}
+                    api={api}
+                    organization={organization}
+                    onTotalValuesChange={this.handleTotalValuesChange}
+                    displayMode={displayMode}
+                    query={query}
+                  />
+                )}
               {displayMode === DisplayModes.STABILITY_USERS && (
                 <ProjectBaseSessionsChart
                   title={t('Crash Free Users')}
diff --git a/static/app/views/projectDetail/utils.spec.tsx b/static/app/views/projectDetail/utils.spec.tsx
@@ -0,0 +1,41 @@
+import {isPlatformANRCompatible, isPlatformForegroundANRCompatible} from './utils';
+
+describe('ProjectDetail Utils', function () {
+  describe('isPlatformANRCompatible', function () {
+    it('returns true for compatible platforms', function () {
+      expect(isPlatformANRCompatible('javascript-electron')).toBe(true);
+      expect(isPlatformANRCompatible('android')).toBe(true);
+      expect(
+        isPlatformANRCompatible('apple', ['projects:project-detail-apple-app-hang-rate'])
+      ).toBe(true);
+      expect(
+        isPlatformANRCompatible('apple-ios', [
+          'projects:project-detail-apple-app-hang-rate',
+        ])
+      ).toBe(true);
+    });
+
+    it('returns false for incompatible platforms', function () {
+      expect(isPlatformANRCompatible('python')).toBe(false);
+      expect(isPlatformANRCompatible('node')).toBe(false);
+      expect(isPlatformANRCompatible(undefined)).toBe(false);
+      expect(isPlatformANRCompatible('apple-macos')).toBe(false);
+      expect(isPlatformANRCompatible('apple-ios')).toBe(false);
+    });
+  });
+
+  describe('isPlatformForegroundANRCompatible', function () {
+    it('returns true for compatible platforms', function () {
+      expect(isPlatformForegroundANRCompatible('javascript-electron')).toBe(true);
+      expect(isPlatformForegroundANRCompatible('android')).toBe(true);
+    });
+
+    it('returns false for incompatible platforms', function () {
+      expect(isPlatformForegroundANRCompatible('apple')).toBe(false);
+      expect(isPlatformForegroundANRCompatible('apple-ios')).toBe(false);
+      expect(isPlatformForegroundANRCompatible('apple-macos')).toBe(false);
+      expect(isPlatformForegroundANRCompatible('python')).toBe(false);
+      expect(isPlatformForegroundANRCompatible(undefined)).toBe(false);
+    });
+  });
+});
diff --git a/static/app/views/projectDetail/utils.tsx b/static/app/views/projectDetail/utils.tsx
@@ -9,6 +9,18 @@ export function didProjectOrEnvironmentChange(location1: Location, location2: Lo
   );
 }
 
-export function isPlatformANRCompatible(platform?: PlatformKey) {
+export function isPlatformANRCompatible(platform?: PlatformKey, features?: string[]) {
+  if (isPlatformForegroundANRCompatible(platform)) {
+    return true;
+  }
+  if (platform === 'apple' || platform === 'apple-ios') {
+    if (features?.includes('projects:project-detail-apple-app-hang-rate')) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function isPlatformForegroundANRCompatible(platform?: PlatformKey) {
   return platform === 'javascript-electron' || platform === 'android';
 }
