change(tracker/player): create new network msg for cached req

backend/pkg/messages/messages.go

@@ -22,7 +22,7 @@ const (
 	MsgSetInputValue               = 18
 	MsgSetInputChecked             = 19
 	MsgMouseMove                   = 20
-	MsgNetworkRequest              = 21
+	MsgLegacyNetworkRequest        = 21
 	MsgConsoleLog                  = 22
 	MsgPageLoadTiming              = 23
 	MsgPageRenderTiming            = 24
@@ -83,6 +83,7 @@ const (
 	MsgIssueEvent                  = 125
 	MsgSessionEnd                  = 126
 	MsgSessionSearch               = 127
+	MsgNetworkRequest              = 128
 	MsgIOSBatchMeta                = 107
 	MsgIOSSessionStart             = 90
 	MsgIOSSessionEnd               = 91
@@ -601,7 +602,7 @@ func (msg *MouseMove) TypeID() int {
 	return 20
 }
 
-type NetworkRequest struct {
+type LegacyNetworkRequest struct {
 	message
 	Type      string
 	Method    string
@@ -613,7 +614,7 @@ type NetworkRequest struct {
 	Duration  uint64
 }
 
-func (msg *NetworkRequest) Encode() []byte {
+func (msg *LegacyNetworkRequest) Encode() []byte {
 	buf := make([]byte, 81+len(msg.Type)+len(msg.Method)+len(msg.URL)+len(msg.Request)+len(msg.Response))
 	buf[0] = 21
 	p := 1
@@ -628,11 +629,11 @@ func (msg *NetworkRequest) Encode() []byte {
 	return buf[:p]
 }
 
-func (msg *NetworkRequest) Decode() Message {
+func (msg *LegacyNetworkRequest) Decode() Message {
 	return msg
 }
 
-func (msg *NetworkRequest) TypeID() int {
+func (msg *LegacyNetworkRequest) TypeID() int {
 	return 21
 }
 
@@ -2202,6 +2203,43 @@ func (msg *SessionSearch) TypeID() int {
 	return 127
 }
 
+type NetworkRequest struct {
+	message
+	Type      string
+	Method    string
+	URL       string
+	Request   string
+	Response  string
+	Status    uint64
+	Timestamp uint64
+	Duration  uint64
+	Cached    bool
+}
+
+func (msg *NetworkRequest) Encode() []byte {
+	buf := make([]byte, 91+len(msg.Type)+len(msg.Method)+len(msg.URL)+len(msg.Request)+len(msg.Response))
+	buf[0] = 128
+	p := 1
+	p = WriteString(msg.Type, buf, p)
+	p = WriteString(msg.Method, buf, p)
+	p = WriteString(msg.URL, buf, p)
+	p = WriteString(msg.Request, buf, p)
+	p = WriteString(msg.Response, buf, p)
+	p = WriteUint(msg.Status, buf, p)
+	p = WriteUint(msg.Timestamp, buf, p)
+	p = WriteUint(msg.Duration, buf, p)
+	p = WriteBoolean(msg.Cached, buf, p)
+	return buf[:p]
+}
+
+func (msg *NetworkRequest) Decode() Message {
+	return msg
+}
+
+func (msg *NetworkRequest) TypeID() int {
+	return 128
+}
+
 type IOSBatchMeta struct {
 	message
 	Timestamp  uint64

backend/pkg/messages/read-message.go

@@ -300,9 +300,9 @@ func DecodeMouseMove(reader BytesReader) (Message, error) {
 	return msg, err
 }
 
-func DecodeNetworkRequest(reader BytesReader) (Message, error) {
+func DecodeLegacyNetworkRequest(reader BytesReader) (Message, error) {
 	var err error = nil
-	msg := &NetworkRequest{}
+	msg := &LegacyNetworkRequest{}
 	if msg.Type, err = reader.ReadString(); err != nil {
 		return nil, err
 	}
@@ -1329,6 +1329,39 @@ func DecodeSessionSearch(reader BytesReader) (Message, error) {
 	return msg, err
 }
 
+func DecodeNetworkRequest(reader BytesReader) (Message, error) {
+	var err error = nil
+	msg := &NetworkRequest{}
+	if msg.Type, err = reader.ReadString(); err != nil {
+		return nil, err
+	}
+	if msg.Method, err = reader.ReadString(); err != nil {
+		return nil, err
+	}
+	if msg.URL, err = reader.ReadString(); err != nil {
+		return nil, err
+	}
+	if msg.Request, err = reader.ReadString(); err != nil {
+		return nil, err
+	}
+	if msg.Response, err = reader.ReadString(); err != nil {
+		return nil, err
+	}
+	if msg.Status, err = reader.ReadUint(); err != nil {
+		return nil, err
+	}
+	if msg.Timestamp, err = reader.ReadUint(); err != nil {
+		return nil, err
+	}
+	if msg.Duration, err = reader.ReadUint(); err != nil {
+		return nil, err
+	}
+	if msg.Cached, err = reader.ReadBoolean(); err != nil {
+		return nil, err
+	}
+	return msg, err
+}
+
 func DecodeIOSBatchMeta(reader BytesReader) (Message, error) {
 	var err error = nil
 	msg := &IOSBatchMeta{}
@@ -1774,7 +1807,7 @@ func ReadMessage(t uint64, reader BytesReader) (Message, error) {
 	case 20:
 		return DecodeMouseMove(reader)
 	case 21:
-		return DecodeNetworkRequest(reader)
+		return DecodeLegacyNetworkRequest(reader)
 	case 22:
 		return DecodeConsoleLog(reader)
 	case 23:
@@ -1895,6 +1928,8 @@ func ReadMessage(t uint64, reader BytesReader) (Message, error) {
 		return DecodeSessionEnd(reader)
 	case 127:
 		return DecodeSessionSearch(reader)
+	case 128:
+		return DecodeNetworkRequest(reader)
 	case 107:
 		return DecodeIOSBatchMeta(reader)
 	case 90:

ee/connectors/msgcodec/messages.py

@@ -185,7 +185,7 @@ class MouseMove(Message):
         self.y = y
 
 
-class NetworkRequest(Message):
+class LegacyNetworkRequest(Message):
     __id__ = 21
 
     def __init__(self, type, method, url, request, response, status, timestamp, duration):
@@ -772,6 +772,21 @@ class SessionSearch(Message):
         self.partition = partition
 
 
+class NetworkRequest(Message):
+    __id__ = 128
+
+    def __init__(self, type, method, url, request, response, status, timestamp, duration, cached):
+        self.type = type
+        self.method = method
+        self.url = url
+        self.request = request
+        self.response = response
+        self.status = status
+        self.timestamp = timestamp
+        self.duration = duration
+        self.cached = cached
+
+
 class IOSBatchMeta(Message):
     __id__ = 107
 

ee/connectors/msgcodec/msgcodec.py

@@ -216,7 +216,7 @@ class MessageCodec(Codec):
             )
 
         if message_id == 21:
-            return NetworkRequest(
+            return LegacyNetworkRequest(
                 type=self.read_string(reader),
                 method=self.read_string(reader),
                 url=self.read_string(reader),
@@ -680,6 +680,19 @@ class MessageCodec(Codec):
                 partition=self.read_uint(reader)
             )
 
+        if message_id == 128:
+            return NetworkRequest(
+                type=self.read_string(reader),
+                method=self.read_string(reader),
+                url=self.read_string(reader),
+                request=self.read_string(reader),
+                response=self.read_string(reader),
+                status=self.read_uint(reader),
+                timestamp=self.read_uint(reader),
+                duration=self.read_uint(reader),
+                cached=self.read_boolean(reader)
+            )
+
         if message_id == 107:
             return IOSBatchMeta(
                 timestamp=self.read_uint(reader),

frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx

@@ -128,10 +128,10 @@ export function renderDuration(r: any) {
   );
 }
 
-function renderStatus({ status }: { status: string }) {
+function renderStatus({ status, cached }: { status: string, cached: boolean }) {
   return (
     <>
-      {parseInt(status, 10) === 200 ? (
+      {cached ? (
         <Tooltip title={"Served from cache"}>
           <div className="flex items-center">
             <span className="mr-1">{status}</span>

mobs/messages.rb

@@ -104,7 +104,7 @@ message 20, 'MouseMove' do
   uint 'X'
   uint 'Y'
 end
-message 21, 'NetworkRequest', :replayer => :devtools do
+message 21, 'LegacyNetworkRequest', :replayer => :devtools do
   string 'Type' # fetch/xhr/anythingElse(axios,gql,fonts,image?)
   string 'Method'
   string 'URL'
@@ -490,4 +490,14 @@ message 127, 'SessionSearch', :tracker => false, :replayer => false  do
   uint 'Partition'
 end
 
-# since tracker 4.1.10
+message 128, 'NetworkRequest', :replayer => :devtools do
+  string 'Type' # fetch/xhr/anythingElse(axios,gql,fonts,image?)
+  string 'Method'
+  string 'URL'
+  string 'Request'
+  string 'Response'
+  uint 'Status'
+  uint 'Timestamp'
+  uint 'Duration'
+  boolean 'Cached'
+end

tracker/tracker/src/main/modules/network.ts

@@ -39,10 +39,9 @@ function checkCacheByPerformanceTimings(requestUrl: string) {
   if (performance) {
     const timings = performance.getEntriesByName(requestUrl)[0]
     // @ts-ignore - weird ts typings, please refer to https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming
-    if (timings.transferSize === 0 || timings.responseStart - timings.requestStart < 10) {
+    return timings.transferSize === 0 || timings.responseStart - timings.requestStart < 10
-      return true
+  }
-    }
+  return false
-  } else return false
 }
 
 interface RequestData {
@@ -229,9 +228,10 @@ export default function (app: App, opts: Partial<Options> = {}) {
               String(reqResInfo.url),
               stringify(reqResInfo.request),
               stringify(reqResInfo.response),
-              isCached ? 304 : r.status,
+              r.status,
               startTime + getTimeOrigin(),
               duration,
+              isCached,
             ),
           )
         })
@@ -299,9 +299,10 @@ export default function (app: App, opts: Partial<Options> = {}) {
             String(reqResInfo.url),
             stringify(reqResInfo.request),
             stringify(reqResInfo.response),
-            isCached ? 304 : xhr.status,
+            xhr.status,
             startTime + getTimeOrigin(),
             duration,
+            isCached,
           ),
         )
       }),