Stop future errors when encountering an async error

Author: davepagurek

src/core/friendly_errors/fes_core.js

@@ -40,6 +40,10 @@ function fesCore(p5, fn){
   // to enable or disable styling (color, font-size, etc. ) for fes messages
   const ENABLE_FES_STYLING = false;
 
+  // Used for internally thrown errors that should not get wrapped by another
+  // friendly error handler
+  class FESError extends Error {};
+
   if (typeof IS_MINIFIED !== 'undefined') {
     p5._friendlyError =
       p5._checkForUserDefinedFunctions =
@@ -192,6 +196,26 @@ function fesCore(p5, fn){
         log(prefixedMsg);
       }
     };
+
+    /**
+     * Throws an error with helpful p5 context. Similar to _report, but
+     * this will stop other code execution to prevent downstream errors
+     * from being logged.
+     *
+     * @method _error
+     * @private
+     * @param                    context  p5 instance the error is from
+     * @param  {String}          message  Message to be printed
+     * @param  {String}          [func]   Name of function
+     */
+    p5._error = (context, message, func) => {
+      p5._report(message, func);
+      context.hitCriticalError = true;
+      // Throw an error to stop the current function (e.g. setup or draw) from
+      // running more code
+      throw new FESError('Stopping sketch to prevent more errors');
+    };
+
     /**
      * This is a generic method that can be called from anywhere in the p5
      * library to alert users to a common error.
@@ -274,6 +298,19 @@ function fesCore(p5, fn){
       return cur[l2];
     };
 
+    /**
+     * Whether or not p5.js is running in an environment where `preload` will be
+     * run before `setup`.
+     *
+     * This will return false for default builds >= 2.0, but backwards compatibility
+     * addons may set this to true.
+     *
+     * @private
+     */
+    p5.isPreloadSupported = function() {
+      return false;
+    }
+
     /**
      * Checks capitalization for user defined functions.
      *
@@ -294,8 +331,8 @@ function fesCore(p5, fn){
       context = instanceMode ? context : window;
       const fnNames = entryPoints;
 
-      if (context.preload) {
-        p5._friendlyError(translator('fes.preloadDisabled'), 'preload');
+      if (context.preload && !p5.isPreloadSupported()) {
+        p5._error(context, translator('fes.preloadDisabled'));
       }
 
       const fxns = {};
@@ -633,6 +670,10 @@ function fesCore(p5, fn){
      */
     const fesErrorMonitor = e => {
       if (p5.disableFriendlyErrors) return;
+
+      // Don't try to handle an error intentionally emitted by FES to halt execution
+      if (e && (e instanceof FESError || e.reason instanceof FESError)) return;
+
       // Try to get the error object from e
       let error;
       if (e instanceof Error) {

src/core/friendly_errors/param_validator.js

@@ -354,6 +354,7 @@ function validateParams(p5, fn, lifecycles) {
    */
   fn.friendlyParamError = function (zodErrorObj, func, args) {
     let message = '🌸 p5.js says: ';
+    let isVersionError = false;
     // The `zodErrorObj` might contain multiple errors of equal importance
     // (after scoring the schema closeness in `findClosestSchema`). Here, we
     // always print the first error so that user can work through the errors
@@ -401,6 +402,7 @@ function validateParams(p5, fn, lifecycles) {
         if (error.path?.length > 0 && args[error.path[0]] instanceof Promise)  {
           message += 'Did you mean to put `await` before a loading function? ' +
             'An unexpected Promise was found. ';
+          isVersionError = true;
         }
 
         const expectedTypesStr = Array.from(expectedTypes).join(' or ');
@@ -455,7 +457,11 @@ function validateParams(p5, fn, lifecycles) {
       message += ` For more information, see ${documentationLink}.`;
     }
 
-    console.log(message);
+    if (isVersionError) {
+      p5._error(this, message);
+    } else {
+      console.log(message);
+    }
     return message;
   }
 

src/core/main.js

@@ -51,6 +51,7 @@ class p5 {
     // PRIVATE p5 PROPERTIES AND METHODS
     //////////////////////////////////////////////
 
+    this.hitCriticalError = false;
     this._setupDone = false;
     this._userNode = node;
     this._curElement = null;
@@ -124,6 +125,9 @@ class p5 {
     // assume "global" mode and make everything global (i.e. on the window)
     if (!sketch) {
       this._isGlobal = true;
+      if (window.hitCriticalError) {
+        return;
+      }
       p5.instance = this;
 
       // Loop through methods on the prototype and attach them to the window
@@ -199,6 +203,7 @@ class p5 {
   }
 
   async #_start() {
+    if (this.hitCriticalError) return;
     // Find node if id given
     if (this._userNode) {
       if (typeof this._userNode === 'string') {
@@ -207,6 +212,7 @@ class p5 {
     }
 
     await this.#_setup();
+    if (this.hitCriticalError) return;
     if (!this._recording) {
       this._draw();
     }
@@ -215,6 +221,7 @@ class p5 {
   async #_setup() {
     // Run `presetup` hooks
     await this._runLifecycleHook('presetup');
+    if (this.hitCriticalError) return;
 
     // Always create a default canvas.
     // Later on if the user calls createCanvas, this default one
@@ -232,6 +239,7 @@ class p5 {
     if (typeof context.setup === 'function') {
       await context.setup();
     }
+    if (this.hitCriticalError) return;
 
     // unhide any hidden canvases that were created
     const canvases = document.getElementsByTagName('canvas');
@@ -268,6 +276,7 @@ class p5 {
   // current frame finish awaiting. The same goes for lifecycle hooks 'predraw'
   // and 'postdraw'.
   async _draw(requestAnimationFrameTimestamp) {
+    if (this.hitCriticalError) return;
     const now = requestAnimationFrameTimestamp || window.performance.now();
     const timeSinceLastFrame = now - this._lastTargetFrameTime;
     const targetTimeBetweenFrames = 1000 / this._targetFrameRate;