analytics(performance): Adding analytics for quota exceeded banner

static/app/types/hooks.tsx

@@ -205,7 +205,6 @@ export type ComponentHooks = {
   'component:organization-header': () => React.ComponentType<OrganizationHeaderProps>;
   'component:organization-membership-settings': () => React.ComponentType<MembershipSettingsProps>;
   'component:partnership-agreement': React.ComponentType<PartnershipAgreementProps>;
-  'component:performance-quota-exceeded-alert': () => React.ComponentType | null;
   'component:product-selection-availability': () => React.ComponentType<ProductSelectionAvailabilityProps>;
   'component:product-unavailable-cta': () => React.ComponentType<ProductUnavailableCTAProps>;
   'component:profiling-am1-or-mmx-upgrade': () => React.ComponentType<ProfilingAM1OrMMXUpgradeProps>;

static/app/views/explore/spans/spansTab.tsx

@@ -56,7 +56,8 @@ import {
 } from 'sentry/views/explore/utils';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {Onboarding} from 'sentry/views/performance/onboarding';
-import {QuotaExceededAlert} from 'sentry/views/performance/quotaExceededAlert';
+
+import QuotaExceededAlert from 'getsentry/components/performance/quotaExceededAlert';
 
 export type SpanTabProps = {
   defaultPeriod: DefaultPeriod;
@@ -209,7 +210,7 @@ export function SpansTabContentImpl({
         <ExploreToolbar width={300} extras={toolbarExtras} />
       </SideSection>
       <section>
-        {!hasResults && <QuotaExceededAlert />}
+        {!hasResults && <QuotaExceededAlert referrer="explore" />}
         <MainContent>
           <ExploreCharts
             canUsePreviousResults={canUsePreviousResults}

static/gsApp/components/performance/quotaExceededAlert.spec.tsx

@@ -1,17 +1,30 @@
+import {SubscriptionFixture} from 'getsentry-test/fixtures/subscription';
 import {initializeOrg} from 'sentry-test/initializeOrg';
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import {useLocation} from 'sentry/utils/useLocation';
 import usePageFilters from 'sentry/utils/usePageFilters';
 
-import QuotaExceededAlert from 'getsentry/components/performance/quotaExceededAlert';
+import {QuotaExceededAlert} from './quotaExceededAlert';
 
 jest.mock('sentry/utils/useLocation');
 jest.mock('sentry/utils/usePageFilters');
 
 describe('Renders QuotaExceededAlert correctly', function () {
   const {organization} = initializeOrg();
-
+  const subscription = SubscriptionFixture({
+    organization,
+    renewalDate: '2024-12-31',
+    onDemandBudgets: {
+      enabled: true,
+    } as any,
+    planTier: 'am1' as any,
+    categories: {
+      spans: {
+        usageExceeded: true,
+      },
+    } as any,
+  });
   beforeEach(function () {
     jest.useFakeTimers();
     jest.setSystemTime(new Date('2024-12-14'));
@@ -66,25 +79,7 @@ describe('Renders QuotaExceededAlert correctly', function () {
       },
     });
 
-    // Mock subscription details endpoint
-    MockApiClient.addMockResponse({
-      url: `/subscriptions/${organization.slug}/`,
-      method: 'GET',
-      body: {
-        renewalDate: '2024-12-31',
-        onDemandBudgets: {
-          enabled: true,
-        },
-        planTier: 'am1',
-        categories: {
-          spans: {
-            usageExceeded: true,
-          },
-        },
-      },
-    });
-
-    render(<QuotaExceededAlert />, {
+    render(<QuotaExceededAlert subscription={subscription} referrer="trace-view" />, {
       organization,
     });
 

static/gsApp/components/performance/quotaExceededAlert.tsx

@@ -1,7 +1,10 @@
+import {useEffect} from 'react';
+
 import {Alert} from 'sentry/components/core/alert';
 import Link from 'sentry/components/links/link';
 import {tct} from 'sentry/locale';
 import type {PageFilters} from 'sentry/types/core';
+import type {Organization} from 'sentry/types/organization';
 import {getFormattedDate} from 'sentry/utils/dates';
 import {parsePeriodToHours} from 'sentry/utils/duration/parsePeriodToHours';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -10,6 +13,7 @@ import usePageFilters from 'sentry/utils/usePageFilters';
 import withSubscription from 'getsentry/components/withSubscription';
 import {usePerformanceUsageStats} from 'getsentry/hooks/performance/usePerformanceUsageStats';
 import type {Subscription} from 'getsentry/types';
+import trackGetsentryAnalytics from 'getsentry/utils/trackGetsentryAnalytics';
 
 const DATE_FORMAT = 'MMM DD, YYYY';
 
@@ -30,8 +34,10 @@ function getFormattedDateTime(dateTime: PageFilters['datetime']): string | null
   return null;
 }
 
-function useQuotaExceededAlertMessage(subscription: Subscription) {
-  const organization = useOrganization();
+function useQuotaExceededAlertMessage(
+  subscription: Subscription,
+  organization: Organization
+) {
   const {selection} = usePageFilters();
 
   let hasExceededPerformanceUsageLimit: boolean | null = null;
@@ -171,11 +177,24 @@ function useQuotaExceededAlertMessage(subscription: Subscription) {
 }
 
 type Props = {
+  referrer: string;
   subscription: Subscription;
 };
 
 export function QuotaExceededAlert(props: Props) {
-  const message = useQuotaExceededAlertMessage(props.subscription);
+  const organization = useOrganization();
+  const message = useQuotaExceededAlertMessage(props.subscription, organization);
+
+  useEffect(() => {
+    if (!message) {
+      return;
+    }
+
+    trackGetsentryAnalytics('performance.quota_exceeded_alert.displayed', {
+      organization,
+      referrer: props.referrer,
+    });
+  }, [message, organization, props.referrer]);
 
   if (!message) {
     return null;

static/gsApp/registerHooks.tsx

@@ -34,7 +34,6 @@ import LabelWithPowerIcon from 'getsentry/components/labelWithPowerIcon';
 import MemberInviteModalCustomization from 'getsentry/components/memberInviteModalCustomization';
 import OnboardingWizardHelp from 'getsentry/components/onboardingWizardHelp';
 import {OrganizationHeader} from 'getsentry/components/organizationHeader';
-import QuotaExceededAlert from 'getsentry/components/performance/quotaExceededAlert';
 import PowerFeatureHovercard from 'getsentry/components/powerFeatureHovercard';
 import {ProductSelectionAvailability} from 'getsentry/components/productSelectionAvailability';
 import {ProductUnavailableCTA} from 'getsentry/components/productUnavailableCTA';
@@ -190,10 +189,7 @@ const GETSENTRY_HOOKS: Partial<Hooks> = {
   'spend-visibility:spike-protection-project-settings': p => (
     <SpikeProtectionProjectSettings {...p} />
   ),
-  /**
-   *   Tracing units exceeded alerts
-   */
-  'component:performance-quota-exceeded-alert': () => QuotaExceededAlert,
+
   /**
    *   Given a module name, if applicable, displays the appropriate upsell page
    */

static/gsApp/utils/trackGetsentryAnalytics.tsx

@@ -165,6 +165,7 @@ type GetsentryEventParameters = {
     partner: undefined | string;
   } & HasSub;
   'past_due_modal.seen': HasSub;
+  'performance.quota_exceeded_alert.displayed': {referrer: string};
   'power_icon.clicked': {
     source?: string;
   } & HasSub;
@@ -251,6 +252,8 @@ const getsentryEventMap: Record<GetsentryEventKey, string> = {
   'quota_alert.clicked_link': 'Quota Alert: Clicked Link',
   'quota_alert.clicked_see_usage': 'Quota Alert: Clicked See Usage',
   'quota_alert.alert_displayed': 'Quota Alert: Alert Displayed',
+  'performance.quota_exceeded_alert.displayed':
+    'Performance: Quota Exceeded Alert Displayed',
   'trial_ended_notice.dismissed_understood': 'Trial Ended Notice: Dismissed understood',
   'grace_period_modal.seen': 'Grace Period Modal Seen',
   'usage_exceeded_modal.seen': 'Usage Exceeded Modal Seen',