html-to-image icon indicating copy to clipboard operation
html-to-image copied to clipboard

Published 20 hours ago • verified publisher icon bubkoo

Error with no details

Open TannerS opened this issue 2 years ago • 7 comments

We have an error when rendering body but gives no details

Expected Behavior

To work

Current Behavior

Error provided

oops, something went wrong! 
error { target: img.profile-image--small.global-profile__user-photo.u96607, isTrusted: true, srcElement: img.profile-image--small.global-profile__user-photo.u96607, currentTarget: img.profile-image--small.global-profile__user-photo.u96607, eventPhase: 2, bubbles: false, cancelable: false, returnValue: true, defaultPrevented: false, composed: false, … }
react_devtools_backend.js:4026:25

TannerS avatar Sep 08 '22 22:09 TannerS

👋 @TannerS

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

biiibooo[bot] avatar Sep 08 '22 22:09 biiibooo[bot]

I had the exact same issue and turns out that IF there is a broken image within the DOM that you are using it will break. I do agree there should be better error handling.

anasyo10 avatar Oct 11 '22 12:10 anasyo10

I have got the same. If there is an image in the area to "screenshot" that does not load for any reason, an error is thrown.

0m4r avatar Dec 15 '22 21:12 0m4r

@anasyo10 This comment saved me from a huge headache. Cheers!

davidsainez avatar Mar 30 '23 02:03 davidsainez

I'm trying to screenshot an iframe's content and I'm getting this issue, but I've tried removing all the images and it still doesn't work. It's very hard to debug without a proper error message

DannyJJK avatar Sep 08 '23 13:09 DannyJJK

I've managed to work this around by setting imagePlaceholder of broken-image.

const BROKEN_IMAGE_PLACEHOLDER =
  'data:image/gif;base64,R0lGODlhGQAZAPQAAISChKWipcbT7+fr/8bf51KuOdbf93vDc87b9/f3997n/2u2Y9bf/5SSlJzHtcbT9////+/z/1KyOdbj94zHjNbb9/f3/2u6Y9bj/5yenLXP1sbX9wAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+ICAgPD94cGFja2V0IGVuZD0idyI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACwAAAAAGQAZAAAF/2DgWGRpmlkTaIkFvWIkzzSdZY42JS8UBIqJcEicKBSZAGSSIfB8AaHBMBlYB5OpMAlJaAhOyy+LKLsgljKCyn1pMruxATGI9CARxZqZ0fgDKg5yCHZ3EAN7KQ2LjA1JVWeGiGVCV1aAjwOGPZN0dTNijlFzaqWlWlQKA5hRCBuvsLGnWgqsEwgCsLmxurAIE7a4rwLEucW7u78EGmO4x8/QAr8uj87PfhrRCmfV0djRmi/dxA4OC+foF34CE4bjAuUFBRL05zkICj0JCd0a5vQAAx4wZEuAPwoLAgYs18NCBFsEHBxQqPDJCyyAfiw7kJCiBAcE9H0BpiJARI8AQyL2IKCOZIAMFCZ6dLDvRYKYEig4SPHywAWUGu4kAHiAwqIQADs=';

const screenshotBase64Uri = await toPng(document.body, {
    cacheBust: true,
    imagePlaceholder: BROKEN_IMAGE_PLACEHOLDER
    });

liranfarage89 avatar Sep 20 '23 13:09 liranfarage89

I see that the issue is because we are trying to access the images without proper request mode. For e.g. accessing this url for an image https://www.w3schools.com/howto/img_avatar.png with no-cors but there are no proper Access-* field in response header. This is leading to status code 0 and empty response. Please add the handling for the status code 0 also in the fetchAsDataURL function.

image

reshmasalim avatar Jun 05 '24 12:06 reshmasalim