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 recording

+

+ Network capture is not supported when replay is running on localhost.{' '} + + Learn more in our docs{' '} + + . +

+
+ ) : ( <>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 { ) : ( '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 index 301f1d48e8dfe..b510c46732e3f 100644 --- 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( [ 'snapshotsLoaded', 'sessionPlayerData', + 'sessionPlayerMetaData', 'sessionPlayerSnapshotDataLoading', 'sessionPlayerMetaDataLoading', ],