feat(toolbar): add a replay panel for start/stop current replay

package.json

@@ -59,13 +59,13 @@
     "@sentry-internal/rrweb-player": "2.25.0",
     "@sentry-internal/rrweb-snapshot": "2.25.0",
     "@sentry/babel-plugin-component-annotate": "^2.16.1",
-    "@sentry/core": "^8.18.0",
-    "@sentry/node": "^8.18.0",
-    "@sentry/react": "^8.18.0",
+    "@sentry/core": "^8.20.0",
+    "@sentry/node": "^8.20.0",
+    "@sentry/react": "^8.20.0",
     "@sentry/release-parser": "^1.3.1",
     "@sentry/status-page-list": "^0.3.0",
-    "@sentry/types": "^8.18.0",
-    "@sentry/utils": "^8.18.0",
+    "@sentry/types": "^8.20.0",
+    "@sentry/utils": "^8.20.0",
     "@spotlightjs/spotlight": "^2.0.0-alpha.1",
     "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-query-devtools": "^4.36.1",
@@ -180,7 +180,7 @@
     "@codecov/webpack-plugin": "^0.0.1-beta.8",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
     "@sentry/jest-environment": "6.0.0",
-    "@sentry/profiling-node": "^8.18.0",
+    "@sentry/profiling-node": "^8.20.0",
     "@styled/typescript-styled-plugin": "^1.0.1",
     "@testing-library/dom": "10.1.0",
     "@testing-library/jest-dom": "6.4.5",
@@ -263,9 +263,7 @@
       "last 3 iOS major versions",
       "Firefox ESR"
     ],
