Handle a few types of errors

Show friendly messages for a few reference, syntax and type errors

Author: akshay-99

src/core/friendly_errors/browser_errors.js

@@ -16,6 +16,40 @@ const strings = {
       type: 'NOTDEFINED',
       browser: 'Safari'
     }
+  ],
+  SyntaxError: [
+    {
+      msg: 'illegal character',
+      type: 'INVALIDTOKEN',
+      browser: 'Firefox'
+    },
+    {
+      msg: 'Invalid character',
+      type: 'INVALIDTOKEN',
+      browser: 'Safari'
+    },
+    {
+      msg: 'Invalid or unexpected token',
+      type: 'INVALIDTOKEN',
+      browser: 'Chrome'
+    },
+    {
+      msg: "Unexpected token '{{.}}'",
+      type: 'UNEXPECTEDTOKEN',
+      browser: 'Chrome'
+    },
+    {
+      msg: "expected {{.}}, got '{{.}}'",
+      type: 'UNEXPECTEDTOKEN',
+      browser: 'Chrome'
+    }
+  ],
+  TypeError: [
+    {
+      msg: '{{.}} is not a function',
+      type: 'NOTFUNC',
+      browser: 'all'
+    }
   ]
 };
 

src/core/friendly_errors/fes_core.js

@@ -155,8 +155,11 @@ if (typeof IS_MINIFIED !== 'undefined') {
       // Type to color
       color = typeColors[color];
     }
