feat(ui): Add new session category to the alert wizard (#28590)

static/app/views/alerts/wizard/index.tsx

@@ -22,9 +22,9 @@ import {Dataset} from 'app/views/alerts/incidentRules/types';
 import {
   AlertType,
   AlertWizardAlertNames,
-  AlertWizardOptions,
   AlertWizardPanelContent,
   AlertWizardRuleTemplates,
+  getAlertWizardCategories,
 } from './options';
 import RadioPanelGroup from './radioPanelGroup';
 
@@ -179,20 +179,22 @@ class AlertWizard extends Component<Props, State> {
           <Layout.Main fullWidth>
             <WizardBody>
               <WizardOptions>
-                <Styledh2>{t('Errors')}</Styledh2>
-                {AlertWizardOptions.map(({categoryHeading, options}, i) => (
-                  <OptionsWrapper key={categoryHeading}>
-                    {i > 0 && <Styledh2>{categoryHeading}</Styledh2>}
-                    <RadioPanelGroup
-                      choices={options.map(alertType => {
-                        return [alertType, AlertWizardAlertNames[alertType]];
-                      })}
-                      onChange={this.handleChangeAlertOption}
-                      value={alertOption}
-                      label="alert-option"
-                    />
-                  </OptionsWrapper>
-                ))}
+                <CategoryTitle>{t('Errors')}</CategoryTitle>
+                {getAlertWizardCategories(organization).map(
+                  ({categoryHeading, options}, i) => (
+                    <OptionsWrapper key={categoryHeading}>
+                      {i > 0 && <CategoryTitle>{categoryHeading}</CategoryTitle>}
+                      <RadioPanelGroup
+                        choices={options.map(alertType => {
+                          return [alertType, AlertWizardAlertNames[alertType]];
+                        })}
+                        onChange={this.handleChangeAlertOption}
+                        value={alertOption}
+                        label="alert-option"
+                      />
+                    </OptionsWrapper>
+                  )
+                )}
               </WizardOptions>
               <WizardPanel visible={!!panelContent && !!alertOption}>
                 <WizardPanelBody>
@@ -235,7 +237,7 @@ const StyledHeaderContent = styled(Layout.HeaderContent)`
   overflow: visible;
 `;
 
-const Styledh2 = styled('h2')`
+const CategoryTitle = styled('h2')`
   font-weight: normal;
   font-size: ${p => p.theme.fontSizeExtraLarge};
   margin-bottom: ${space(1)} !important;

static/app/views/alerts/wizard/options.tsx

@@ -1,5 +1,7 @@
 import diagramApdex from 'sentry-images/spot/alerts-wizard-apdex.svg';
 import diagramCLS from 'sentry-images/spot/alerts-wizard-cls.svg';
+import diagramCrashFreeSessions from 'sentry-images/spot/alerts-wizard-crash-free-sessions.svg';
+import diagramCrashFreeUsers from 'sentry-images/spot/alerts-wizard-crash-free-users.svg';
 import diagramCustom from 'sentry-images/spot/alerts-wizard-custom.svg';
 import diagramErrors from 'sentry-images/spot/alerts-wizard-errors.svg';
 import diagramFailureRate from 'sentry-images/spot/alerts-wizard-failure-rate.svg';
@@ -11,6 +13,7 @@ import diagramTransactionDuration from 'sentry-images/spot/alerts-wizard-transac
 import diagramUsers from 'sentry-images/spot/alerts-wizard-users-experiencing-errors.svg';
 
 import {t} from 'app/locale';
+import {Organization} from 'app/types';
 import {Dataset, EventTypes} from 'app/views/alerts/incidentRules/types';
 
 export type AlertType =
@@ -24,7 +27,9 @@ export type AlertType =
   | 'lcp'
   | 'fid'
   | 'cls'
-  | 'custom';
+  | 'custom'
+  | 'crash_free_sessions'
+  | 'crash_free_users';
 
 export const WebVitalAlertTypes = new Set(['lcp', 'fid', 'cls', 'fcp']);
 
@@ -40,16 +45,24 @@ export const AlertWizardAlertNames: Record<AlertType, string> = {
   fid: t('First Input Delay'),
   cls: t('Cumulative Layout Shift'),
   custom: t('Custom Metric'),
+  crash_free_sessions: t('Crash Free Session Rate'),
+  crash_free_users: t('Crash Free User Rate'),
 };
 
-export const AlertWizardOptions: {
-  categoryHeading: string;
-  options: AlertType[];
-}[] = [
+type AlertWizardCategory = {categoryHeading: string; options: AlertType[]};
+export const getAlertWizardCategories = (org: Organization): AlertWizardCategory[] => [
   {
     categoryHeading: t('Errors'),
     options: ['issues', 'num_errors', 'users_experiencing_errors'],
   },
+  ...(org.features.includes('crash-rate-alerts')
+    ? [
+        {
+          categoryHeading: t('Sessions'),
+          options: ['crash_free_sessions', 'crash_free_users'] as AlertType[],
+        },
+      ]
+    : []),
   {
     categoryHeading: t('Performance'),
     options: [
@@ -181,6 +194,24 @@ export const AlertWizardPanelContent: Record<AlertType, PanelContent> = {
     ],
     illustration: diagramCustom,
   },
+  crash_free_sessions: {
+    description: t(
+      'A session begins when a user starts the application and ends when it’s closed or sent to the background. A crash is when a session ends due to an error and this type of alert lets you monitor when those crashed sessions exceed a threshold. This lets you get a better picture of the health of your app.'
+    ),
+    examples: [
+      t('When the Crash Free Rate is below 98%, send a Slack notification to the team.'),
+    ],
+    illustration: diagramCrashFreeSessions,
+  },
+  crash_free_users: {
+    description: t(
+      'Crash Free Users is the percentage of distinct users that haven’t experienced a crash and so this type of alert tells you when the overall user experience dips below a certain unacceptable threshold.'
+    ),
+    examples: [
+      t('When the Crash Free Rate is below 97%, send an email notification to yourself.'),
+    ],
+    illustration: diagramCrashFreeUsers,
+  },
 };
 
 export type WizardRuleTemplate = {
@@ -190,7 +221,7 @@ export type WizardRuleTemplate = {
 };
 
 export const AlertWizardRuleTemplates: Record<
-  Exclude<AlertType, 'issues'>,
+  Exclude<AlertType, 'issues' | 'crash_free_sessions' | 'crash_free_users'>,
   WizardRuleTemplate
 > = {
   num_errors: {