Cannot snapshot stories with videos (206 response code)

[jagregory]

The problem

When snapshotting a Storybook story which includes a video element, if the static file server responds with a 206 (for a partial content response with a range request) then the asset is not downloaded and the snapshot fails.

[percy:core:discovery] Processing resource: http://localhost:52458/content/storybook/example.mp4 (1ms)
[percy:core:discovery] Request failed for http://localhost:52458/content/storybook/example.mp4: net::ERR_ABORTED (0ms)
[percy:core:discovery] - Skipping disallowed status [206] (0ms)

Initially, I thought it was just the 206 issue, and I manually edited this line:

cli/packages/core/src/network.js

Line 7 in 4303b74

const ALLOWED_STATUSES = [200, 201, 301, 302, 304, 307, 308];

But when I changed that line to include 206, the request appears to complete but the snapshot is still blank:

[percy:core:discovery] Handling request: http://localhost:8080/content/storybook/example.mp4 (20ms)
[percy:core:discovery] Processing resource: http://localhost:8080/content/storybook/example.mp4 (1ms)
[percy:core:discovery] - sha: 681b3d65176d6a4aa1a249f9a9fae0c91006ddcb125d9fd5f314900ca8936a7d (3ms)
[percy:core:discovery] - mimetype: video/mp4 (0ms)

(Note: the sha does match the sha of the full file on disk)

I've tried a few things that didn't have any effect:

• Different static file servers (vite, npx http-server, and python's http.server)
• Reduced concurrency down to 1
• Set headless=false and tried requesting the resource directly in a new tab, video did not appear
• Tested against a running Storybook instance vs a built bundle, neither work

Environment

• Node version: v18.12.0
• @percy/cli version: 1.14.0
• Version of Percy SDK you’re using: 4.3.4
• If needed, a build or snapshot ID: 22989497
• OS version: OS X 12.6.1
• Type of shell command-line [interface]: fish

I'm using @storybook/builder-vite (0.2.2) and vite (3.0.4) for the local dev server.

Details

Other assets are fine, but any video fails with the same issue regardless of size. My original video is 93mb, but I've tested with the smallest video I can (4kb) and it behaves the same.

Unfortunately, I'm on a poor quality internet connection at the moment so I can't test against remotely hosted assets.

Debug logs

Version from npm:

[percy:core:discovery] Processing resource: http://localhost:52458/content/storybook/example.mp4 (1ms)
[percy:core:discovery] Request failed for http://localhost:52458/content/storybook/example.mp4: net::ERR_ABORTED (0ms)
[percy:core:discovery] - Skipping disallowed status [206] (0ms)

Modified to allow 206 responses codes:

[percy:core:discovery] Handling request: http://localhost:8080/content/storybook/example.mp4 (20ms)
[percy:core:discovery] Processing resource: http://localhost:8080/content/storybook/example.mp4 (1ms)
[percy:core:discovery] - sha: 681b3d65176d6a4aa1a249f9a9fae0c91006ddcb125d9fd5f314900ca8936a7d (3ms)
[percy:core:discovery] - mimetype: video/mp4 (0ms)

[itsjwala]

• We don't seem to support partial content, you may configure CI server to serve full video content.
  • Also you could try having poster attribute on your video tag, that way we'll show the poster instead of the video. ( https://docs.percy.io/docs/debugging-sdks#videos--posters )

[jagregory]

Hi @itsjwala, this is on my laptop using the built-in commands from Percy. How should I configure it?

I've tested against the output of build-storybook and against a running storybook server, neither work.

Setting a poster attribute doesn't work. The browser needs to successfully do the metadata preload to get the video dimensions, otherwise the poster doesn't display.

[itsjwala]

• [cli/packages/core/src/network.js] (

  cli/packages/core/src/network.js

  Line 7 in 4303b74

  const ALLOWED_STATUSES = [200, 201, 301, 302, 304, 307, 308];

  ) helps in asset discovery which hits the CI server which is currently serving partial response. you can have a look at how the SDK works by the diagram on top of the page https://docs.percy.io/docs/debugging-sdks
• you can set preload attribute to none and the browser will consider the height and width of the poster ( which should equals the video's dimensions)

[jagregory]

I don’t know what you mean by the CI server? I’m just running `percy storybook ./storybook-build`.

On Tue, 22 Nov 2022 at 6:49 pm, Jigar wala ***@***.***> wrote: - [cli/packages/core/src/network.js] ( https://github.com/percy/cli/blob/4303b74df91f60e36065141289d2ef2277d1d6fc/packages/core/src/network.js#L7) helps in asset discovery which hits the CI server which is currently serving partial response. you can have a look at how the SDK works by the diagram on top of the page https://docs.percy.io/docs/debugging-sdks - you can set preload attribute to none and the browser will consider the height and width of the poster ( which should equals the video's dimensions) — Reply to this email directly, view it on GitHub <#1138 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAACUTFMK6LUTILFUIW6AC3WJR3J3ANCNFSM6AAAAAASFZGGJA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- James Gregory Tel: 0411619513 Website: http://jagregory.com Twitter: @jagregory <http://twitter.com/jagregory>

[itsjwala]

@jagregory in this case its storybook server which is serving the assets.

CI server could be any CDN/web server serving the assets which percy SDK discovers assets from.

[jagregory]

Ok, thanks. What setup does work for videos?

On Tue, 22 Nov 2022 at 7:41 pm, Jigar wala ***@***.***> wrote: @jagregory <https://github.com/jagregory> in this case its storybook server which is serving the assets. CI server could be any CDN/web server serving the assets which percy SDK discovers assets from. — Reply to this email directly, view it on GitHub <#1138 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAACUTFRPYKVNQG5ODDNNKTWJSBKXANCNFSM6AAAAAASFZGGJA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- James Gregory Tel: 0411619513 Website: http://jagregory.com Twitter: @jagregory <http://twitter.com/jagregory>