processing / processing/p5.js

loadImage with GIFs that can't be parsed throws an error that breaks the sketch

Open
#8,021 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area:Image Bug
Dominant language
JavaScript
Stars
24k
Forks
3.8k
Avg merge
3d 16h
Merged PRs (30d)
25

Description

Most appropriate sub-area of p5.js?
  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • p5.strands
  • WebGL
  • DevOps, Build process, Unit testing
  • Internationalization (i18n)
  • Friendly Errors
  • Other (specify if possible)
p5.js version

1.11.8

Web browser and version

Firefox 141.0, Chromium 139.0.7258.66

Operating system

Linux, macOS

Steps to reproduce this
Steps:

When using loadImage, GIFs that can't be parsed by omggif throw an unhandleable exception that breaks further execution of the sketch.

Here's a sketch demonstrating the issue: https://editor.p5js.org/alexpls/sketches/81k-Dpv1-

I would expect that exceptions thrown while parsing the GIF would instead result in the failureCallback of loadImage to be called with their details.

I'd approach a fix for this by wrapping new omggif.GifReader(arrayBuffer); here with a try/catch, and handling the error gracefully by calling failureCallback(e).

If this sounds reasonable let me know, and I'd be happy to contribute a patch!

Snippet:

The sketch above reproduces the issue reliably.

let img

function preload() {
  img = loadImage(
    'img.gif', // make sure this is a gif that omggif doesn't like
    _ => console.log('success!'),
    // i'd expect the below to be called instead of an error being raised.
    // worth noting that even if we wrap this call to loadImage within a try/catch
    // it still won't catch the error - likely due to the error originating
    // from a promise context
    err => console.error('error with proper handling', err)
  )
}

function setup() {
  console.log('we never reach here')
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

Thanks for your work on p5.js!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the failure with the linked p5.js sketch, then inspect src/image/loading_displaying.js around the new omggif.GifReader call at line 649. Verify that an unparseable GIF reaches loadImage's failureCallback with the error details and that the sketch continues instead of breaking.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.