Editor crashes if there's a shader error

[JasonGoemaat]

p5.js version

v1.7.0

What is your operating system?

Windows

Web browser and version

Chrome -114.0.5735.199

Actual Behavior

An error in javascript or a shader causes a crash to an empty white page with this in the console:

Uncaught TypeError: Failed to execute 'useProgram' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLProgram'

Expected Behavior

An error in the console which is visible on the page.

Steps to reproduce

Steps:

1. Create new project
2. Add this to draw() or anything that will cause an error like using an integer like 1 instead of 1.0 in a shader: throw new Error("Test");
3. Hit the play button

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[wong-justin]

I'm getting lots of page crashes too. Minimal example, no shaders: https://editor.p5js.org/jwong/sketches/SaB4RgMl4

And this seems to have started happening since yesterday's editor release.

The error message from Firefox:

Uncaught (in promise) ReferenceError: createCanvass is not defined
    setup blob:https://preview.p5js.org/933f90c8-cd91-4f7e-9876-29ac357c404d:2
    _setup https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js:61891
    _runIfPreloadsAreDone https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js:61842
    _decrementPreload https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js:61853
    t https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/addons/p5.sound.min.js:2
    promise callback* https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/addons/p5.sound.min.js:2
    p5 https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js:62069
    p5 https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js:62067
    _globalInit https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js:61102
    promise callback*[293]< https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js:61119
    o https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js:40
    o https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js:42
    [279]< https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js:53021
    o https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js:40
    r https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js:47
    <anonymous> https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js:51
    <anonymous> https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js:18
    <anonymous> https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js:20
933f90c8-cd91-4f7e-9876-29ac357c404d:2:3

TypeError: e.data[0] is undefined
    value Editor.jsx:273
    value Editor.jsx:269
    React 11
    Redux 5
    UU useHandleMessageEvent.js:31
    40350 dispatcher.js:27
    40350 dispatcher.js:69
    i Babel
    <anonymous> make namespace object:4
    <anonymous> make namespace object:4
react-dom.production.min.js:196:59

Uncaught TypeError: e.data[0] is undefined
    value Editor.jsx:273
    value Editor.jsx:269
    React 11
    Redux 5
    UU useHandleMessageEvent.js:31
    40350 dispatcher.js:27
    40350 dispatcher.js:69
    i Babel
    <anonymous> make namespace object:4
    <anonymous> make namespace object:4
Editor.jsx:273:31

Screenshot of error from a Chrome-based browser:

And just noticed #2296 , same issue

[wong-justin]

Here's some more logs from the error:

consoleEvents:
[
  {
    "method": "error",
    "data": [],
    "id": "1689445824835"
  },
  {
    "method": "log",
    "id": "d50aa29a-d7d5-0e4d-93e5-f203-1689445824617",
    "data": [
      "\n🌸 p5.js says: [sketch.js, line 2] It seems that you may have accidentally written \"createCanvs\" instead of \"createCanvas\". Please correct it to createCanvas if you wish to use the function from p5.js. (http://p5js.org/reference/#/p5/createCanvas)"
    ]
  }
]

In my testing, changing Editor.jsx line 270 from checking consoleEvent.method === 'error' to consoleEvent.method == 'error' && consoleEvent.data.length > 0 seems to solve the issue. Not sure if that breaks other functionality.

This might be caused by changes to the friendly error system that were pushed as part of the latest release over at the p5.js repo - maybe they changed the error objects? Not sure, just a guess.

Using 1.6.0 libraries in the sketch didn't resolve the error

[lindapaiste]

Thanks everyone for reporting this! I am looking into it now. The error is thrown from Editor line 273:

p5.js-web-editor/client/modules/IDE/components/Editor.jsx

Line 273 in 4161f98

const errorObj = { stack: consoleEvent.data[0].toString() };

We did not change this line. But somehow the consoleEvent.data[0] variable is undefined whereas it was defined before.

I suspect this is related to bumping the version of the console-feed package. But I'll dig in further and see why the data structures changed.

Somehow the error is coming through as two separate console events when it should be one. The first has method: "error" and no data, which causes the crash. The data that we are expecting is attached to a second message with method: "log".

[wong-justin]

Downgrading console-feed package to 3.2.0 seems to fix it. The event.data is populated again.

[lindapaiste]

@wong-justin Yeah I think that's going to be the best solution. You can put in a PR with the downgrade, if you want to.

Pinging @raclim -- this seems pretty serious. Can we put out a new release quickly?

Something changed in console-feed's Decode function and it's causing the data to get stripped out when the event is decoded.

p5.js-web-editor/client/modules/IDE/hooks/useHandleMessageEvent.js

Line 12 in 4161f98

const decodedMessages = messages.map((message) => Decode(message.log));

This is the messages before calling Decode:

[
    {
        "log": [
            {
                "method": "error",
                "data": [
                    "ReferenceError: createCanvass is not defined\n    at setup (/sketch.js:2:3)\n    at _setup (https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js:60991:25)\n    at _runIfPreloadsAreDone (https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js:60942:27)\n    at p5._decrementPreload (https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js:60953:25)\n    at p5.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js:2:98292)"
                ],
                "id": "1689457082735"
            }
        ]
    }
]

and this is the decodedMessages:

[
    {
        "method": "error",
        "data": [],
        "id": "1689457082735"
    }
]

This is the change on their end which is causing problems for us:

Sometimes we do have that __console_feed_remaining__0 at the end of the data array and Decode is doing what's intended by dropping it. Other times we don't have that additional entry and the .pop() is causing the actual data to get dropped.

I'm not sure at this point why we do have it on the p5 friendly error and not on the runtime error. So that's something I can look into. I can also put in a PR to console-feed to add additional checks before dropping entries from data. But definitely the quickest fix is to downgrade to a version that works.

[raclim]

Thanks so much @JasonGoemaat @wong-justin @lindapaiste for working together to resolve this! I'm really sorry that this happened due to my major oversight in upgrading the console-feed package 😭

I just pushed out a new release with the changes, and tweaked @wong-justin's PR afterwards to include the updates to the lockfile as well. It seems to be working for me for now, but please let me know if this persists. Sorry again about this!