jump to network response

packages/replay-next/src/suspense/NetworkRequestsCache.ts

@@ -19,8 +19,9 @@ import {
 import { StreamingCacheLoadOptions, createStreamingCache } from "suspense";
 
 import { comparePoints } from "protocol/execution-point-utils";
+import { transformSupplementalId } from "protocol/utils";
 import { assert } from "protocol/utils";
-import { ReplayClientInterface } from "shared/client/types";
+import { ReplayClientInterface, TargetPoint } from "shared/client/types";
 
 export type NetworkEventWithTime<EventType> = EventType & {
   time: number;
@@ -41,6 +42,7 @@ export type NetworkRequestsData = {
   };
   timeStampedPoint: TimeStampedPoint;
   triggerPoint: TimeStampedPoint | null;
+  targetPoint: TargetPoint | null;
 };
 
 export type NetworkRequestsCacheData = {
@@ -57,7 +59,7 @@ export const networkRequestsCache = createStreamingCache<
   getKey: () => "single-entry-cache",
   load: async (
     options: StreamingCacheLoadOptions<RequestId[], Record<RequestId, NetworkRequestsData>>,
-    replayClient
+    replayClient: ReplayClientInterface
   ) => {
     const { update, resolve } = options;
 
@@ -79,6 +81,8 @@ export const networkRequestsCache = createStreamingCache<
 
         ids.push(id);
 
+        const targetPoint = replayClient.getTargetPoint(point, 0);
+
         records[id] = {
           id,
           events: {
@@ -98,6 +102,7 @@ export const networkRequestsCache = createStreamingCache<
             point,
             time,
           },
+          targetPoint: targetPoint ?? null,
           triggerPoint: triggerPoint ?? null,
         } as NetworkRequestsData;
       });

packages/shared/client/ReplayClient.ts

@@ -1,4 +1,4 @@
 import {
   Result as EvaluationResult,
   ExecutionPoint,
   FrameId,
@@ -90,8 +90,9 @@
   ReplayClientEvents,
   ReplayClientInterface,
   SourceLocationRange,
-  SupplementalSession,
   SupplementalRecordingConnection,
+  SupplementalSession,
+  TargetPoint,
   TimeStampedPointWithPaintHash,
 } from "./types";
 
@@ -502,47 +503,70 @@
   }
 
   async breakdownSupplementalLocation(location: Location) {
-    const { id: sourceId, sessionId, supplementalIndex } = await this.breakdownSupplementalIdAndSession(location.sourceId);
+    const {
+      id: sourceId,
+      sessionId,
+      supplementalIndex,
+    } = await this.breakdownSupplementalIdAndSession(location.sourceId);
     return { location: { ...location, sourceId }, sessionId, supplementalIndex };
   }
 
   async breakdownSupplementalPointSelector(pointSelector: PointSelector) {
     switch (pointSelector.kind) {
       case "location": {
-        const { location, sessionId, supplementalIndex } = await this.breakdownSupplementalLocation(pointSelector.location);
+        const { location, sessionId, supplementalIndex } = await this.breakdownSupplementalLocation(
+          pointSelector.location
+        );
         return { pointSelector: { ...pointSelector, location }, sessionId, supplementalIndex };
       }
       case "locations": {
         let commonSessionId: string | undefined;
         let commonSupplementalIndex = 0;
-        const locations = await Promise.all(pointSelector.locations.map(async transformedLocation => {
-          const { location, sessionId, supplementalIndex } = await this.breakdownSupplementalLocation(transformedLocation);
-          if (commonSessionId) {
-            assert(commonSessionId == sessionId);
-          } else {
-            commonSessionId = sessionId;
-            commonSupplementalIndex = supplementalIndex;
-          }
-          return location;
-        }));
+        const locations = await Promise.all(
+          pointSelector.locations.map(async transformedLocation => {
+            const { location, sessionId, supplementalIndex } =
+              await this.breakdownSupplementalLocation(transformedLocation);
+            if (commonSessionId) {
+              assert(commonSessionId == sessionId);
+            } else {
+              commonSessionId = sessionId;
+              commonSupplementalIndex = supplementalIndex;
+            }
+            return location;
+          })
+        );
         assert(commonSessionId);
-        return { pointSelector: { ...pointSelector, locations }, sessionId: commonSessionId, supplementalIndex: commonSupplementalIndex };
+        return {
+          pointSelector: { ...pointSelector, locations },
+          sessionId: commonSessionId,
+          supplementalIndex: commonSupplementalIndex,
+        };
       }
       case "points": {
         let commonSessionId: string | undefined;
         let commonSupplementalIndex = 0;
-        const points = await Promise.all(pointSelector.points.map(async transformedPoint => {
-          const { id: point, sessionId, supplementalIndex } = await this.breakdownSupplementalIdAndSession(transformedPoint);
-          if (commonSessionId) {
-            assert(commonSessionId == sessionId);
-          } else {
-            commonSessionId = sessionId;
-            commonSupplementalIndex = supplementalIndex;
-          }
-          return point;
-        }));
+        const points = await Promise.all(
+          pointSelector.points.map(async transformedPoint => {
+            const {
+              id: point,
+              sessionId,
+              supplementalIndex,
+            } = await this.breakdownSupplementalIdAndSession(transformedPoint);
+            if (commonSessionId) {
+              assert(commonSessionId == sessionId);
+            } else {
+              commonSessionId = sessionId;
+              commonSupplementalIndex = supplementalIndex;
+            }
+            return point;
+          })
+        );
         assert(commonSessionId);
-        return { pointSelector: { ...pointSelector, points }, sessionId: commonSessionId, supplementalIndex: commonSupplementalIndex };
+        return {
+          pointSelector: { ...pointSelector, points },
+          sessionId: commonSessionId,
+          supplementalIndex: commonSupplementalIndex,
+        };
       }
       default:
         return { pointSelector, sessionId: await this.waitForSession(), supplementalIndex: 0 };
@@ -611,22 +635,24 @@
     });
   }
 
