joaomoreno / gifcap

Capture your screen to a GIF in your browser
https://gifcap.dev
GNU General Public License v3.0
1.33k stars 95 forks source link

OOM - white screen and exception when stopping recording #58

Open Tyriar opened 3 years ago

Tyriar commented 3 years ago

This was on a gif that I tried to record after accidentally leaving it recording for 5 minutes. Reloading/closing+reopening the tab doesn't fix the problem.

Screen Shot 2021-06-22 at 6 44 51 AM Screen Shot 2021-06-22 at 6 47 35 AM
main.js:1 Uncaught RangeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': Out of memory at ImageData creation
    at Worker.u.onmessage (main.js:1)
main.js:1 TypeError: Cannot read property 'timestamp' of undefined
    at new Gt (main.js:1)
    at b (main.js:1)
    at C (main.js:1)
    at d (main.js:1)
    at L (main.js:1)
    at R (main.js:1)
    at q (main.js:1)
    at L (main.js:1)
    at R (main.js:1)
    at q (main.js:1)
Screen Shot 2021-06-22 at 6 43 53 AM
Tyriar commented 3 years ago

Closing and reopening Edge freed the memory and I can use gifcap again

joaomoreno commented 3 years ago

Unsure of what we could do here. Should we have a soft limit on the memory? Is there anyway I can figure out we're getting close to OOM? An event on OOM would be too late.

Also, reloading don't work I'm guessing cause they reuse the same engine/scope.

Tyriar commented 3 years ago

Any idea why the memory wasn't getting freed? At the least you should catch getImageData and show the error in the UI

joaomoreno commented 3 years ago

Well, 5 minutes of recording. That's a lot of memory. I'm guessing it hit OOM and then just hangs in there.

I'm guessing OOM errors could surface from all over the place, so wrapping around getImageData wouldn't be suficient. 🤔

Tyriar commented 3 years ago

I mean if we can't free the memory, a message on screen would be better than needing to dig through devtools.

nrayburn-tech commented 2 years ago

What about something like this during recording?

  1. Catch the RangeError on getImageData.
  2. Trim back some frames to regain some memory for the apps playback process.
  3. Stop the recording, with a message above it that the browser ran out of memory and had to stop early.

If the memory error is caught during recording, it is unlikely to occur again during trimming/cropping unless the user has other memory changes on their system. Those changes are outside of the application's control though and I am not sure if they should try to be accounted for.