fixes #761, but fixes the bigger issue at hand here, which is that log messages were not getting deserialized properly

client/modules/IDE/components/Console.jsx

@@ -70,13 +70,6 @@ class Console extends React.Component {
     }
   }
 
-  formatData(args) {
-    if (!Array.isArray(args)) {
-      return Array.of(args);
-    }
-    return args;
-  }
-
   render() {
     const consoleClass = classNames({
       'preview-console': true,
@@ -105,16 +98,8 @@ class Console extends React.Component {
         </div>
         <div ref={(element) => { this.consoleMessages = element; }} className="preview-console__messages">
           {this.props.consoleEvents.map((consoleEvent) => {
-            const { arguments: args, method, times } = consoleEvent;
+            const { data: args, method, times } = consoleEvent;
             const { theme } = this.props;
-            Object.assign(consoleEvent, { data: this.formatData(args) });
-            if (Object.keys(args).length === 0) {
-              return (
-                <div key={consoleEvent.id} className="preview-console__message preview-console__message--undefined">
-                  <span key={`${consoleEvent.id}-0`}>undefined</span>
-                </div>
-              );
-            }
             return (
               <div key={consoleEvent.id} className={`preview-console__message preview-console__message--${method}`}>
                 { times > 1 &&
@@ -127,7 +112,7 @@ class Console extends React.Component {
                 }
                 <ConsoleFeed
                   styles={this.getConsoleFeedStyle(theme, times)}
-                  logs={Array.of(consoleEvent)}
+                  logs={[consoleEvent]}
                 />
               </div>
             );

client/modules/IDE/components/PreviewFrame.jsx

@@ -8,6 +8,7 @@ import loopProtect from 'loop-protect';
 import { JSHINT } from 'jshint';
 import decomment from 'decomment';
 import classNames from 'classnames';
+import { Decode } from 'console-feed';
 import { getBlobUrl } from '../actions/files';
 import { resolvePathToFile } from '../../../../server/utils/filePath';
 import {
@@ -80,8 +81,10 @@ class PreviewFrame extends React.Component {
 
   handleConsoleEvent(messageEvent) {
     if (Array.isArray(messageEvent.data)) {
-      messageEvent.data.every((message, index, arr) => {
-        const { arguments: args } = message;
+      let decodedMessages = messageEvent.data.map(message => Decode(message.log));
+
+      decodedMessages.every((message, index, arr) => {
+        const { data: args } = message;
         let hasInfiniteLoop = false;
         Object.keys(args).forEach((key) => {
           if (typeof args[key] === 'string' && args[key].includes('Exiting potential infinite loop')) {
@@ -99,7 +102,7 @@ class PreviewFrame extends React.Component {
         }
         const cur = Object.assign(message, { times: 1 });
         const nextIndex = index + 1;
-        while (isEqual(cur.arguments, arr[nextIndex].arguments) && cur.method === arr[nextIndex].method) {
+        while (isEqual(cur.data, arr[nextIndex].data) && cur.method === arr[nextIndex].method) {
           cur.times += 1;
           arr.splice(nextIndex, 1);
           if (nextIndex === arr.length) {
@@ -109,7 +112,7 @@ class PreviewFrame extends React.Component {
         return true;
       });
 
-      this.props.dispatchConsoleEvent(messageEvent.data);
+      this.props.dispatchConsoleEvent(decodedMessages);
     }
   }
 

client/modules/IDE/reducers/console.js

@@ -2,17 +2,12 @@ import * as ActionTypes from '../../../constants';
 
 const consoleMax = 500;
 const initialState = [];
-let messageId = 0;
 
 const console = (state = initialState, action) => {
   let messages;
   switch (action.type) {
     case ActionTypes.CONSOLE_EVENT:
       messages = [...action.event];
-      messages.forEach((message) => {
-        message.id = messageId;
-        messageId += 1;
-      });
       return state.concat(messages).slice(-consoleMax);
     case ActionTypes.CLEAR_CONSOLE:
       return [];

client/utils/previewEntry.js

@@ -6,11 +6,8 @@ window.loopProtect = loopProtect;
 const consoleBuffer = [];
 const LOGWAIT = 500;
 Hook(window.console, (log) => {
-  const { method, data: args } = log[0];
   consoleBuffer.push({
-    method,
-    arguments: args,
-    source: 'sketch'
+    log
   });
 });
 setInterval(() => {