Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Multiple unhandled/uncaught promise errors in console #1502

Closed
mlev opened this issue Apr 12, 2018 · 3 comments
Closed

Multiple unhandled/uncaught promise errors in console #1502

mlev opened this issue Apr 12, 2018 · 3 comments

Comments

@mlev
Copy link

mlev commented Apr 12, 2018

Bug reports:

Latest version produces multiple unhandled errors in the console - even though canvas appear to render correctly.

This can be reproduced on the demo site (https://html2canvas.hertzen.com/).

Tested on Chrome and Safari - both with the same result.
screen shot 2018-04-12 at 11 39 14 am
screen shot 2018-04-12 at 11 46 12 am

Specifications:

  • html2canvas version tested with:
  • Browser & version: Chrome 65, Safari 11.1
  • Operating system: Mac High Sierra
@tarjeieo
Copy link

I see the same in both Chrome and Internet Explorer, on a Windows 10 PC.

@tarjeieo tarjeieo mentioned this issue Apr 16, 2018
Closed
@earshinov
Copy link
Contributor

earshinov commented Feb 22, 2019 •
edited
Loading

We experience this, too, which is very annoying, particularly because we have Sentry enabled and each unhandled promise rejection results in an error notification.

For us, the issue seems to be caused by hidden (zero-sized) frames present on the page. In html2canvas, rendering these frames results in canvas.toDataUrl() returning data:, (see StackOverflow question). When put into ImageElement.src, such data URL causes an onerror event, which html2canvas ties to the reject Promise callback here:

html2canvas/src/Clone.js

Line 216 in 41eb8ab

iframeCanvas.onerror = reject;

I have prepared a demo page. Unfortunately, due to browser's same-origin policy and additional restrictions set up on JSFiddle, you have to store this page somewhere and have it served by a web server (python -m http.server will suffice):

index.html:

<!DOCTYPE html>
<script src="http://unpkg.com/[email protected]/dist/html2canvas.js"></script>
<iframe src="/" style="display: none;" width="0" height="0"></iframe>
<button onclick="run()">Call html2canvas</button>
<script src="script.js"></script>

script.js:

(function() {
  function setup() {
    window.addEventListener('unhandledrejection', event => {
    	alert('Unhandled rejection');
    	console.error('Unhandled Promise rejection', event);
    }, false);

    const _Promise = window.Promise;
    const Promise = function(_cb) {
      if (new.target) {
        return new _Promise(function(resolve, _reject) {
          function reject(value) {
            debugger;
            console.error("Rejecting a Promise with value", value);
            return _reject(value);
          };
          return _cb(resolve, reject);
        });
      }
      return _Promise.apply(this, arguments);
    }
    // copy members
    for (const prop of Object.getOwnPropertyNames(_Promise))
      Object.defineProperty(Promise, prop, Object.getOwnPropertyDescriptor(_Promise, prop));
    window.Promise = Promise;
  }

  function run() {
  	html2canvas(document.body, {
      width: window.innerWidth,
    	height: window.innerHeight,
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight,
    }).then(canvas => {
    	const img = document.createElement('img');
      img.src = canvas.toDataURL();
      document.body.appendChild(img);
    });
  }

  setup();

  window.run = run;
})();

image

To me, ignoring onerror in case of an empty data URL inside html2canvas seems a feasible solution:

Clone.js:

//iframeCanvas.onerror = reject;
iframeCanvas.onerror = function (event) {
    // Empty iframes may result in empty "data:," URLs, which are invalid from the <img>'s point of view
    // and instead of `onload` cause `onerror` and unhandled rejection warnings
    iframeCanvas.src == 'data:,' ? resolve(canvas) : reject(event);
};

earshinov pushed a commit to earshinov/html2canvas that referenced this issue Feb 24, 2019
Prevent unhandled promise rejections for hidden frames
07091e1 
niklasvh#1502
@earshinov earshinov mentioned this issue Feb 24, 2019
Merged
@niklasvh
Copy link
Owner

niklasvh commented Apr 7, 2019

Fixed in #1762

@niklasvh niklasvh closed this as completed Apr 7, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@earshinov @niklasvh @tarjeieo @mlev