"Error: Uncaught (in promise): Event: {"isTrusted":true}" while rendering container in FF

[ddzingielewski]

While trying to render div container with a lot of angular material chechboxes using htmlToImage.toPng i received an error: Error: Uncaught (in promise): Event: {"isTrusted":true} It seems that this error appeared after upgrading Firefox to version 97 or above (it works fine in current Chrome and Edge, and also worked fine in FF<=96.0.3). If i reduce number of components inside container: for example: from 400 to 100-200 it renders without error.

Steps To Reproduce

Here is code that reproduces bug: https://stackblitz.com/edit/angular-ivy-bq1svc Try running it from Firefox (version 97 or above) and click "Export".

Additional Context

Same behavior is when instead of mat-checkbox i use mat-table for example. On the other hand when I replace mat-checkbox with mat-radio-button the error is gone.

Your Environment

• html-to-image: [e.g. 1.9.0]
• OS: [Windows 10 Pro]
• Browser: [Firefox 97.0.1]

[faaraya]

Hi everyone! It the same for me but:

I'm using htmlToImage.ToBlob and i'm not using angular material, i'm just using many components inside container and if i reduce the number of components, it works again.

• html-to-image: [e.g. 1.9.0]
• Browser: [Firefox 97.0.1]

[mohsinmuzawar01]

Same thing happens in chrome. After the project is deployed to a secured URL but works fine on local.

[mohsinmuzawar01]

Is this issue being worked upon ? When would this issue be resolved?

[liveangela]

Same problem~ All methods (toPng, toSvg, toCanvas...) will throw this error. But it's strange that it works for most situations, only failed for some certain ones, like making this tweet into image

Your Environment

• html-to-image: [1.9.0]
• OS: [MacBook Pro]
• Browser: [Chrome 99.0.48]

[mhamri]

the stackblitz example need a try/catch to show the actual error. the error in title is wrong and is related to unhandled exception

here is the corrected one: https://stackblitz.com/edit/angular-ivy-ftzdjh

the error look like below

but my issue is the error isn't helpful and doesn't help with debugging it

I have the same issue and it happens on firefox but chromium edge is fine

should be bcs of this warning in firefox

Element.setCapture() is deprecated. Use Element.setPointerCapture() instead. For more help https://developer.mozilla.org/docs/Web/API/Element/setPointerCapture

[biiibooo[bot]]

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

[mhamri]

bump!

[biiibooo[bot]]

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

[gecko-steffen]

Bumpety bump

[biiibooo[bot]]

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

[mhamri]

bump

[weix77]

I also stumbled across this problem. It seems to be somehow related to the number of elements inside the element being exported.

[mhamri]

but it doesn't have any issue in chrome. it's only happen in the firefox

[kaushalm]

bump

[biiibooo[bot]]

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

[mhamri]

bump

[kaushalm]

if it helps anyone, here is the root cause that solved the issue for me, my dom had 'elementtiming' attribute attached to all the nodes for some performance capturing and "elementtiming" attribute is not compatible with all types of nodes like canvas etc.

In my case this error was coming on firefox and on chrome in some cases it was crashing the browser tab.

[biiibooo[bot]]

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

[mhamri]

aya!

[voxivoid]

I also got this error on firefox, despite it working perfectly on chrome

[ehsantekgenisys]

any update on this issue?

[lwstudy]

这个问题怎么产生的呢？我在chrome104也会遇到，但是在不同画图元素时，有的能会error有的不会， 1、我在用antv/x6中的vue-shape时使用到htmlToImage.toPng()没什么问题， 2、但是在复杂的节点分组连接桩时，会产生该error，我猜测可能是groups中定义的tagName元素（rect、text、image）导致。【也可能是别的，还是想知道到底发生了什么导致】

[rooby]

bump. Why isn't the bot removing the stale tag?

Seems like there is a history on this repo of issues in this queue getting ignored and then closed by the stale bot for no good reason. It's fine if it takes a long time to get around to investigating issues, but automatically closing them because no one has got to them yet is extremely frustrating.

[AlexSirenko]

The bug is related to firefox image limitations (some sort of max height is 32676px). When canvas/image have more height - Firefox throws an error. Workaround is to:

1. use toSvgToString but for chunks (define several nodes and the get svgs for every node)
2. Merge svg strings into one string.
3. Make blob from there.

Use patch-package if needed.

export async function toSvgByChunks(nodes, options = {}) {
const svgsStrings = (await Promise.all(nodes.map(node => toSvgString(node, options)))).join('');

return new Blob([`<svg><foreignObject>${svgsStrings}</foreignObject></svg>`], { type: 'image/svg+xml' });
}

The same can be done to convert to image.

1. Create images for chunks (check toCanvas method).
2. Draw images in canvas (check toCanvas method).
3. Canvas to blob (but not use canvas.toBlob) method.

[lucian55]

bump

[ShivamRealcoderz]

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

not-stale

[thesftechie]

toSvg works in my case when I encountered this error.

I found the issue with mine was having imported a font with @font-face. I removed the font requirement from one of my use cases but it is required for the other.

I think this is an external resource issue with the svg generated. When I toSvg and then try to create an img with the src as the dataUrl, I hit my debugger statement in onerror for the img. When I remove the font-face requirement, I load the img without issue.

[thesftechie]

I actually got it to work. It turns out I had a duplicate @font-face declaration. Once I got it down to 1 @font-face, it worked like a charm for the other methods as well.

[thesftechie]

I think I know the problem with the first. The svg (after prettier) is ~30MB, the flat dataUrl is ~40MB. After updating to have a much smaller list, the png generated without issue.

Length limitations

Browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limited URLs to 65535 characters long which limits data URLs to 65529 characters (65529 characters being the length of the encoded data, not the source, if you use the plain data:, without specifying a MIME type). Firefox version 97 and newer supports data URLs of up to 32MB (before 97 the limit was close to 256MB). Chromium objects to URLs over 512MB, and Webkit (Safari) to URLs over 2048MB.

MDN Reference for quote

It seems like in general this error is browser limitations around dataUrls and therefore not really a bug for this project.

I do agree the error message could be more clear though. I'm sure we could add a message when img.onerror here to say "There may be a browser limitation or data issue encountered when creating an img element needed to render the result."

[dv0open]

In case someone else has the same problem as I: For me, this error appeared, when I had an <img> with an empty src attribute (src=''). Removing the image (or adding a valid src) solved the problem.