XHR is not being logged when request is being made using fetchJson, NextJS

[Naren-Hub]

We are using the NextJS framework in which a request is being made using 'fetchJson'. But, the issue is that the XHR request is not being logged by cypress.

Below is the logs displayed in the 'Network' - the address request is being made and it received 200. The logic in the programming is that when I enter Pincode that matches length 6, the fetchJson method is being called which makes the request.

Below is my test case:

it("Validate Error message for PinCode ",function(){
  cy.server({
    method: "POST"
  });
  cy.route("POST","/api/address").as("mypin");
                  
  cy.get("form").within(()=>{       
    cy.get("[name='clientStreetNo']").type("Street");       
    cy.get("[name='clientStreetName']").type("StreetName");
    cy.get("[name='clientArea']").type("are");
    cy.get("[name='clientPinCode']").type("500082");
            
    cy.wait("@mypin");
    cy.wait("@mypin").then(function(xhr){
      cy.log(JSON.stringify(xhr.response.body));          
    });
    cy.wait(3000);
    cy.get(".MuiButton-contained").contains("Next").click();      
  });
}); 

Current behavior:

Currently, as shown in the screenshot above, even the GET requests are getting logged, but the POST request for which I have started my server is not getting logged.

Desired behavior:

The expectation is that I want to see if an API request is being made or not.

Test code to reproduce

The dev code cannot be produced as it is private repo. However, the steps to reproduce are explained above

Versions

Cypress Version - 4.9.0
NextJS version - 9.3

[Naren-Hub]

To give more info on what all were tried before raising this issue:

• Tried whitelisting the URL's during instantiating Server.
  referred to: https://docs.cypress.io/api/commands/server.html#Options
  Also the existing ticket on whitelisting, to allow to log all requests - cy.server whitelist behaves as blacklist #6642
  cy.server({ method: "POST", whitelist: () => false });

[jennifer-shehane]

Can you provide a smaller reproducible example that we can run? I don't see any reason why this wouldn't log from the screenshot provided.

Are the other XHRs logging? Because I don't see any logs in the current screenshot.

[Naren-Hub]

The test has changed since the time I have raised this ticket. However, still, I am able to reproduce the issue. below is the screenshot showing the rest of the XHR's being logged.

Taking a closer look at it, I noticed that the 'Type' of the request is 'fetch' and not XHR. I presume this might causing Cypress to not log the request.

Besides, on the ask for the reproducible code - apologies, I am afraid I may not be able to provide you at the moment.

I am relatively new to the NodeJS world - React, Next, Cypress, etc. Hence I may not be able to provide you the code. But looking at the code, I am calling a function that makes an API call for me and returns the response. It looks like something below:

if (pinCode && pinCode.length === 6) {
  fetchJson('myendpoint', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  }).
    then((response) => {
                // Use the response here.Populate city and state for user......
              });           
        }
        else {
            // fallback.Let the user enter City and state manually.. 
        }
    }, [pinCode])

And inside the fetchJson function, I have some code like this:

export default async function fetcher(...args) {
  try {
    const response = await fetch(...args)
    const data = await response.json()
    if (response.ok) {
      return data
    }
  } catch (error) {
    if (!error.data) {
      error.data = { message: error.message }
    }
    throw error
  }
}

To re-iterate, this is NextJS framework. I was told that this 'fetch' feature is a NextJS specific feature. Hope this info is sufficient for you to reproduce it.

[lilaja]

@Naren-Hub your request isn't an xhr, but a fetch. Look at type column in devtools ( + fetchJson is a wrapper over fetch.)
I think cypress doesn't support fetch requests logging .

@jennifer-shehane are you planing to add something like that ? or are you aware of any solution for that?
I would like to be able to log failing requests, as this would help us understand why test are failing.

I looked at cypress proxy, but there is no simple solution to pull request/response logs form there.
I noticed that there is an option to debug cypress:proxy:http:response-middleware but i would rather have this in cypress log.
I also know that using experimentalFetchPolyfill would work, but since it is deprecated i don't want to use it.

edit:
I also tried intercept('*', someLoggingLogic) but that brakes everything :)

[bahmutov]

@Naren-Hub please use cy.intercept to spy on fetch requests

@lilaja not sure what you mean by "something like that" Could you open a new proposal with ideas for improving Ajax logging

[lilaja]

@bahmutov i mean log all requests not just xhr in cypress app.
ok, I will create a proposal issue soon.