diff --git a/packages/replay-next/src/suspense/NetworkRequestsCache.ts b/packages/replay-next/src/suspense/NetworkRequestsCache.ts index 7e142a3c961..43661034ac7 100644 --- a/packages/replay-next/src/suspense/NetworkRequestsCache.ts +++ b/packages/replay-next/src/suspense/NetworkRequestsCache.ts @@ -16,11 +16,12 @@ import { ResponseBodyData, TimeStampedPoint, } from "@replayio/protocol"; +import { transformSupplementalId } from "protocol/utils" import { StreamingCacheLoadOptions, createStreamingCache } from "suspense"; import { comparePoints } from "protocol/execution-point-utils"; import { assert } from "protocol/utils"; -import { ReplayClientInterface } from "shared/client/types"; +import { ReplayClientInterface, TargetPoint } from "shared/client/types"; export type NetworkEventWithTime = EventType & { time: number; @@ -41,7 +42,7 @@ export type NetworkRequestsData = { }; timeStampedPoint: TimeStampedPoint; triggerPoint: TimeStampedPoint | null; - serverPoint: TimeStampedPoint | null; + targetPoint: TargetPoint | null; }; export type NetworkRequestsCacheData = { @@ -81,6 +82,7 @@ export const networkRequestsCache = createStreamingCache< ids.push(id); const targetPoint = replayClient.getTargetPoint(point, 0); + console.log(`TARGET`, transformSupplementalId(targetPoint?.point?.point ?? "", targetPoint?.supplementalIndex ?? 0)) records[id] = { id, @@ -95,13 +97,13 @@ export const networkRequestsCache = createStreamingCache< responseEvent: null, responseRawHeaderEvent: null, }, - serverPoint: targetPoint?.point ?? null, requestBodyData: null, responseBodyData: null, timeStampedPoint: { point, time, }, + targetPoint: targetPoint ?? null, triggerPoint: triggerPoint ?? null, } as NetworkRequestsData; }); diff --git a/packages/shared/client/ReplayClient.ts b/packages/shared/client/ReplayClient.ts index db62d17477e..f74045a0b40 100644 --- a/packages/shared/client/ReplayClient.ts +++ b/packages/shared/client/ReplayClient.ts @@ -93,6 +93,7 @@ import { SupplementalSession, SupplementalRecordingConnection, TimeStampedPointWithPaintHash, + TargetPoint, } from "./types"; export const MAX_POINTS_TO_FIND = 10_000; @@ -611,9 +612,7 @@ export class ReplayClient implements ReplayClientInterface { }); } - getTargetPoint(point: ExecutionPoint, pointSupplementalIndex: number): { - point: TimeStampedPoint, supplementalIndex: number - } | null { + getTargetPoint(point: ExecutionPoint, pointSupplementalIndex: number): TargetPoint | null { const recordingId = this.getSupplementalIndexRecordingId(pointSupplementalIndex); let targetPoint: TimeStampedPoint | undefined; @@ -642,7 +641,6 @@ export class ReplayClient implements ReplayClientInterface { } private async maybeGetConnectionStepTarget(point: ExecutionPoint, pointSupplementalIndex: number): Promise { - const targetPoint = this.getTargetPoint(point, pointSupplementalIndex); if (!targetPoint) { return null; diff --git a/packages/shared/client/types.ts b/packages/shared/client/types.ts index 8a14a3f64da..0c2db75b699 100644 --- a/packages/shared/client/types.ts +++ b/packages/shared/client/types.ts @@ -178,6 +178,11 @@ export interface SupplementalSession extends SupplementalRecording { sessionId: string; } +export interface TargetPoint { + point: TimeStampedPoint; + supplementalIndex: number +} + export interface ReplayClientInterface { get loadedRegions(): LoadedRegions | null; addEventListener(type: ReplayClientEvents, handler: Function): void; @@ -207,7 +212,7 @@ export interface ReplayClientInterface { events: RequestEventInfo[]; requests: RequestInfo[]; }>; - getTargetPoint(point: ExecutionPoint, pointSupplementalIndex: number): { point: TimeStampedPoint | undefined, supplementalIndex: number } | null; + getTargetPoint(point: ExecutionPoint, pointSupplementalIndex: number): TargetPoint | null; findPaints(): Promise; findPoints(selector: PointSelector, limits?: PointLimits): Promise; diff --git a/src/ui/components/NetworkMonitor/NetworkMonitorListRow.tsx b/src/ui/components/NetworkMonitor/NetworkMonitorListRow.tsx index 1add1585194..1b60b10c63f 100644 --- a/src/ui/components/NetworkMonitor/NetworkMonitorListRow.tsx +++ b/src/ui/components/NetworkMonitor/NetworkMonitorListRow.tsx @@ -20,6 +20,10 @@ import { URLEncodedToPlaintext, } from "./content"; import styles from "./NetworkMonitorListRow.module.css"; +import { transformSupplementalId } from "protocol/utils" + +import { useAppDispatch } from "ui/setup/hooks"; +import { seek } from "ui/actions/timeline"; export const LIST_ROW_HEIGHT = 26; @@ -117,13 +121,13 @@ function RequestRow({ start: startTime, status, triggerPoint, - serverPoint, + targetPoint, url, } = request; - if (serverPoint) { - console.log("serverPoint!!", serverPoint); + if (targetPoint) { + console.log("targetPoint!!", targetPoint); } @@ -151,6 +155,9 @@ function RequestRow({ } } + + const dispatch = useAppDispatch(); + const [, dismissJumpToNetworkRequestNag] = useNag(Nag.JUMP_TO_NETWORK_REQUEST); useEffect(() => { @@ -233,7 +240,7 @@ function RequestRow({ )} {columns.name && (
- {serverPoint && ( + {targetPoint && ( Server )} {name} {graphqlOperationName && `(${graphqlOperationName})`} @@ -265,11 +272,19 @@ function RequestRow({
)} - {serverPoint && ( + {targetPoint && ( )} - {!serverPoint && triggerPoint && triggerPoint.time !== currentTime && ( + {!targetPoint && triggerPoint && triggerPoint.time !== currentTime && (