search

bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.69k stars 531 forks source link

Error with no details #314

Open TannerS opened 2 years ago

TannerS commented 2 years ago

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
vivcat[bot] commented 2 years ago

👋 @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.

anasyo10 commented 1 year ago

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.

0m4r commented 1 year ago

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.

davidsainez commented 1 year ago

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

DannyJJK commented 1 year ago

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

liranfarage89 commented 1 year ago

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
    });
reshmasalim commented 4 months ago

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