-  private async maybeGetConnectionStepTarget(point: ExecutionPoint, pointSupplementalIndex: number): Promise<PauseDescription | null> {
+  getTargetPoint(point: ExecutionPoint, pointSupplementalIndex: 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;
         }
       }
@@ -636,11 +662,21 @@
       return null;
     }
 
-    const sessionId = await this.getSupplementalIndexSession(targetSupplementalIndex);
+    return { point: targetPoint, supplementalIndex: targetSupplementalIndex };
+  }
+
+  private async maybeGetConnectionStepTarget(point: ExecutionPoint, pointSupplementalIndex: number): Promise<PauseDescription | null> {
+
+    const targetPoint = this.getTargetPoint(point, pointSupplementalIndex);
+    if (!targetPoint) {
+      return null;
+    }
+
+    const sessionId = await this.getSupplementalIndexSession(targetPoint.supplementalIndex);
 
-    const response = await sendMessage("Session.getPointFrameSteps" as any, { point: targetPoint }, sessionId);
+    const response = await sendMessage("Session.getPointFrameSteps" as any, { point: targetPoint.point }, sessionId);
     const { steps } = response;
-    const desc = steps.find((step: PointDescription) => step.point == targetPoint);
+    const desc = steps.find((step: PointDescription) => step.point == targetPoint.point?.point);
     assert(desc);
 
     this.transformSupplementalPointDescription(desc, sessionId);
@@ -1542,7 +1578,7 @@
     assert(previous.clientPoint.time <= next.clientPoint.time);
     assert(previous.serverPoint.time <= next.serverPoint.time);
     if (supplementalTime >= previous.serverPoint.time &&
-        supplementalTime <= next.serverPoint.time) {
+      supplementalTime <= next.serverPoint.time) {
       const clientElapsed = next.clientPoint.time - previous.clientPoint.time;
       const serverElapsed = next.serverPoint.time - previous.serverPoint.time;
       const fraction = (supplementalTime - previous.serverPoint.time) / serverElapsed;

packages/shared/client/types.ts

@@ -178,10 +178,19 @@ 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;
-  configure(recordingId: string, sessionId: string, supplemental: SupplementalSession[]): Promise<void>;
+  configure(
+    recordingId: string,
+    sessionId: string,
+    supplemental: SupplementalSession[]
+  ): Promise<void>;
   createPause(executionPoint: ExecutionPoint): Promise<createPauseResult>;
   evaluateExpression(
     pauseId: PauseId,
@@ -207,6 +216,7 @@ export interface ReplayClientInterface {
     events: RequestEventInfo[];
     requests: RequestInfo[];
   }>;
+  getTargetPoint(point: ExecutionPoint, pointSupplementalIndex: number): TargetPoint | null;
   findPaints(): Promise<TimeStampedPointWithPaintHash[]>;
   findPoints(selector: PointSelector, limits?: PointLimits): Promise<PointDescription[]>;
 

src/stories/NetworkMonitor/utils.ts

@@ -96,6 +96,7 @@ export const requestSummary = (
     name: "replay.io",
     path: getPathFromUrl(url),
     point: { point: "0", time: 0 },
+    targetPoint: null,
     queryParams: [["foo", "bar"]],
     triggerPoint: { point: "0", time: 0 },
     requestHeaders: [{ name: "foo", value: "bar" }],

src/ui/components/NetworkMonitor/NetworkMonitorListRow.module.css

@@ -1,4 +1,4 @@
 .HeaderRow,
 .FooterRow,
 .Row {
   display: flex;
@@ -89,6 +89,7 @@
   color: #fff;
   font-weight: bold;
 }
+
 .Row:hover .SeekButton {
   display: flex;
 }
@@ -97,6 +98,45 @@
   outline: none;
 }
 
+.ServerSeekButton {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+
+  flex-direction: row;
+  align-items: center;
+  padding: 0;
+  gap: 2px;
+
+  background: var(--body-bgcolor);
+  color: #fff;
+  font-weight: bold;
+}
+
+.Row:hover .ServerSeekButton {
+  display: flex;
+}
+
+.ServerSeekJumpButton {
+  background: var(--background-color-primary-button);
+  gap: 1ch;
+  padding: 0.25rem 1ch;
+}
+
+.ServerSeekJumpButton:hover {
+  background-color:  var(--background-color-primary-button-hover);
+}
+
+.Server:focus,
+.Server:hover {
+  outline: none;
+}
+
 .SeekButtonIcon {
   flex: 0 0 auto;
   color: currentColor;