html-to-image get stuck randomnly while in a loop

Question

Current Behavior:

I'm using html-to-image to generate images of the data tables in the loop (Let's say I've got 300 tables I need to make a screenshot of). The issue is sometimes it gets stuck without getting into then() or catch(). I couldn't find any pattern when it's happening. When it gets stuck once, I wiped the data, and in another run, it got stuck at the other table. Sometimes It happens that the whole 300 will run without a stuck, but sometimes it got frozen even at the beginning.

Steps To Reproduce:

This is the code. When it gets stuck, the last thing in the console is 'generate stats'.

async generateImage() {
    await new Promise(async resolve => {
        var node: any = document.getElementById('image-section');
        console.log('generate stats');

        await htmlToImage.toBlob(node).then((dataUrl) => {
            console.log('stats generated');
            // ...
        }).catch(() => {
            console.log('stats not generated');
        });
    }
}

Additional info:

It happens no matter the image size (I was console.loging size of the area before running generation). If the image would be too big (or got too many elements), then it's going to the catch(). But why does it get stuck? Seems completely random.

Environment:

npm: 8.15.0
angular/cdk: 14.2.3
html-to-image: 1.11.11 (but I've had this issue on 1.10.8 too)
OS: Windows 10
Browser: Brave 1.48.158, chromium: 110.0.5481.77 64-bit

Any ideas on how can I debug further or what could be the issue here?

score 0 · Answer 1 · answered Feb 14 '23 at 19:58

For now I used such workaround:

async generateImage() {
    await new Promise(async resolve => {
        var node: any = document.getElementById('image-section');
        console.log('generate stats');
        
        // Async timer, running the function again on stuck:
        new Promise( r => setTimeout(r, 25000) ).then(() => {
            return this.generateImage();
        });

        await htmlToImage.toBlob(node).then((dataUrl) => {
            console.log('stats generated');
            // ...
        }).catch(() => {
            console.log('stats not generated');
        });
    }
}

But still, I would like to solve this properly...

html-to-image get stuck randomnly while in a loop

1 Answers1