How to disable blockedHosts urls from Cypress test runner and console logs?

[abhidp]

I have the following trackers blocked during Cypress tests. Cypress keeps on logging these urls in the test runner logs which is ugly and interferes with other useful log messages and assertions and increases scrolling/searching effort from the user.

Is there a way to disable logging of these urls in the test runner and console ?

//cypress.json
{ ...
  "blockHosts": [
    "*hsappstatic.net",
    "*hubspot.com",
    "*hs-banner.com",
    "*usemessages.com",
    "*newrelic.com",
    "*nr-data.net",
    "*datadoghq.com"
  ],
  ...
}

[jennifer-shehane]

To ignore requests from the Command Log, you can ignore them as part of Cypress.Server.defaults. https://docs.cypress.io/api/cypress-api/cypress-server#Options

Cypress.Server.default is deprecated though. We're working on a new, more flexible way to decide which requests display in the Command Log, so look for that in a future version.

[abhidp]

Thanks @jennifer-shehane , I was able to solve this by

//cypress/support/index.js

Cypress.Server.defaults({
  ignore: xhr => {
    return Cypress.config().blockHosts.some(blockedHost =>  // get blockHosts from cypress.json using Cypress.config()
      Cypress.minimatch(new URL(xhr.url).host, blockedHost)  // if current url matches any blockedHost item, return true
    )
  }
})

[dctalbot]

Any suggestions for how to achieve this in Cypress 8?

[abhidp]

hi @jennifer-shehane any update on this or any workaround on Cypress v10?
There is a lot of unwanted noise in the Cypress runner command log panel and makes debugging very difficult.
We have a lot of third-party trackers in our app and xhr requests just flood the command log panel and we miss the more important cy command logs.
Sorry to say, thats not a good developer experience at all.

[stoplion]

I've added blockHosts but nothing is blocked.

[abhidp]

#16536 (reply in thread)

[SimonGrn]

Hello @jennifer-shehane , is there something in the new version to block the noise ? I added some URLs in my blockedHosts but this just replaces grey 200 calls with red 404 ones, not sure this is an improvement.
How can I properly hide them from the runner please ?

Thanks in advance

[abhidp]

The above code doesn't work anymore from v10 onwards. They have removed the blockedHosts logic from their source code

[SimonGrn]

The above code doesn't work anymore from v10 onwards. They have removed the blockedHosts logic from their source code

I don't understand, when I put the domain in blockedHosts it is correctly blocked (the call ends in 404 instead of a 200 or whatever). So it works, but partially, since I don't want any call to be made in the first place, or the call to be not logged.

[nurayttumer]

@SimonGrn same issue here, any solution?

[SimonGrn]

Nope, nothing, I still have a lot of red 404 calls in my runner 🤷

[BloodyRain2k]

I've had to come up with my own solution for this, as with a SharePoint App you get a LOT of "noise" in your command log and after a few days of searching, I did not find anything helpful provided by Cypress itself (besides the used hooks):

/** Filters out most 'fetch' and 'xhr' requests fron the sidepanel log to keep it readable.
 *  Meant to be called directly at the beginning of the spec. */
export function hideBackgroundRequests() {
  const hide_names: string[] = ["fetch", "xhr"];
  const hide_url_parts = [
    "login.microsoftonline.com",
    "microsoft.com/Collector/",
    "cdn.office.net",
    "/sockjs-node/",
    "graph.microsoft.com",
    "/_api/web/",
  ];
  Cypress.on("log:changed", (log, interactive) => {
    if (hide_names.indexOf(log.displayName) == -1 || log.alias) return;
    if (!hide_url_parts.some(part => log.url.indexOf(part) > -1)) return;
    
    const logs = window?.top?.document.querySelectorAll("li.command-name-request");
    if (logs?.length) {
      for (let i = logs.length - 1; i >= 0; i--) {
        const keys = Object.keys(logs[i]);
        const inst_key = keys.find(k => k.search(/^__reactInternalInstance/i) > -1);
        if (!inst_key) { continue; }
        
        const internal = logs[i][inst_key];
        if (internal?.return?.key == log.id) {
          logs[i].remove();
          return;
        }
      }
    }
  });
}

The way it works is that it's "listening" for updates to the command log, and if it finds something that's a "fetch" or "xhr" which also includes any of the hide_url_parts, it just deletes that node from the log.

The reason this runs on log:changed instead of log:added is because when entries are added initially, they do not contain any alias information. And because I wanted to exclude those from being deleted, because if I bother giving it an alias it's probably important, I had to settle with only reacting to updates.
Which comes with the caveat that entries that would match the pattern but never get updated, aka they never appear in "log:changed", will stick around. But it happens rarely enough.

Another caveat is that Cypress reconstructs the command log when you "return" to it. For example when you click little "v" next to the "retry" button in the upper right of the command log and enter the settings panel.
This means that all entries it still knows will be back and not filtered, because this time they're not triggering the hook.

As for the original topic of actively blocking requests: I've "solved" that by running a regex based intercept before each test that returns 404. I'm unsure how reliable this is in terms of preventing requests from succeeding, given that my intention here is to just prevent "background noise" from taking up bandwidth.
But still, maybe the approach can work for others here that have similar issues.

Thinking about it, maybe I should instead return 204, so the part that did request it still doesn't get anything but won't spam the console with failed requests. Gotta try that later.

[armandoleite]

This worked for me:
//cypress.config.js
`module.exports = defineConfig({

projectId: "PROJECT_ID",

blockHosts: [
"googletagmanager.com",
"analytics.google.com",
"google-analytics.com",
"newrelic.com",
"nr-data.net"
],
...`

//cypress/support/e2e.js
`beforeEach(() => {
cy.intercept({ method: 'GET', url: '/*' }, { log: false });
cy.intercept({ method: 'POST', url: '/' }, { log: false });
cy.intercept({ method: 'PUT', url: '**/' }, { log: false });
cy.intercept({ method: 'DELETE', url: '**/*' }, { log: false });

Cypress.config().blockHosts.forEach(blockedHost => {
    cy.intercept({
        url: `**://${blockedHost}/**`,
        middleware: true
    }, (req) => {
        req.destroy();
    }).as('blockedRequest');

    cy.intercept({
        url: `**://*.${blockedHost}/**`,
        middleware: true
    }, (req) => {
        req.destroy();
    }).as('blockedRequest');
});

});`

[GrayedFox]

I can't get this to work, I believe this PR introduced the ability to hide logs of intercepted requests, and it seems like passing it as the third option in a config object when using a RouteHandler is correct (according to type hints):

// e2e.js

// hide blocked URLs from the Cypress UI log so it's not so noisy
function hideBlockedRequests() {
    const blockedTypes = 'xhr';
    const blockedHosts = Cypress.config().blockHosts;

    // setup blocked host interception for each blocked host
    for (const blockedHost of blockedHosts) {
        cy.intercept(
            {
                url: `${blockedHost}`,
                middleware: true,
                resourceType: blockedTypes
            },
            req => {
                req.destroy();
            },
            { log: false }
        ).as(`${blockedHost}`);
    }
}

beforeEach(function () {
    hideBlockedRequests();
})

And my blocked hosts:

// cypress.config.js
module.exports = defineConfig({
    ...
    e2e: {
        blockHosts: ['api.rollbar.com', 'm.stripe.com', 'api-iam.intercom.io'],
        ...
    }
})

Still seeing all the xhr 503s in the test runner 😕