switch to timestamped points

replayio · Sep 20, 2024 · 9609b0c · 9609b0c
1 parent 4f94a70
commit 9609b0c
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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<TimeStampedPointWithPaintHash[]>;
   findPoints(selector: PointSelector, limits?: PointLimits): Promise<PointDescription[]>;
 

diff --git 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 && (
           <div className={styles.Column} data-name="name">
             {serverPoint && (
-              <span style={{ color: "red" }}>Server {serverPoint.supplementalIndex} {serverPoint.point}</span>
+              <span style={{ color: "red" }}>Server</span>
             )}
-            {/* {name} {graphqlOperationName && `(${graphqlOperationName})`} */}
+            {name} {graphqlOperationName && `(${graphqlOperationName})`}
           </div>
         )}
         {columns.method && (
@@ -268,7 +269,7 @@ function RequestRow({
           <button
             className={styles.ServerSeekButton}
             data-test-name="Network-RequestRow-SeekButton"
-            onClick={() => seekToRequestWrapper(request)}
+            onClick={() => seekToRequestWrapper({point: serverPoint, id: id})}
             tabIndex={0}
             style={{
               backgroundColor: "red !important",
@@ -288,7 +289,7 @@ function RequestRow({
           <button
             className={styles.SeekButton}
             data-test-name="Network-RequestRow-SeekButton"
-            onClick={() => seekToRequestWrapper(request)}
+            onClick={() => seekToRequestWrapper({point: request.point, id: request.id})}
             tabIndex={0}
           >
             <Icon

diff --git a/src/ui/components/NetworkMonitor/index.tsx b/src/ui/components/NetworkMonitor/index.tsx
@@ -142,20 +142,20 @@ export default function NetworkMonitor() {
               filteredAfterCount={countAfter}
               filteredBeforeCount={countBefore}
               requests={filteredRequests}
-              seekToRequest={request => {
+              seekToRequest={({point, id}) => {
                 trackEvent("net_monitor.seek_to_request");
                 dispatch(
                   seek({
-                    executionPoint: request.point.point,
+                    executionPoint: point.point,
                     openSource: true,
-                    time: request.point.time,
+                    time: point.time,
                   })
                 );
 
                 dismissInspectNetworkRequestNag();
 
                 trackEvent("net_monitor.select_request_row");
-                dispatch(selectNetworkRequest(request.id));
+                dispatch(selectNetworkRequest(id));
               }}
               selectedRequestId={selectedRequestId}
               selectRequest={request => {

diff --git a/src/ui/components/NetworkMonitor/utils.ts b/src/ui/components/NetworkMonitor/utils.ts
@@ -47,7 +47,7 @@ export type RequestSummary = {
   requestHeaders: Header[];
   responseHeaders: Header[];
   start: number;
-  serverPoint: { point: ExecutionPoint; supplementalIndex: number } | null;
+  serverPoint: TimeStampedPoint | null;
   status: number | undefined;
   type: CanonicalRequestType;
   url: string;