jump to network response

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

@@ -1,4 +1,4 @@
 import {
   ExecutionPoint,
   RequestBodyData,
   RequestBodyEvent,
@@ -41,6 +41,7 @@
   };
   timeStampedPoint: TimeStampedPoint;
   triggerPoint: TimeStampedPoint | null;
+  serverPoint: { point: ExecutionPoint, supplementalIndex: number } | null;
 };
 
 export type NetworkRequestsCacheData = {
@@ -57,7 +58,7 @@
   getKey: () => "single-entry-cache",
   load: async (
     options: StreamingCacheLoadOptions<RequestId[], Record<RequestId, NetworkRequestsData>>,
-    replayClient
+    replayClient: ReplayClientInterface
   ) => {
     const { update, resolve } = options;
 
@@ -69,7 +70,7 @@
     // Use the createOnRequestsReceived() adapter to ensure that RequestInfo objects
     // are always received before any associated RequestEventInfo objects
     const onRequestsReceived = createOnRequestsReceived(function onRequestsReceived(data) {
-      data.requests.forEach(({ id, point, time, triggerPoint }) => {
+      data.requests.forEach(({ id, point, time, triggerPoint },) => {
         assert(
           previousExecutionPoint === null || comparePoints(previousExecutionPoint, point) <= 0,
           "Requests should be in order"
@@ -79,6 +80,11 @@
 
         ids.push(id);
 
+        const targetPoint = replayClient.getTargetPoint(point, 0);
+
+
+
+
         records[id] = {
           id,
           events: {
@@ -92,6 +98,7 @@
             responseEvent: null,
             responseRawHeaderEvent: null,
           },
+          serverPoint: targetPoint,
           requestBodyData: null,
           responseBodyData: null,
           timeStampedPoint: {

packages/shared/client/ReplayClient.ts

@@ -1,4 +1,4 @@
 import {
   Result as EvaluationResult,
   ExecutionPoint,
   FrameId,
@@ -611,7 +611,9 @@
     });
   }
 
-  private async maybeGetConnectionStepTarget(point: ExecutionPoint, pointSupplementalIndex: number): Promise<PauseDescription | null> {
+  getTargetPoint(point: ExecutionPoint, pointSupplementalIndex: number): {
+    point: ExecutionPoint | undefined, supplementalIndex: number
+  } | null {
     const recordingId = this.getSupplementalIndexRecordingId(pointSupplementalIndex);
 
     let targetPoint: ExecutionPoint | undefined;
@@ -636,11 +638,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);
     assert(desc);
 
     this.transformSupplementalPointDescription(desc, sessionId);
@@ -1542,7 +1554,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

@@ -1,4 +1,4 @@
 import {
   Annotation,
   ContentType,
   Result as EvaluationResult,
@@ -207,6 +207,7 @@
     events: RequestEventInfo[];
     requests: RequestInfo[];
   }>;
+  getTargetPoint(point: ExecutionPoint, pointSupplementalIndex: number): { point: ExecutionPoint | undefined, supplementalIndex: number } | null;
   findPaints(): Promise<TimeStampedPointWithPaintHash[]>;
   findPoints(selector: PointSelector, limits?: PointLimits): Promise<PointDescription[]>;
 

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,36 @@
   outline: none;
 }
 
+
+.ServerSeekButton {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+
+  padding: 0.25rem;
+  padding-right: 1ch;
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+
+  flex-direction: row;
+  align-items: center;
+  gap: 1ch;
+
+  background: red !important;
+  color: #fff;
+  font-weight: bold;
+}
+
+.Row:hover .ServerSeekButton {
+  display: flex;
+}
+.Server:focus,
+.Server:hover {
+  outline: none;
+}
+
 .SeekButtonIcon {
   flex: 0 0 auto;
   color: currentColor;

src/ui/components/NetworkMonitor/NetworkMonitorListRow.tsx

@@ -1,4 +1,4 @@
 import { CSSProperties, MouseEvent, useContext, useEffect, useState } from "react";
 
 import Icon from "replay-next/components/Icon";
 import { SessionContext } from "replay-next/src/contexts/SessionContext";
@@ -116,9 +116,16 @@
     start: startTime,
     status,
     triggerPoint,
+    serverPoint,
     url,
   } = request;
 
+
+  if (serverPoint) {
+    console.log("serverPoint!!", serverPoint);
+  }
+
+
   let type = documentType || cause;
   if (type === "unknown") {
     type = "";
@@ -225,7 +232,10 @@
         )}
         {columns.name && (
           <div className={styles.Column} data-name="name">
-            {name} {graphqlOperationName && `(${graphqlOperationName})`}
+            {serverPoint && (
+              <span style={{ color: "red" }}>Server {serverPoint.supplementalIndex} {serverPoint.point}</span>
+            )}
+            {/* {name} {graphqlOperationName && `(${graphqlOperationName})`} */}
           </div>
         )}
         {columns.method && (
@@ -254,7 +264,27 @@
           </div>
         )}
 
-        {triggerPoint && triggerPoint.time !== currentTime && (
+        {serverPoint && (
+          <button
+            className={styles.ServerSeekButton}
+            data-test-name="Network-RequestRow-SeekButton"
+            onClick={() => seekToRequestWrapper(request)}
+            tabIndex={0}
+            style={{
+              backgroundColor: "red !important",
+            }}
+          >
+            <Icon
+              className={styles.SeekButtonIcon}
+              type={isAfterCurrentTime ? "fast-forward" : "rewind"}
+            />
+            <span className={styles.SeekButtonText}>
+              {isAfterCurrentTime ? "Fast-forward" : "Rewind"}
+            </span>
+          </button>
+        )}
+
+        {!serverPoint && triggerPoint && triggerPoint.time !== currentTime && (
           <button
             className={styles.SeekButton}
             data-test-name="Network-RequestRow-SeekButton"

src/ui/components/NetworkMonitor/utils.ts

@@ -1,4 +1,5 @@
 import {
+  ExecutionPoint,
   Header,
   RequestBodyEvent,
   RequestDoneEvent,
@@ -46,6 +47,7 @@ export type RequestSummary = {
   requestHeaders: Header[];
   responseHeaders: Header[];
   start: number;
+  serverPoint: { point: ExecutionPoint; supplementalIndex: number } | null;
   status: number | undefined;
   type: CanonicalRequestType;
   url: string;
@@ -168,6 +170,7 @@ export const partialRequestsToCompleteSummaries = (
         start: record.timeStampedPoint.time,
         status: responseEvent?.responseStatus,
         triggerPoint: record.triggerPoint,
+        serverPoint: record.serverPoint,
         type: REQUEST_TYPES[openEvent.requestCause || ""] ?? CanonicalRequestType.OTHER,
         url: openEvent.requestUrl,
       };