fix: show notice when not recording performance events on localhost (#…

…18582) * fix: show notice when not recording performance events on localhost * words * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Nov 14, 2023 · 8f0b771 · 8f0b771
1 parent 745a335
commit 8f0b771
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.tsx b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.tsx
@@ -6,7 +6,7 @@ import { AvailableFeature, SessionRecordingPlayerTab } from '~/types'
 import { sessionRecordingPlayerLogic } from '../sessionRecordingPlayerLogic'
 import { playerInspectorLogic } from './playerInspectorLogic'
 import AutoSizer from 'react-virtualized/dist/es/AutoSizer'
-import { LemonButton } from '@posthog/lemon-ui'
+import { LemonButton, Link } from '@posthog/lemon-ui'
 import './PlayerInspectorList.scss'
 import { range } from 'd3'
 import { teamLogic } from 'scenes/teamLogic'
@@ -17,12 +17,18 @@ import { PayGatePage } from 'lib/components/PayGatePage/PayGatePage'
 import { PlayerInspectorListItem } from './components/PlayerInspectorListItem'
 import { sidePanelSettingsLogic } from '~/layout/navigation-3000/sidepanel/panels/sidePanelSettingsLogic'
 
+function isLocalhost(url: string | null | undefined): boolean {
+    return !!url && ['localhost', '127.0.0.1'].includes(new URL(url).hostname)
+}
+
 function EmptyNetworkTab({
     captureNetworkLogOptIn,
     captureNetworkFeatureAvailable,
+    recordingURL,
 }: {
     captureNetworkLogOptIn: boolean
     captureNetworkFeatureAvailable: boolean
+    recordingURL: string | null | undefined
 }): JSX.Element {
     const { openSettingsPanel } = useActions(sidePanelSettingsLogic)
     return !captureNetworkFeatureAvailable ? (
@@ -56,6 +62,19 @@ function EmptyNetworkTab({
                 </LemonButton>
             </div>
         </>
+    ) : isLocalhost(recordingURL) ? (
+        <>
+            <div className="flex flex-col items-center">
+                <h4 className="text-xl font-medium">Network recording</h4>
+                <p className="text-muted text-center">
+                    Network capture is not supported when replay is running on localhost.{' '}
+                    <Link to={'https://posthog.com/docs/session-replay/network-recording'}>
+                        Learn more in our docs{' '}
+                    </Link>
+                    .
+                </p>
+            </div>
+        </>
     ) : (
         <>No results found in this recording.</>
     )
@@ -87,7 +106,7 @@ function EmptyConsoleTab({ captureConsoleLogOptIn }: { captureConsoleLogOptIn: b
 }
 
 export function PlayerInspectorList(): JSX.Element {
-    const { logicProps, snapshotsLoaded } = useValues(sessionRecordingPlayerLogic)
+    const { logicProps, snapshotsLoaded, sessionPlayerMetaData } = useValues(sessionRecordingPlayerLogic)
     const inspectorLogic = playerInspectorLogic(logicProps)
 
     const { items, tabsState, playbackIndicatorIndex, playbackIndicatorIndexStop, syncScrollingPaused, tab } =
@@ -218,6 +237,7 @@ export function PlayerInspectorList(): JSX.Element {
                         <EmptyNetworkTab
                             captureNetworkFeatureAvailable={performanceAvailable}
                             captureNetworkLogOptIn={performanceEnabled}
+                            recordingURL={sessionPlayerMetaData?.start_url}
                         />
                     ) : (
                         'No results found in this recording.'

diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts
@@ -102,6 +102,7 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
             [
                 'snapshotsLoaded',
                 'sessionPlayerData',
+                'sessionPlayerMetaData',
                 'sessionPlayerSnapshotDataLoading',
                 'sessionPlayerMetaDataLoading',
             ],