diff --git a/packages/replay-next/src/suspense/NetworkRequestsCache.ts b/packages/replay-next/src/suspense/NetworkRequestsCache.ts index 3ad4ec958c8..7e142a3c961 100644 --- a/packages/replay-next/src/suspense/NetworkRequestsCache.ts +++ b/packages/replay-next/src/suspense/NetworkRequestsCache.ts @@ -41,7 +41,7 @@ export type NetworkRequestsData = { }; timeStampedPoint: TimeStampedPoint; triggerPoint: TimeStampedPoint | null; - serverPoint: { point: ExecutionPoint, supplementalIndex: number } | null; + serverPoint: TimeStampedPoint | null; }; export type NetworkRequestsCacheData = { @@ -82,9 +82,6 @@ export const networkRequestsCache = createStreamingCache< const targetPoint = replayClient.getTargetPoint(point, 0); - - - records[id] = { id, events: { @@ -98,7 +95,7 @@ export const networkRequestsCache = createStreamingCache< responseEvent: null, responseRawHeaderEvent: null, }, - serverPoint: targetPoint, + serverPoint: targetPoint?.point ?? null, requestBodyData: null, responseBodyData: null, timeStampedPoint: { diff --git a/packages/shared/client/ReplayClient.ts b/packages/shared/client/ReplayClient.ts index a28c0e254ca..db62d17477e 100644 --- a/packages/shared/client/ReplayClient.ts +++ b/packages/shared/client/ReplayClient.ts @@ -612,23 +612,23 @@ export class ReplayClient implements ReplayClientInterface { } getTargetPoint(point: ExecutionPoint, pointSupplementalIndex: number): { - point: ExecutionPoint | undefined, supplementalIndex: number + point: TimeStampedPoint, supplementalIndex: number } | null { const recordingId = this.getSupplementalIndexRecordingId(pointSupplementalIndex); - let targetPoint: ExecutionPoint | undefined; + let targetPoint: TimeStampedPoint | undefined; let targetSupplementalIndex = 0; this.forAllConnections((serverRecordingId, connection, supplementalIndex) => { const { clientFirst, clientRecordingId, clientPoint, serverPoint } = connection; if (clientFirst) { if (clientRecordingId == recordingId && clientPoint.point == point) { - targetPoint = serverPoint.point; + targetPoint = serverPoint; targetSupplementalIndex = supplementalIndex; } } else { if (serverRecordingId == recordingId && serverPoint.point == point) { assert(clientRecordingId == this._recordingId, "NYI"); - targetPoint = clientPoint.point; + targetPoint = clientPoint; targetSupplementalIndex = 0; } } @@ -652,7 +652,7 @@ export class ReplayClient implements ReplayClientInterface { const response = await sendMessage("Session.getPointFrameSteps" as any, { point: targetPoint.point }, sessionId); const { steps } = response; - const desc = steps.find((step: PointDescription) => step.point == targetPoint.point); + const desc = steps.find((step: PointDescription) => step.point == targetPoint.point?.point); assert(desc); this.transformSupplementalPointDescription(desc, sessionId); diff --git a/packages/shared/client/types.ts b/packages/shared/client/types.ts index 9d0d596cf9d..8a14a3f64da 100644 --- a/packages/shared/client/types.ts +++ b/packages/shared/client/types.ts @@ -207,7 +207,7 @@ export interface ReplayClientInterface { events: RequestEventInfo[]; requests: RequestInfo[]; }>; - getTargetPoint(point: ExecutionPoint, pointSupplementalIndex: number): { point: ExecutionPoint | undefined, supplementalIndex: number } | null; + getTargetPoint(point: ExecutionPoint, pointSupplementalIndex: number): { point: TimeStampedPoint | undefined, supplementalIndex: number } | 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 ee86298d605..1add1585194 100644 --- a/src/ui/components/NetworkMonitor/NetworkMonitorListRow.tsx +++ b/src/ui/components/NetworkMonitor/NetworkMonitorListRow.tsx @@ -9,6 +9,7 @@ import { Nag } from "shared/graphql/types"; import useNetworkContextMenu from "ui/components/NetworkMonitor/useNetworkContextMenu"; import { EnabledColumns } from "ui/components/NetworkMonitor/useNetworkMonitorColumns"; import { RequestSummary, findHeader } from "ui/components/NetworkMonitor/utils"; +import { TimeStampedPoint } from "@replayio/protocol"; import { BodyPartsToUInt8Array, @@ -29,7 +30,7 @@ export type ItemData = { filteredBeforeCount: number; firstRequestIdAfterCurrentTime: string | null; requests: RequestSummary[]; - seekToRequest: (row: RequestSummary) => void; + seekToRequest: ({point, id}: {point: TimeStampedPoint, id: string}) => void; selectRequest: (row: RequestSummary | null) => void; selectedRequestId: string | null; }; @@ -182,8 +183,8 @@ function RequestRow({ getGraphqlOperationNameIfRelevant(); }, [path, replayClient, request]); - const seekToRequestWrapper = (request: RequestSummary) => { - seekToRequest(request); + const seekToRequestWrapper = ({point, id}: {point: TimeStampedPoint, id: string}) => { + seekToRequest({point, id}); dismissJumpToNetworkRequestNag(); // Replay Passport }; @@ -233,9 +234,9 @@ function RequestRow({ {columns.name && (
{serverPoint && ( - Server {serverPoint.supplementalIndex} {serverPoint.point} + Server )} - {/* {name} {graphqlOperationName && `(${graphqlOperationName})`} */} + {name} {graphqlOperationName && `(${graphqlOperationName})`}
)} {columns.method && ( @@ -268,7 +269,7 @@ function RequestRow({