1853295 - "Error: An unexpected error occurred" while taking full page screenshot

Status: NEW

(Firefox :: Screenshots, defect, P3)

Description

[Teal Dulcet [:tdulcet] (TB Council)]

Attachment: image.png

Steps to reproduce:

1. Go to: https://beta.ruff.rs/docs/rules/
2. Press <Ctrl> + <Shift> + <S> to open the screenshots UI
3. Click the "Save full page" button in the upper right corner

Actual results:
No screenshot is taken. Instead, the attached notification is shown with an error.

These errors also appear in the browser console:

[Exception... "Failure"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "<unknown>"  data: no] ExtensionCommon.sys.mjs:817
------Error in promise: Error: An unexpected error occurred catcher.js:78:15
<empty string> catcher.js:79:15
Unhandled error: 
Object { fromMakeError: true, name: "Error", message: "Error: An unexpected error occurred", stack: "" }
 undefined catcher.js:21:11
Promise error in screenshotPage: Error: An unexpected error occurred <empty string> communication.js:47:15
------Error in promise: BackgroundError: Error: An unexpected error occurred
    callBackground moz-extension://b04697bd-ceab-41ea-929b-824cc358cd3d/selector/callBackground.js:14
catcher.js:78:15
callBackground/<@moz-extension://b04697bd-ceab-41ea-929b-824cc358cd3d/selector/callBackground.js:14:19
catcher.js:79:15
Unhandled error: 
Object { fromMakeError: true, name: "BackgroundError", message: "BackgroundError: Error: An unexpected error occurred", stack: "callBackground/<@moz-extension://b04697bd-ceab-41ea-929b-824cc358cd3d/selector/callBackground.js:14:19\n", errorCode: undefined, popupMessage: undefined }
 undefined catcher.js:21:11
BackgroundError: Error: An unexpected error occurred callBackground.js:14:19
Unhandled error: 
Object { fromMakeError: true, name: "BackgroundError", message: "BackgroundError: Error: An unexpected error occurred", stack: "callBackground/<@moz-extension://b04697bd-ceab-41ea-929b-824cc358cd3d/selector/callBackground.js:14:19\n" }
 undefined

Expected results:
A screenshot is taken.

I tested with both Firefox 117.0.1 and the latest Firefox Nightly 119.

Comment 1

[Teal Dulcet [:tdulcet] (TB Council)]

Attachment: image.png

Attached is a screenshot of the browser console errors in Firefox Nightly.

Comment 2

[Niklas Baumgardner [:niklas]]

Thanks for filing this bug.

The error is occurring because the page is 1280x46585 which is bigger than we can write to a canvas.

If you set screenshots.browser.component.enabled to true in about:config it will partially fix the error.
We can't capture an image that big but instead of throwing an error, we crop the screenshot to the biggest possible size.

Comment 3

[Niklas Baumgardner [:niklas]]

This bug is fixed in the component by bug 1814917. We will mark this bug as a dup once the component is in Nightly

Comment 4

[Teal Dulcet [:tdulcet] (TB Council)]

(In reply to Niklas Baumgardner [:niklas] from comment #2)

The error is occurring because the page is 1280x46585 which is bigger than we can write to a canvas.

Thank you Niklas for the information and the workaround.

I can confirm from MDN that the maximum supported canvas size in Firefox is 32K × 32K, which is obviously less than the height you stated for this page. However, MDN links to a Stack Overflow question as the source for this data, which in turn links to this GitHub README, which shows that Firefox has the smallest limit of the modern browsers they tested (MDN is outdated). Specifically, Chrome and Edge support up to 64K × 64K, while Safari supports up to 4M × 8M. Increasing the maximum supported canvas size in Firefox to at least match Chrome should resolve this bug in the vast majority of cases and would be nice improvement in combination with cropping the screenshots if they were still too large. The page I listed in comment 0 is certainly large, but I do not believe it is excessively large, so users should still be able to take a screenshot of the full page without it getting cropped.

Comment 5

[Niklas Baumgardner [:niklas]]

The max supported canvas size for Firefox is 22,528 x 20,992 (472,907,776) from MDN. Which is greater than Chrome and Edge.
I created a jsfiddle to test this. See it here.
*The README listed the Firefox max canvas size at 11,180 x 11,180 (124,992,400) but that was from 2 years ago. I was able to get a max canvas size of 22,528 x 22,528 (507,510,784) on Firefox 119 which is larger than stated on MDN. I'm not sure if you've tested this yourself.

While our max dimension is less at 32,767, no browser can screenshot 32,767 x 32,767 or 65,535 x 65,535 because those dimensions are larger than the max canvas area for any of the mentioned browsers.
Chrome's max canvas using the max dimension is 4,096 x 65,535.
Firefox's max canvas using the max dimension is 14,432 x 32,767.

I tried taking a screenshot of the page on Chrome, Edge, and Firefox and I got the following results.

• Chrome screenshot was 1,701 x 16,384.
• Edge screenshot was 1,542 x 32,306.
• Firefox screenshot was 1,718 x 32,767.
  (The differences in width are due to various sidebar/scrollbar widths in each browser)

I didn't test on Safari because I'm on Windows, but I can update this comment to include Safari if needed.

Let me know if you are seeing different results.

With that said, we are running into the max dimension with the site you provided and if you think the max dimension of a canvas should be increased, I would suggest filing a bug with Core :: Graphics.

Comment 6

[Teal Dulcet [:tdulcet] (TB Council)]

Attachment: image.png

(In reply to Niklas Baumgardner [:niklas] from comment #5)

While our max dimension is less at 32,767, no browser can screenshot 32,767 x 32,767 or 65,535 x 65,535 because those dimensions are larger than the max canvas area for any of the mentioned browsers.
Chrome's max canvas using the max dimension is 4,096 x 65,535.
Firefox's max canvas using the max dimension is 14,432 x 32,767.

Thanks for all this detailed information, it was very helpful. I indeed took those sources I linked for their word and clearly I should have tested it myself. I repeated your steps and got roughly the same results.

However, maybe I am missing something, but I do not see where this arbitrary 32K limit for screenshots in Firefox comes from. Based on your provided JSFiddle, the actual max canvas height in Firefox is 8M (8,388,607), so one should be able to take a full page screenshot of this page (and other much longer pages) without any problems. In addition, based on the dimensions for this page you provided in comment 2, the total area (59,628,800) is significantly less than both the max canvas size (507,510,784) and the (incorrect?) max total area stated on the attached notification, so I do not understand why this page would be getting cropped. Removing this separate screenshot size limitation and instead using the maximum canvas size would presumably fix this bug in the majority of cases without needing to wait for Bug 1789727.