Unhandled error when trying to print not fully loaded canvas elements about react-to-print HOT 5 CLOSED

Hey, thanks for reporting in! Since the error is "uncaught" that indicates nothing is handling/catching it, which is definitely not great! We have a canvas as part of our examples and that seems to work, but it's very possible we need to do more to ensure everything has loaded.

Would it be possible for you to share a reproducible example on Codesandbox or some other tool so that I can debug this properly?

from react-to-print.

@MatthewHerbst Looks like it has something to do with delayed/asynchronous loading of canvases: https://codesandbox.io/p/sandbox/react-to-print-uncaught-error-83fksn

from react-to-print.

Thanks for the link! Will look to get a fix in this weekend!

from react-to-print.

Finally got a chance to play with this more. Seems that you resolve the onBeforeGetContent promise before the setState in LineChart completes. You're also not waiting for the setLoadCharts call to complete. Regardless, the reason this crashes with canvas elements in particular is that we have to do some special handling of canvas elements. Unlike all other elements, instead of loading the canvas elements from our internal clone of the content, we instead read them directly off the content. This is because cloneNode doesn't properly copy canvas elements which is explicitly called out.

Anyways, you can easily solve this in your code by properly waiting for the setLoadCharts call and ensuring the LineChart state effects have actually happened (or, just remove the useEffect+useState and render them directly...)

I will be adding a check in with a log message that will ensure we don't hard crash here, and will hopefully help folks determine the issue faster.

Thanks again for reporting this, very interesting and got me into the weeds on some core HTML functions (cloneNode vs importNode)

from react-to-print.

Here is a forked version of your sandbox showing how to do it: https://codesandbox.io/p/sandbox/react-to-print-uncaught-error-forked-7l7rpk?file=%2Fsrc%2FApp.tsx%3A11%2C11

from react-to-print.