Generalize fesErrorMonitor a bit and change messages

processing · Jun 19, 2020 · 7d68b0f · 7d68b0f
1 parent 0c61372
commit 7d68b0f
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 41 deletions.
diff --git a/src/core/friendly_errors/browser_errors.js b/src/core/friendly_errors/browser_errors.js
@@ -0,0 1,15 @@
 // Browsers use error strings to build their error messages. These can be
 // different across different browsers. We can build a list of these strings
 // so that the FES is able to extract the required info from the errors given
 // by the browser
 const strings = {
  ReferenceError: [
  {
  msg: '{{}} is not defined',
  type: 'NOTDEFINED',
  browser: 'all'
  }
  ]
 };
 
 export default strings;
diff --git a/src/core/friendly_errors/fes_core.js b/src/core/friendly_errors/fes_core.js
@@ -55,6 55,8 @@ if (typeof IS_MINIFIED !== 'undefined') {
 } else {
  let doFriendlyWelcome = false; // TEMP until we get it all working LM
 
  const errorTable = require('./browser_errors').default;
 
  // -- Borrowed from jQuery 1.11.3 --
  const class2type = {};
  const toString = class2type.toString;
@@ -217,55 219,62 @@ if (typeof IS_MINIFIED !== 'undefined') {
  }
  };
 
- const fesErrorMonitor = e => {
  const detectMisspelling = (errSym, error) => {
  if (!misusedAtTopLevelCode) {
  defineMisusedAtTopLevelCode();
  }
  let errSymLower = errSym.toLowerCase();
  misusedAtTopLevelCode.some(symbol => {
  let lowercase = symbol.name.toLowerCase();
 
  if (errSymLower === lowercase && errSym !== symbol.name) {
  const parsed = p5._getErrorStackParser().parse(error);
  const location =
  parsed[0] && parsed[0].fileName
  ? `${parsed[0].fileName}:${parsed[0].lineNumber}:${
  parsed[0].columnNumber
  }`
  : null;
  const msg = translator('fes.misspelling', {
  name: errSym,
  actualName: symbol.name,
  type: symbol.type,
  location: location ? translator('fes.location', { location }) : ''
  });
 
  p5._friendlyError(msg, symbol.name);
  return true;
  }
  });
  };
 
-  // This function receives an Error object in global mode and an
- // ErrorEvent in instance mode
  const fesErrorMonitor = e => {
  // This function can receieve an Error object or an ErrorEvent
  const error = e instanceof ErrorEvent ? e.error : e;
- if (
- error instanceof ReferenceError ||
- (e instanceof ErrorEvent && error instanceof TypeError)
- ) {
- // In case of a missplelling or a capitalization mistake, the error
- // would be of the type ReferenceError in global mode. For instance mode,
- // the error should be a TypeError.
-
- const errMsg = error.message.toLowerCase();
- misusedAtTopLevelCode.some(symbol => {
- const idx = errMsg.indexOf(symbol.name.toLowerCase());
- if (idx !== -1) {
- const word = error.message.slice(idx, idx   symbol.name.length);
-
- // make sure that there indeed is a mistake (i.e the name used by the
- // user and the actual name are different )
- if (word !== symbol.name) {
- const parsed = p5._getErrorStackParser().parse(error);
- const location =
- parsed[0] && parsed[0].fileName
- ? `${parsed[0].fileName}:${parsed[0].lineNumber}:${
- parsed[0].columnNumber
- }`
- : null;
- const msg = translator('fes.misspelling', {
- name: word,
- actualName: symbol.name,
- type: symbol.type,
- location: location ? translator('fes.location', { location }) : ''
- });
- p5._friendlyError(msg, symbol.name);
 
  switch (error.name) {
  case 'ReferenceError': {
  const errList = errorTable.ReferenceError;
  for (let 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]) {
  detectMisspelling(matched[1], error);
  }
  }
- });
  break;
  }
  }
  };
 
  p5._fesErrorMonitor = fesErrorMonitor;
  p5._checkForUserDefinedFunctions = checkForUserDefinedFunctions;
 
  window.addEventListener('load', checkForUserDefinedFunctions);
  window.addEventListener('error', p5._fesErrorMonitor, false);
 
  /**
  * Prints out all the colors in the color pallete with white text.

diff --git a/src/core/main.js b/src/core/main.js
@@ -538,10 538,6 @@ class p5 {
 
  // Run a check to see if the user has missplelled setup, draw, etc
  p5._checkForUserDefinedFunctions(this);
-
- // set up the fesErrorMonitor to catch and parse any errors while
- // running the sketch.
- window.addEventListener('error', p5._fesErrorMonitor, false);
  }
 
  // Bind events to window (not using container div bc key events don't work)

diff --git a/tasks/build/browserify.js b/tasks/build/browserify.js
@@ -40,6 40,7 @@ module.exports = function(grunt) {
  .exclude('../../docs/reference/data.json')
  .exclude('../../../docs/parameterData.json')
  .exclude('../../translations')
  .exclude('./browser_errors')
  .ignore('i18next')
  .ignore('i18next-browser-languagedetector');
  }

diff --git a/translations/en/translation.json b/translations/en/translation.json
@@ -1,7 1,7 @@
 {
  "fes": {
  "autoplay": "The media that tried to play (with '{{src}}') wasn't allowed to by this browser, most likely due to the browser's autoplay policy. Check out {{link}} for more information about why.",
- "checkUserDefinedFns": "It seems you just tried to define {{name}} function for p5.js.\n\nPlease note that it should be written as {{actualName}}. Note the difference in capitalization",
  "checkUserDefinedFns": "It seems that you may have accidently written {{name}} instead of {{actualName}}.\n\nPlease correct it if it's not intentional.",
  "fileLoadError": {
  "bytes": "It looks like there was a problem loading your file. {{suggestion}}",
  "font": "It looks like there was a problem loading your font. {{suggestion}}",
@@ -21,7 21,7 @@
  "type_WRONG_TYPE": "{{func}}() was expecting {{formatType}} for the {{position}} parameter, received {{argType}} instead. {{location}}"
  },
  "location": "(at {{location}})",
- "misspelling": "It seems that you just tried to use {{name}} {{location}}.\n\nIf you meant to use the {{type}} from p5.js, please note that it should be written as {{actualName}}. Note the difference in capitalization",
  "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",
  "misusedTopLevel": "Did you just try to use p5.js's {{symbolName}} {{symbolType}}? If so, you may want to move it into your sketch's setup() function.\n\nFor more details, see: {{link}}",
  "positions": {
  "p_1": "first",