Getting net::ERR_ABORTED with Percy Snapshot

[cancan101]

I am using Percy Snapshot to test a Next.js site. When the tests run, I sporadically see messages like:

[percy:core:discovery] Request failed for http://localhost:3000/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fxxx.33978b3331925339af03332ef33f1c5f.svg&w=1200&q=75: net::ERR_ABORTED (0ms)

and then those images appear "broken" in the snapshot. What is causing the browser to abort that load and is there any way to control / prevent that when testing (e.g. with some sort of longer timeout)?

[Robdel12]

Hey @cancan101! This happens when the request fails by the asset discovery browser.

What is causing the browser to abort that load

Do these requests require any kind of auth or headers set? You'll have to check the apps server logs to see why the connection is being dropped/closed/aborted. Chromium's network interception doesn't give us a reason why the request failed, just that the server failed to load or respond.

[cancan101]

We do not have any auth checks, etc. Is there any way to control the parallelism of percy snapshot (assuming that it does in fact request multiple pages / widths in parallel)?

[Robdel12]

You can change the concurrency here: https://docs.percy.io/docs/cli-configuration#discovery We open each snapshot captured in it's own tab and resize the tabs viewport across all of the configured widths

[cancan101]

So I actually think that abort message is coming from the browser aborting (canceling) a request as opposed to a server issues. Specifically I think when the percy cli iterates over the widths:

cli/packages/core/src/percy.js

Lines 327 to 330 in feecfde

	// trigger resize events for other widths
	for (let width of widths) {
	await page.resize({ width, height: conf.minHeight });
	}

it will cause the browser to at first request a different image from the sourceset / based on CSS but then cancel that request when the image is no longer needed. You may need to make a await this.network.idle() call between sizes.