Handle errors when evaluating expression in iframe

Author: catarak

client/modules/IDE/components/ConsoleInput.jsx

@@ -29,8 +29,8 @@ class ConsoleInput extends React.Component {
         if (value.trim(' ') === '') {
           return false;
         }
-        const messages = [{ log: Encode({ method: 'command', data: Encode(value) }) }];
-        const consoleEvent = [{ method: 'command', data: Encode(value) }];
+        const messages = [{ log: Encode({ method: 'command', data: [value] }) }];
+        const consoleEvent = [{ method: 'command', data: [value] }];
         dispatch({
           source: 'console',
           messages

client/utils/evaluateExpression.js

@@ -6,15 +6,22 @@ function __makeEvaluateExpression(evalInClosure) {
 function evaluateExpression() {
   return __makeEvaluateExpression((expr) => {
     let newExpr = expr;
+    let result = null;
+    let error = false;
     try {
-      const wrapped = `(${expr})`;
-      const validate = new Function(wrapped); // eslint-disable-line
-      newExpr = wrapped; // eslint-disable-line
+      try {
+        const wrapped = `(${expr})`;
+        const validate = new Function(wrapped); // eslint-disable-line
+        newExpr = wrapped; // eslint-disable-line
+      } catch (e) {
+        // We shouldn't wrap the expression
+      }
+      result = (0, eval)(newExpr); // eslint-disable-line
     } catch (e) {
-      // We shouldn't wrap the expression
+      result = e;
+      error = true;
     }
-
-    return (0, eval)(newExpr); // eslint-disable-line
+    return { result, error };
   });
 }
 

client/utils/previewEntry.js

@@ -31,8 +31,8 @@ function handleMessageEvent(e) {
     const decodedMessages = messages.map(message => Decode(message.log));
     decodedMessages.forEach((message) => {
       const { data: args } = message;
-      const consoleInfo = handleConsoleExpressions(args);
-      const resultMessages = [{ log: Encode({ method: 'result', data: [consoleInfo] }) }];
+      const { result, error } = handleConsoleExpressions(args);
+      const resultMessages = [{ log: Encode({ method: error ? 'error' : 'result', data: [result] }) }];
       window.parent.postMessage({
         messages: resultMessages,
         source: 'sketch'