feat(workflow): Track alert edit page views (#27651)

static/app/views/alerts/create.tsx

@@ -52,14 +52,6 @@ class Create extends Component<Props, State> {
   componentDidMount() {
     const {organization, location, project} = this.props;
 
-    trackAnalyticsEvent({
-      eventKey: 'new_alert_rule.viewed',
-      eventName: 'New Alert Rule: Viewed',
-      organization_id: organization.id,
-      project_id: project.id,
-      session_id: this.sessionId,
-    });
-
     if (location?.query) {
       const {query} = location;
       const {createFromDiscover, createFromWizard} = query;
@@ -87,16 +79,20 @@ class Create extends Component<Props, State> {
         );
       }
     }
+
+    trackAnalyticsEvent({
+      eventKey: 'new_alert_rule.viewed',
+      eventName: 'New Alert Rule: Viewed',
+      organization_id: organization.id,
+      project_id: project.id,
+      session_id: this.sessionId,
+      alert_type: this.state.alertType,
+    });
   }
 
   /** Used to track analytics within one visit to the creation page */
   sessionId = uniqueId();
 
-  handleChangeAlertType = (alertType: AlertType) => {
-    // alertType should be `issue` or `metric`
-    this.setState({alertType});
-  };
-
   render() {
     const {
       hasMetricAlerts,

static/app/views/alerts/edit.tsx

@@ -7,6 +7,7 @@ import SentryDocumentTitle from 'app/components/sentryDocumentTitle';
 import {t} from 'app/locale';
 import space from 'app/styles/space';
 import {Organization, Project} from 'app/types';
+import {trackAnalyticsEvent} from 'app/utils/analytics';
 import BuilderBreadCrumbs from 'app/views/alerts/builder/builderBreadCrumbs';
 import IncidentRulesDetails from 'app/views/alerts/incidentRules/details';
 import IssueEditor from 'app/views/alerts/issueRuleEditor';
@@ -24,17 +25,27 @@ type Props = RouteComponentProps<RouteParams, {}> & {
 };
 
 type State = {
-  alertType: string;
   ruleName: string;
 };
 
 class ProjectAlertsEditor extends Component<Props, State> {
   state: State = {
-    alertType: '',
     ruleName: '',
   };
 
-  handleChangeTitle = ruleName => {
+  componentDidMount() {
+    const {organization, project} = this.props;
+
+    trackAnalyticsEvent({
+      eventKey: 'edit_alert_rule.viewed',
+      eventName: 'Edit Alert Rule: Viewed',
+      organization_id: organization.id,
+      project_id: project.id,
+      alert_type: this.getAlertType(),
+    });
+  }
+
+  handleChangeTitle = (ruleName: string) => {
     this.setState({ruleName});
   };
 
@@ -43,12 +54,13 @@ class ProjectAlertsEditor extends Component<Props, State> {
     return `${ruleName}`;
   }
 
+  getAlertType(): 'metric' | 'issue' {
+    return location.pathname.includes('/alerts/metric-rules/') ? 'metric' : 'issue';
+  }
+
   render() {
     const {hasMetricAlerts, location, organization, project, routes} = this.props;
-
-    const alertType = location.pathname.includes('/alerts/metric-rules/')
-      ? 'metric'
-      : 'issue';
+    const alertType = this.getAlertType();
 
     return (
       <Fragment>