-    "test": [
-      "current node"
-    ]
+    "test": ["current node"]
   },
   "volta": {
     "extends": ".volta.json"

static/app/components/devtoolbar/components/navigation.tsx

@@ -8,6 +8,7 @@ import {
   IconFlag,
   IconIssues,
   IconMegaphone,
+  IconPlay,
   IconReleases,
   IconSiren,
 } from 'sentry/icons';
@@ -60,6 +61,7 @@ export default function Navigation({
       <NavButton panelName="releases" label="Releases" icon={<IconReleases />}>
         <SessionStatusBadge />
       </NavButton>
+      <NavButton panelName="replay" label="Session Replay" icon={<IconPlay />} />
     </dialog>
   );
 }

static/app/components/devtoolbar/components/panelRouter.tsx

@@ -9,6 +9,7 @@ const PanelFeedback = lazy(() => import('./feedback/feedbackPanel'));
 const PanelIssues = lazy(() => import('./issues/issuesPanel'));
 const PanelFeatureFlags = lazy(() => import('./featureFlags/featureFlagsPanel'));
 const PanelReleases = lazy(() => import('./releases/releasesPanel'));
+const PanelReplay = lazy(() => import('./replay/replayPanel'));
 
 export default function PanelRouter() {
   const {state} = useToolbarRoute();
@@ -44,6 +45,12 @@ export default function PanelRouter() {
           <PanelReleases />
         </AnalyticsProvider>
       );
+    case 'replay':
+      return (
+        <AnalyticsProvider keyVal="replay-panel" nameVal="Replay panel">
+          <PanelReplay />
+        </AnalyticsProvider>
+      );
     default:
       return null;
   }

static/app/components/devtoolbar/components/replay/replayPanel.tsx

@@ -0,0 +1,111 @@
+import {useContext} from 'react';
+import {css} from '@emotion/react';
+
+import {Button} from 'sentry/components/button';
+import AnalyticsProvider, {
+  AnalyticsContext,
+} from 'sentry/components/devtoolbar/components/analyticsProvider';
+import SentryAppLink from 'sentry/components/devtoolbar/components/sentryAppLink';
+import useReplayRecorder from 'sentry/components/devtoolbar/hooks/useReplayRecorder';
+import {resetFlexRowCss} from 'sentry/components/devtoolbar/styles/reset';
+import ProjectBadge from 'sentry/components/idBadge/projectBadge';
+import ExternalLink from 'sentry/components/links/externalLink';
+import {IconPause, IconPlay} from 'sentry/icons';
+import type {PlatformKey} from 'sentry/types/project';
+
+import useConfiguration from '../../hooks/useConfiguration';
+import {panelInsetContentCss, panelSectionCss} from '../../styles/panel';
+import {smallCss} from '../../styles/typography';
+import PanelLayout from '../panelLayout';
+
+const TRUNC_ID_LENGTH = 16;
+
+export default function ReplayPanel() {
+  const {projectSlug, projectId, projectPlatform, trackAnalytics} = useConfiguration();
+
+  const {disabledReason, isDisabled, isRecording, lastReplayId, start, stop} =
+    useReplayRecorder();
+
+  function ReplayLink({children}: {children: React.ReactNode}) {
+    const {eventName, eventKey} = useContext(AnalyticsContext);
+    return process.env.NODE_ENV === 'production' ? (
+      <SentryAppLink
+        to={{
+          url: `/replays/${lastReplayId}`,
+          query: {project: projectId},
+        }}
+      >
+        {children}
+      </SentryAppLink>
+    ) : (
+      <ExternalLink
+        href={`https://sentry-test.sentry.io/replays/${lastReplayId}/?project=5270453`}
+        onClick={() => {
+          trackAnalytics?.({
+            eventKey: eventKey + '.click',
+            eventName: eventName + ' clicked',
+          });
+        }}
+      >
+        {children}
+      </ExternalLink>
+    );
+  }
+
+  return (
+    <PanelLayout title="Session Replay">
+      <AnalyticsProvider
+        keyVal={`replay-button-${isRecording ? 'stop' : 'start'}`}
+        nameVal={`replay button ${isRecording ? 'stop' : 'start'}`}
+      >
+        <Button
+          size="sm"
+          icon={isRecording ? <IconPause /> : <IconPlay />}
+          disabled={isDisabled}
+          title={disabledReason}
+          onClick={() => (isRecording ? stop() : start())}
+        >
+          {isRecording
+            ? 'In progress. Click to stop recording'
+            : 'Start recording the current session'}
+        </Button>
+      </AnalyticsProvider>
+      <div css={[smallCss, panelSectionCss, panelInsetContentCss]}>
+        {lastReplayId ? (
+          <span css={[resetFlexRowCss, {gap: 'var(--space50)'}]}>
+            {isRecording ? 'Current replay: ' : 'Last recorded replay: '}
+            <AnalyticsProvider keyVal="replay-details-link" nameVal="replay details link">
+              <ReplayLink>
+                <div
+                  css={[
+                    resetFlexRowCss,
+                    {
+                      display: 'inline-flex',
+                      gap: 'var(--space50)',
+                      alignItems: 'center',
+                    },
+                  ]}
+                >
+                  <ProjectBadge
+                    css={css({'&& img': {boxShadow: 'none'}})}
+                    project={{
+                      slug: projectSlug,
+                      id: projectId,
+                      platform: projectPlatform as PlatformKey,
+                    }}
+                    avatarSize={16}
+                    hideName
+                    avatarProps={{hasTooltip: false}}
+                  />
+                  {lastReplayId.slice(0, TRUNC_ID_LENGTH)}
+                </div>
+              </ReplayLink>
+            </AnalyticsProvider>
+          </span>
+        ) : (
+          'No replay is recording this session.'
+        )}
+      </div>
+    </PanelLayout>
+  );
+}

static/app/components/devtoolbar/components/sentryAppLink.tsx

@@ -12,6 +12,9 @@ interface Props {
   onClick?: (event: MouseEvent) => void;
 }
 
+/**
+ * Inline link to orgSlug.sentry.io/{to} with built-in click analytic.
+ */
 export default function SentryAppLink({children, to}: Props) {
   const {organizationSlug, trackAnalytics} = useConfiguration();
   const {eventName, eventKey} = useContext(AnalyticsContext);

static/app/components/devtoolbar/hooks/useReplayRecorder.tsx

@@ -0,0 +1,116 @@
+import {useCallback, useEffect, useState} from 'react';
+import type {replayIntegration} from '@sentry/react';
+import type {ReplayRecordingMode} from '@sentry/types';
+
+import useConfiguration from 'sentry/components/devtoolbar/hooks/useConfiguration';
+
+type ReplayRecorderState = {
+  disabledReason: string | undefined;
+  isDisabled: boolean;
+  isRecording: boolean;
+  lastReplayId: string | undefined;
+  start(): Promise<boolean>;
+  stop(): Promise<boolean>;
+};
+
+interface ReplayInternalAPI {
+  [other: string]: any;
+  getSessionId(): string | undefined;
+  isEnabled(): boolean;
+  recordingMode: ReplayRecordingMode;
+}
+
+function getReplayInternal(
+  replay: ReturnType<typeof replayIntegration>
+): ReplayInternalAPI {
+  // While the toolbar is internal, we can use the private API for added functionality and reduced dependence on SDK release versions
+  // @ts-ignore:next-line
+  return replay._replay;
+}
+
+const LAST_REPLAY_STORAGE_KEY = 'devtoolbar.last_replay_id';
+
+export default function useReplayRecorder(): ReplayRecorderState {
+  const {SentrySDK} = useConfiguration();
+  const replay =
+    SentrySDK && 'getReplay' in SentrySDK ? SentrySDK.getReplay() : undefined;
+  const replayInternal = replay ? getReplayInternal(replay) : undefined;
+
+  // sessionId is defined if we are recording in session OR buffer mode.
+  const [sessionId, setSessionId] = useState<string | undefined>(() =>
+    replayInternal?.getSessionId()
+  );
+  const [recordingMode, setRecordingMode] = useState<ReplayRecordingMode | undefined>(
+    () => replayInternal?.recordingMode
+  );
+
+  const isDisabled = replay === undefined;
+  const disabledReason = !SentrySDK
+    ? 'Failed to load the Sentry SDK.'
+    : !('getReplay' in SentrySDK)
+      ? 'Your SDK version is too outdated to use the Replay integration.'
+      : !replay
+        ? "Failed to load your SDK's Replay integration."
+        : undefined;
+
+  const [isRecording, setIsRecording] = useState<boolean>(
+    () => replayInternal?.isEnabled() ?? false
+  );
+  const [lastReplayId, setLastReplayId] = useState<string | undefined>(
+    () => sessionStorage.getItem(LAST_REPLAY_STORAGE_KEY) || undefined
+  );
+  useEffect(() => {
+    if (isRecording && sessionId) {
+      setLastReplayId(sessionId);
+      sessionStorage.setItem(LAST_REPLAY_STORAGE_KEY, sessionId);
+    }
+  }, [isRecording, sessionId]);
+
+  const refreshState = useCallback(() => {
+    setIsRecording(replayInternal?.isEnabled() ?? false);
+    setSessionId(replayInternal?.getSessionId());
+    setRecordingMode(replayInternal?.recordingMode);
+  }, [replayInternal]);
+
+  const start = useCallback(async () => {
+    let success = false;
+    if (replay && !isRecording) {
+      try {
+        // SDK v8.19.0 and older will throw if a replay is already started.
+        // Details at https://github.com/getsentry/sentry-javascript/pull/13000
+        if (recordingMode === 'session') {
+          replay.start();
+        } else {
+          // For SDK v8.20.0 and up, flush() works for both cases.
+          await replay.flush();
+        }
+        success = true;
+        // eslint-disable-next-line no-empty
+      } catch {}
+    }
+    refreshState();
+    return success;
+  }, [isRecording, recordingMode, replay, refreshState]);
+
+  const stop = useCallback(async () => {
+    let success = false;
+    if (replay && isRecording) {
+      try {
+        await replay.stop();
+        success = true;
+        // eslint-disable-next-line no-empty
+      } catch {}
+    }
+    refreshState();
+    return success;
+  }, [isRecording, replay, refreshState]);
+
+  return {
+    disabledReason,
+    isDisabled,
+    isRecording,
+    lastReplayId,
+    start,
+    stop,
+  };
+}

static/app/components/devtoolbar/hooks/useToolbarRoute.tsx

@@ -1,7 +1,14 @@
 import {createContext, useCallback, useContext, useState} from 'react';
 
 type State = {
-  activePanel: null | 'alerts' | 'feedback' | 'issues' | 'featureFlags' | 'releases';
+  activePanel:
+    | null
+    | 'alerts'
+    | 'feedback'
+    | 'issues'
+    | 'featureFlags'
+    | 'releases'
+    | 'replay';
 };
 
 const context = createContext<{