feat(profiling): add page view analytics (#35736)

* ref(analytics): improve parameter type safety

* Revert "ref(analytics): improve parameter type safety"

This reverts commit 8a717541044f6c45de48cf474a6c80b4ccf42977.

* feat(profiling): add page view analytics

* fix(event): change analytics event

* fix(event): change analytics event

static/app/utils/analytics/profilingAnalyticsEvents.tsx

@@ -7,6 +7,10 @@ type ProfilingViews =
 
 type EventKey = `${ProfilingPrefix}_views.${ProfilingViews}`;
 
+export type ProfilingEventParameters = {
+  [K in EventKey]: {};
+};
+
 export const profilingEventMap: Record<EventKey, string> = {
   'profiling_views.landing': 'Profiling Views: Landing',
   'profiling_views.profile_flamegraph': 'Profiling Views: Flamegraph',

static/app/utils/analytics/trackAdvancedAnalyticsEvent.tsx

@@ -8,7 +8,7 @@ import {
   performanceEventMap,
   PerformanceEventParameters,
 } from './performanceAnalyticsEvents';
-import {profilingEventMap} from './profilingAnalyticsEvents';
+import {profilingEventMap, ProfilingEventParameters} from './profilingAnalyticsEvents';
 import {samplingEventMap, SamplingEventParameters} from './samplingAnalyticsEvents';
 import {searchEventMap, SearchEventParameters} from './searchAnalyticsEvents';
 import {settingsEventMap, SettingsEventParameters} from './settingsAnalyticsEvents';
@@ -20,6 +20,7 @@ type EventParameters = GrowthEventParameters &
   DiscoverEventParameters &
   IssueEventParameters &
   PerformanceEventParameters &
+  ProfilingEventParameters &
   SearchEventParameters &
   SettingsEventParameters &
   SamplingEventParameters &

static/app/views/profiling/content.tsx

@@ -1,4 +1,4 @@
-import {useCallback} from 'react';
+import {useCallback, useEffect} from 'react';
 import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 import {Location} from 'history';
@@ -20,6 +20,7 @@ import {MAX_QUERY_LENGTH} from 'sentry/constants';
 import {t} from 'sentry/locale';
 import {PageContent} from 'sentry/styles/organization';
 import space from 'sentry/styles/space';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {useProfileFilters} from 'sentry/utils/profiling/hooks/useProfileFilters';
 import {useProfiles} from 'sentry/utils/profiling/hooks/useProfiles';
 import {useProfileTransactions} from 'sentry/utils/profiling/hooks/useProfileTransactions';
@@ -42,6 +43,12 @@ function ProfilingContent({location}: ProfilingContentProps) {
   const profiles = useProfiles({cursor, query, selection});
   const transactions = useProfileTransactions({cursor, query, selection});
 
+  useEffect(() => {
+    trackAdvancedAnalyticsEvent('profiling_views.landing', {
+      organization,
+    });
+  }, [organization]);
+
   const handleSearch: SmartSearchBarProps['onSearch'] = useCallback(
     (searchQuery: string) => {
       browserHistory.push({

static/app/views/profiling/profileDetails.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useCallback, useMemo, useState} from 'react';
+import {Fragment, useCallback, useEffect, useMemo, useState} from 'react';
 import {browserHistory, Link} from 'react-router';
 import styled from '@emotion/styled';
 import Fuse from 'fuse.js';
@@ -14,6 +14,7 @@ import SearchBar from 'sentry/components/searchBar';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {Container, NumberContainer} from 'sentry/utils/discover/styles';
 import {CallTreeNode} from 'sentry/utils/profiling/callTreeNode';
 import {Profile} from 'sentry/utils/profiling/profile/profile';
@@ -63,6 +64,12 @@ function ProfileDetails() {
   const [state] = useProfileGroup();
   const organization = useOrganization();
 
+  useEffect(() => {
+    trackAdvancedAnalyticsEvent('profiling_views.profile_summary', {
+      organization,
+    });
+  }, [organization]);
+
   const cursor = useMemo<number>(() => {
     const cursorQuery = decodeScalar(location.query.cursor, '');
     return parseInt(cursorQuery, 10) || 0;

static/app/views/profiling/profileFlamegraph.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useMemo} from 'react';
+import {Fragment, useEffect, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import Alert from 'sentry/components/alert';
@@ -8,6 +8,7 @@ import {ProfileDragDropImportProps} from 'sentry/components/profiling/profileDra
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {DeepPartial} from 'sentry/types/utils';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {
   decodeFlamegraphStateFromQueryParams,
   FlamegraphState,
@@ -34,6 +35,12 @@ function ProfileFlamegraph(): React.ReactElement {
   const organization = useOrganization();
   const [profileGroup, setProfileGroup] = useProfileGroup();
 
+  useEffect(() => {
+    trackAdvancedAnalyticsEvent('profiling_views.profile_flamegraph', {
+      organization,
+    });
+  }, [organization]);
+
   const onImport: ProfileDragDropImportProps['onImport'] = profiles => {
     setProfileGroup({type: 'resolved', data: profiles});
   };

static/app/views/profiling/profileSummary/index.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useCallback, useMemo} from 'react';
+import {Fragment, useCallback, useEffect, useMemo} from 'react';
 import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 import {Location} from 'history';
@@ -18,6 +18,7 @@ import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {PageFilters, Project} from 'sentry/types';
 import {defined} from 'sentry/utils';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {useProfileFilters} from 'sentry/utils/profiling/hooks/useProfileFilters';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
@@ -41,6 +42,12 @@ function ProfileSummaryPage(props: ProfileSummaryPageProps) {
     slugs: defined(props.params.projectId) ? [props.params.projectId] : [],
   });
 
+  useEffect(() => {
+    trackAdvancedAnalyticsEvent('profiling_views.profile_summary', {
+      organization,
+    });
+  }, [organization]);
+
   // Extract the project matching the provided project slug,
   // if it doesn't exist, set this to null and handle it accordingly.
   const project = projects.length === 1 ? projects[0] : null;