Hide XHR requests from the command log

[miklos-eiq]

Current behavior:

All XHR requests are printed to the command log, which can be distracting. There is no option to filter them. In #1184 it was mentioned this is possible by whitelisting requests with Cypress.Server.defaults, but that breaks stubbing.

Desired behavior:

Having an option, to only log stubbed XHR requests to the command log.

Maybe the best fix would be not a config option, but a toggle on the test runner, that can hide these logs.

Test code to reproduce

Test any app that does network requests.

Versions

Any OS and version.

[ckapilla]

I just found out this can be done easily programatically, see #1184

[ckapilla]

very interesting; thanks for flagging that issue

[agelico]

Updated to v8.2.0 and development turned into nightmare: all useless server pollings are back in the UI, couldn't find anything in intercept() to hide requests from UI and no plugin to bring server() functionality back. It looks pretty much like screenshots in #1184 all over again, and would gladly upvote changes requested here.

Did anyone find a way around it?

[OSIFOY]

This solution was working:

Cypress.Server.defaults({
    ignore: (xhr) => {
        return true;
    }
})

A couple versions ago, cant precise how many, but less than 2 months ago, it all appeared again.
I think we should get this fixed fast, it's impossible to navigate through all this logs and get those reports all messed up and useless cause its full of (xhr) and (fetch) logs..

What can we do or how can we help to get this issue fixed?

Version 8.4.0

[ebors-sysnetcz]

So we still dont have any answer or next version, when it will be fixed?

[the-bmc-dev]

This is really frustrating.

[simenbrekken]

I ran into this problem myself and after a deep-dive into Cypress' logging internals I discovered a novel workaround, simply hide fetch/XHR command log entries with CSS.

https://gist.github.com/simenbrekken/3d2248f9e50c1143bf9dbe02e67f5399

[samelawrence]

@simenbrekken This is working for me, thank you so much!

[MichaelBagnasco]

I think I found the line that broke the xhr ignore option. See line 187 of packages/driver/src/cy/commands/xhr.js. The changes in the commit were included in the 8.2.0 release when it started breaking for @agelico.

[Lasidar]

The workaround from @simenbrekken works great, but would love to see traction on the original issue, where XHR filtering seems completely broken.

[avorvul-grove]

Cypress can leave all XHR requests in the Command Log but make them folded in only one line to be unfolded on necessity: this may be the fastest and the cheapest way to solve the issue. How do you think, folks?

[OSIFOY]

@avorvul-grove not the ideal, right? Because it would still use some of the space in the screen, it would still be bothering..
But if we cant get a better solution, like a setting flag or something, I think that would do the job. At least its better than what we have now, the screen absolutely suffocated of useless log entries.
But I would like to point out again that a way to completely hide that from the logs would be better for everyone. And that logic could be used to any kind of logs, not only XHR.

[cie]

This worked for me:

const origLog = Cypress.log
Cypress.log = function (opts, ...other) {
  if (
    opts.displayName === 'fetch' &&
    opts.url.startsWith("https://example.com")
  ) {
    return
  }
  return origLog(opts, ...other)
}

[vaban-ru]

This worked for me:

const origLog = Cypress.log
Cypress.log = function (opts, ...other) {
  if (
    opts.displayName === 'fetch' &&
    opts.url.startsWith("https://example.com")
  ) {
    return
  }
  return origLog(opts, ...other)
}

Hello, where can i paste this code to disable xhr logs in cypress?

[samtsai]

This worked for me:

const origLog = Cypress.log
Cypress.log = function (opts, ...other) {
  if (
    opts.displayName === 'fetch' &&
    opts.url.startsWith("https://example.com")
  ) {
    return
  }
  return origLog(opts, ...other)
}

Hello, where can i paste this code to disable xhr logs in cypress?

You can include that in your support file or wrap it in a function so you can call it on demand for specific tests.

Note, the code above only hides fetch calls. XHR calls flow through differently and you'll need to hide them via css, something like this:

const routes = ["/some-route-to-hide"]

Cypress.on("log:added", ev => {
    if (
      ev.displayName === "xhr" &&
      routes.some(route => ev.consoleProps?.URL.includes(route))
    ) {
      const el = Array.from(
        window.top.document.querySelectorAll(".command-wrapper")
      ).slice(-1)[0]
      if (el) {
        el.parentElement.style.display = "none"
      }
    }
  })

[nicooprat]

Don't know if it changed in Cypress 10, which I'm using, but I had to change ev.consoleProps?.URL.includes(route) to ev.url?.includes(route).

[evgeny-goldin]

My version of the workaround above to mute the requests in the Cypress app:

cypress/support/commands.ts:

const origLog = Cypress.log;
Cypress.log = function (opts, ...other) {
  if (opts.displayName === 'script' || opts.name === 'request') {
    return;
  }
  return origLog(opts, ...other);
};

Thank you, @cie!

[simenbrekken]

I've updated my original recipe to Cypress 10 and added proper TypeScript types: https://gist.github.com/simenbrekken-visma/e804c86fd6a23cc59b89913eabbf1d82

[intellix]

all this needs is an improvement in the runner UI like a button/area to filter what appears there or perhaps just the ability to 1-line them so you can at least see what's going on. We're running a dev server with a websocket and it's absolutely spammed with nothing and I can't see any tests whatsoever.

A single graphql API call takes up 100% of the height of the sidebar

[JessicaSachs]

Yeah, at my new job we're using a library that makes around ~200 XHR requests to handle zooming in-and-out of a 5GB image. I need cy.intercept to support log: false.

@flotwig any chance of that happening? I was about to put a PR up, it's only a few lines, right?

Edit
I ended up going with a modified version of the JQuery hack. I think there should be user options to hide/show:

1. all requests (per-user config, declutter the screen)
2. log: false support inside of intercept (declutter the command log for the dashboard)

There's currently a bug when you pull down the user preferences pane because the Command Log will redraw itself. But... other than that, it works alright.

[M4RcB4]

@JessicaSachs message above as pasteable code...

const isNoisy = (url:string) => url.includes('rum.browser-intake-datadoghq.com') || url.includes('ANOTHERURL.com');

Cypress.on('log:added', ev => {
  if (ev.displayName === 'xhr' && isNoisy(ev.consoleProps.URL)) {
    // @ts-expect-error   --  you can modicy the types for this if you want.
    const top$ = window.top?.Cypress.$Cypress.$;
    top$('.command').last().hide();
  }
});

I added this to the support/someFile.ts so it ran at start up but it did not hide the logs for me. I am using Cypress v10.11.0

Any idea why it isn't working for me?

[JessicaSachs]

Any idea why it isn't working for me?

Because it's a very brittle JQuery selector. You'll need to adjust it to your version of Cypress's command log in order to get it working until @flotwig is able to add a real solution for it.

[hegeds]

hey, is there any update on this?

This would be really helpful us to improve cypress usage during the development, because several command log is generated with snapshot because of irrelevant api calls, which cause the cypress renderer to crash.

[cypress-bot]

Released in 12.8.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v12.8.0, please open a new issue.