ref(session-replay): Update replay details analytic (#52110)

static/app/utils/analytics/replayAnalyticsEvents.tsx

@@ -44,10 +44,6 @@ export type ReplayEventParameters = {
     seconds: number;
     user_email: string;
   };
-  'replay.details-viewed': {
-    referrer: undefined | string;
-    user_email: string;
-  };
   // similar purpose as "replay.details-viewed", however we're capturing the navigation action
   // in order to also include a project platform
   'replay.list-navigate-to-details': {
@@ -105,7 +101,6 @@ export const replayEventMap: Record<ReplayEventKey, string | null> = {
   'replay.details-resized-panel': 'Resized Replay Details Panel',
   'replay.details-tab-changed': 'Changed Replay Details Tab',
   'replay.details-time-spent': 'Time Spent Viewing Replay Details',
-  'replay.details-viewed': 'Viewed Replay Details',
   'replay.list-navigate-to-details': 'Replays List Navigate to Replay Details',
   'replay.list-paginated': 'Paginated Replay List',
   'replay.list-sorted': 'Sorted Replay List',

static/app/utils/replays/hooks/useReplayPageview.tsx

@@ -3,25 +3,16 @@ import {useEffect, useRef} from 'react';
 import ConfigStore from 'sentry/stores/configStore';
 import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import {decodeScalar} from 'sentry/utils/queryString';
-import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 
 function useReplayPageview(type: 'replay.details-time-spent' | 'replay.list-time-spent') {
   const config = useLegacyStore(ConfigStore);
-  const location = useLocation();
   const organization = useOrganization();
   const startTimeRef = useRef(Date.now());
 
   useEffect(() => {
     const startTime = startTimeRef.current;
 
-    trackAnalytics('replay.details-viewed', {
-      organization,
-      referrer: decodeScalar(location.query.referrer),
-      user_email: config.user.email,
-    });
-
     return () => {
       const endTime = Date.now();
       trackAnalytics(type, {
@@ -30,7 +21,7 @@ function useReplayPageview(type: 'replay.details-time-spent' | 'replay.list-time
         user_email: config.user.email,
       });
     };
-  }, [organization, type, location.query.referrer, config.user.email]);
+  }, [organization, type, config.user.email]);
 }
 
 export default useReplayPageview;

static/app/views/replays/detail/trace/trace.tsx

@@ -4,8 +4,10 @@ import Loading from 'sentry/components/loadingIndicator';
 import Placeholder from 'sentry/components/placeholder';
 import {IconSad} from 'sentry/icons';
 import {t} from 'sentry/locale';
+import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import useProjects from 'sentry/utils/useProjects';
 import TraceView from 'sentry/views/performance/traceDetails/traceView';
 import EmptyState from 'sentry/views/replays/detail/emptyState';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
@@ -15,6 +17,31 @@ import {
 } from 'sentry/views/replays/detail/trace/replayTransactionContext';
 import type {ReplayRecord} from 'sentry/views/replays/types';
 
+function TracesNotFound({
+  hasPerformanceView,
+  projectId,
+}: {
+  hasPerformanceView: boolean;
+  projectId: string;
+}) {
+  const {projects} = useProjects();
+  const project = projects.find(p => p.id === projectId);
+  const hasPerformance = project?.firstTransactionEvent === true;
+
+  // We want to send the 'trace_status' data if the project actively uses and has access to the performance monitoring.
+  useRouteAnalyticsParams(
+    hasPerformanceView && hasPerformance ? {trace_status: 'trace missing'} : {}
+  );
+
+  return (
+    <BorderedSection>
+      <EmptyState>
+        <p>{t('No traces found')}</p>
+      </EmptyState>
+    </BorderedSection>
+  );
+}
+
 type Props = {
   replayRecord: undefined | ReplayRecord;
 };
@@ -52,11 +79,10 @@ function Trace({replayRecord}: Props) {
 
   if (!traces?.length) {
     return (
-      <BorderedSection>
-        <EmptyState>
-          <p>{t('No traces found')}</p>
-        </EmptyState>
-      </BorderedSection>
+      <TracesNotFound
+        hasPerformanceView={organization.features.includes('performance-view')}
+        projectId={replayRecord.project_id}
+      />
     );
   }
 

static/app/views/replays/details.tsx

@@ -11,6 +11,9 @@ import {
   useReplayContext,
 } from 'sentry/components/replays/replayContext';
 import {t} from 'sentry/locale';
+import ConfigStore from 'sentry/stores/configStore';
+import {useLegacyStore} from 'sentry/stores/useLegacyStore';
+import {decodeScalar} from 'sentry/utils/queryString';
 import useInitialTimeOffsetMs, {
   TimeOffsetLocationQueryParams,
 } from 'sentry/utils/replays/hooks/useInitialTimeOffsetMs';
@@ -18,6 +21,9 @@ import useLogReplayDataLoaded from 'sentry/utils/replays/hooks/useLogReplayDataL
 import useReplayLayout from 'sentry/utils/replays/hooks/useReplayLayout';
 import useReplayPageview from 'sentry/utils/replays/hooks/useReplayPageview';
 import useReplayReader from 'sentry/utils/replays/hooks/useReplayReader';
+import useRouteAnalyticsEventNames from 'sentry/utils/routeAnalytics/useRouteAnalyticsEventNames';
+import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
+import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import ReplaysLayout from 'sentry/views/replays/detail/layout';
 import Page from 'sentry/views/replays/detail/page';
@@ -32,8 +38,19 @@ type Props = RouteComponentProps<
 >;
 
 function ReplayDetails({params: {replaySlug}}: Props) {
-  useReplayPageview('replay.details-time-spent');
+  const config = useLegacyStore(ConfigStore);
+  const location = useLocation();
   const organization = useOrganization();
+
+  useReplayPageview('replay.details-time-spent');
+  useRouteAnalyticsEventNames('replay_details.viewed', 'Replay Details: Viewed');
+  useRouteAnalyticsParams({
+    organization,
+    referrer: decodeScalar(location.query.referrer),
+    user_email: config.user.email,
+    tab: location.query.t_main,
+  });
+
   const {slug: orgSlug} = organization;
 
   // TODO: replayId is known ahead of time and useReplayData is parsing it from the replaySlug