fix: ensure that proxy logs are updated after the xhr has actually co…

…mpleted (#21373)

Co-authored-by: Emily Rohrbough <emilyrohrbough@users.noreply.github.com>

packages/driver/cypress/integration/cypress/proxy-logging_spec.ts

@@ -181,15 +181,22 @@ describe('Proxy Logging', () => {
           }
         })
 
-        const oldOnload = cy.state('server').options.onLoad
+        const xhr = new win.XMLHttpRequest()
 
-        cy.stub(cy.state('server').options, 'onLoad').log(false).callsFake(function (...args) {
-          setTimeout(() => {
-            oldOnload.call(this, ...args)
-          }, 500)
+        const logIncomingRequest = Cypress.ProxyLogging.logIncomingRequest
+        const updateRequestWithResponse = Cypress.ProxyLogging.updateRequestWithResponse
+
+        // To simulate the xhr call landing second, we send updateRequestWithResponse immediately after
+        // the call is intercepted
+        cy.stub(Cypress.ProxyLogging, 'logIncomingRequest').log(false).callsFake(function (...args) {
+          logIncomingRequest.call(this, ...args)
+          updateRequestWithResponse.call(this, {
+            requestId: args[0].requestId,
+            status: 404,
+          })
         })
 
-        const xhr = new win.XMLHttpRequest()
+        cy.stub(Cypress.ProxyLogging, 'updateRequestWithResponse').log(false).callsFake(function () {})
 
         xhr.open('GET', '/some-url')
         xhr.send()

packages/driver/src/cypress/proxy-logging.ts

@@ -324,13 +324,7 @@ export default class ProxyLogging {
     return proxyRequest
   }
 
-  private updateRequestWithResponse (responseReceived: BrowserResponseReceived): void {
-    const proxyRequest = _.find(this.proxyRequests, ({ preRequest }) => preRequest.requestId === responseReceived.requestId)
-
-    if (!proxyRequest) {
-      return debug('unmatched responseReceived event %o', responseReceived)
-    }
-
+  private updateProxyRequestWithResponse (proxyRequest, responseReceived) {
     proxyRequest.responseReceived = responseReceived
 
     proxyRequest.updateConsoleProps()
@@ -343,6 +337,22 @@ export default class ProxyLogging {
     proxyRequest.log?.end()
   }
 
+  private updateRequestWithResponse (responseReceived: BrowserResponseReceived): void {
+    const proxyRequest = _.find(this.proxyRequests, ({ preRequest }) => preRequest.requestId === responseReceived.requestId)
+
+    if (!proxyRequest) {
+      return debug('unmatched responseReceived event %o', responseReceived)
+    }
+
+    if (proxyRequest.xhr && proxyRequest.xhr.xhr.readyState !== XMLHttpRequest.DONE) {
+      proxyRequest.xhr.xhr.addEventListener('load', () => {
+        this.updateProxyRequestWithResponse(proxyRequest, responseReceived)
+      })
+    } else {
+      this.updateProxyRequestWithResponse(proxyRequest, responseReceived)
+    }
+  }
+
   private updateRequestWithError (error: RequestError): void {
     const proxyRequest = _.find(this.proxyRequests, ({ preRequest }) => preRequest.requestId === error.requestId)