-    if (func.substring(0, 4) === 'load') {
-      console.log(translator('fes.pre', { message }));
+
+    let prefixedMsg;
+    let style = [`color: ${color}`, 'font-family: Arial', 'font-size: larger'];
+    if (func == null || func.substring(0, 4) === 'load') {
+      prefixedMsg = translator('fes.pre', { message });
     } else {
       const methodParts = func.split('.');
       const referenceSection =
@@ -165,12 +168,11 @@ if (typeof IS_MINIFIED !== 'undefined') {
       const funcName =
         methodParts.length === 1 ? func : methodParts.slice(2).join('/');
 
-      console.log(
-        translator('fes.pre', {
-          message: `${message} (http://p5js.org/reference/#/${referenceSection}/${funcName})`
-        })
-      );
+      prefixedMsg = translator('fes.pre', {
+        message: `${message} (http://p5js.org/reference/#/${referenceSection}/${funcName})`
+      });
     }
+    console.log('%c' + prefixedMsg, style.join(';'));
   };
   /**
    * This is a generic method that can be called from anywhere in the p5
@@ -306,7 +308,7 @@ if (typeof IS_MINIFIED !== 'undefined') {
       }
     });
 
-    if (min > EDIT_DIST_THRESHOLD) return;
+    if (min > Math.min(EDIT_DIST_THRESHOLD, errSym.length)) return false;
 
     let symbol = misusedAtTopLevelCode[minIndex];
 
@@ -441,37 +443,152 @@ if (typeof IS_MINIFIED !== 'undefined') {
     if (!error) return;
     const log = p5._fesLogger;
 
-    // Syntax Errors have no stacktrace attached to them, must be handled separately
-    // TODO
-    if (error.name === 'SyntaxError') return;
-
     let stacktrace = p5._getErrorStackParser().parse(error);
     let [isInternal, friendlyStack] = processStack(error, stacktrace);
-    if (isInternal || !friendlyStack) return;
-    printFriendlyStack(friendlyStack);
+    if (isInternal) {
+      if (friendlyStack) printFriendlyStack(friendlyStack);
+      return;
+    }
+
+    const errList = errorTable[error.name];
+    if (!errList) return; // this type of error can't be handled yet
+    let matchedError;
+    for (const obj of errList) {
+      let string = obj.msg;
+      // capture the primary symbol mentioned in the error
+      string = string.replace(new RegExp('{{}}', 'g'), '([a-zA-Z0-9_]+)');
+      string = string.replace(new RegExp('{{.}}', 'g'), '(.+)');
+      string = string.replace(new RegExp('{}', 'g'), '(?:[a-zA-Z0-9_]+)');
+      let matched = error.message.match(string);
+
+      if (matched) {
+        matchedError = Object.assign({}, obj);
+        matchedError.match = matched;
+        break;
+      }
+    }
+
+    if (!matchedError) return;
+
     switch (error.name) {
+      case 'SyntaxError': {
+        switch (matchedError.type) {
+          case 'INVALIDTOKEN': {
+            let url =
+              'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Illegal_character#What_went_wrong';
+            p5._friendlyError(
+              translator('fes.globalErrors.syntax.invalidToken', {
+                url
+              })
+            );
+            break;
+          }
+          case 'UNEXPECTEDTOKEN': {
+            let url =
+              'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Unexpected_token#What_went_wrong';
+            p5._friendlyError(
+              translator('fes.globalErrors.syntax.unexpectedToken', {
+                url
+              })
+            );
+            break;
+          }
+        }
+        break;
+      }
       case 'ReferenceError': {
-        const errList = errorTable.ReferenceError;
-        for (const obj of errList) {
-          let string = obj.msg;
-          // capture the primary symbol mentioned in the error
-          string = string.replace('{{}}', '([a-zA-Z0-9_]+)');
-          string = string.replace('{}', '(?:[a-zA-Z0-9_]+)');
-          let matched = error.message.match(string);
-          if (matched && matched[1]) {
-            switch (obj.type) {
-              case 'NOTDEFINED':
-                handleMisspelling(
-                  matched[1],
-                  error,
-                  typeof log === 'function' ? log : undefined
-                );
-                break;
+        switch (matchedError.type) {
+          case 'NOTDEFINED': {
+            let errSym = matchedError.match[1];
+
+            if (
+              errSym &&
+              handleMisspelling(
+                errSym,
+                error,
+                typeof log === 'function' ? log : undefined
+              )
+            ) {
+              break;
+            }
+
+            // if the flow gets this far, this is likely not a misspelling
+            // of a p5 property/function
+            let url1 = 'https://p5js.org/examples/data-variable-scope.html';
+            let url2 =
+              'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_Defined#What_went_wrong';
+            let location;
+            if (
+              stacktrace[0].fileName &&
+              stacktrace[0].lineNumber &&
+              stacktrace[0].columnNumber
+            ) {
+              location = `${stacktrace[0].fileName}:${
+                stacktrace[0].lineNumber
+              }:${stacktrace[0].columnNumber}`;
             }
+            p5._friendlyError(
+              translator('fes.globalErrors.reference.notDefined', {
+                url1,
+                url2,
+                symbol: errSym,
+                location: location
+                  ? translator('fes.location', {
+                      location
+                    })
+                  : ''
+              })
+            );
+
+            if (friendlyStack) printFriendlyStack(friendlyStack);
+
+            break;
           }
         }
         break;
       }
+
+      case 'TypeError': {
+        switch (matchedError.type) {
+          case 'NOTFUNC': {
+            let errSym = matchedError.match[1];
+            let splitSym = errSym.split('.');
+            let location;
+            let url =
+              'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_a_function#What_went_wrong';
+            if (
+              stacktrace[0].fileName &&
+              stacktrace[0].lineNumber &&
+              stacktrace[0].columnNumber
+            ) {
+              location = `${stacktrace[0].fileName}:${
+                stacktrace[0].lineNumber
+              }:${stacktrace[0].columnNumber}`;
+            }
+            console.log(splitSym, matchedError);
+            let translationObj = {
+              url,
+              symbol: splitSym[splitSym.length - 1],
+              obj: splitSym.slice(0, splitSym.length - 1).join('.'),
+              location: location
+                ? translator('fes.location', {
+                    location
+                  })
+                : ''
+            };
+
+            if (splitSym.length > 1) {
+              p5._friendlyError(
+                translator('fes.globalErrors.type.notfuncObj', translationObj)
+              );
+            } else {
+              p5._friendlyError(
+                translator('fes.globalErrors.type.notfunc', translationObj)
+              );
+            }
+          }
+        }
+      }
     }
   };
 

translations/en/translation.json

@@ -22,8 +22,19 @@
     },
     "globalErrors": {
       "libraryError": "An error with message \"{{error}}\" was thrown inside the p5js library when you called {{func}} {{location}}\nIf not stated otherwise, it is likely an issue with the arguments passed to {{func}}.",
+      "reference": {
+        "notDefined": "There's an error due to \"{{symbol}}\" not being defined in the current scope {{location}}.\n\nIf you had defined it in your code, check its scope, spelling, and letter-casing (JavaScript is case-sensitive). For more:\n{{url1}}\n{{url2}}"
+      },
       "stackSubseq": "▶️ Called from line {{line}} in function {{func}} in {{file}} ({{location}})\n\n",
-      "stackTop": "▶️ Error at line {{line}} in function {{func}} in {{file}} ({{location}})\n\n"
+      "stackTop": "▶️ Error at line {{line}} in function {{func}} in {{file}} ({{location}})\n\n",
+      "syntax": {
+        "invalidToken": "There's a syntax error due to a symbol that JavaScript doesn't recognize or didn't expect at it's place.\nUsually this can when copying code from some other place. For example \" is supported but “ isn't.\nFor more: {{url}}",
+        "unexpectedToken": "There's a syntax error due to a symbol that wasn't expected at it's place.\nUsually this is due to a typo. Check the line number in the error below for anything missing/extra.\nFor more: {{url}}"
+      },
+      "type": {
+        "notfunc": "There's an error as \"{{symbol}}\" could not be called as a function {{location}}.\nCheck the spelling, letter-casing (Javacript is case-sensitive) and its type.\nFor more: {{url}}",
+        "notfuncObj": "There's an error as \"{{symbol}}\" could not be called as a function {{location}}.\nVerify whether \"{{obj}}\" has \"{{symbol}}\" in it and check the spelling, letter-casing (Javacript is case-sensitive) and its type.\nFor more: {{url}}"
+      }
     },
     "location": "(at {{location}})",
     "misspelling": "It seems that you may have accidently written {{name}} instead of {{actualName}} {{location}}.\n\nPlease correct it to {{actualName}} if you wish to use the {{type}} from p5.js",

translations/es/translation.json

@@ -22,8 +22,19 @@
     },
     "globalErrors": {
       "libraryError": "",
+      "reference": {
+        "notDefined": ""
+      },
       "stackSubseq": "",
-      "stackTop": ""
+      "stackTop": "",
+      "syntax": {
+        "invalidToken": "",
+        "unexpectedToken": ""
+      },
+      "type": {
+        "notfunc": "",
+        "notfuncObj": ""
+      }
     },
     "location": "",
     "misspelling": "",