diff --git a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.tsx b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.tsx index 3be6404017cb6..dfbd7566ef440 100644 --- 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({ > + ) : isLocalhost(recordingURL) ? ( + <> +
+ Network capture is not supported when replay is running on localhost.{' '} + + Learn more in our docs{' '} + + . +
+