From d33b6a354fa339c45d4fd763e2249248e4205044 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Wed, 2 Nov 2016 19:23:35 -0400
Subject: [PATCH] #143 handle undefined console messages

---
 client/modules/IDE/components/Console.js | 19 ++++++++++++++-----
 client/styles/components/_console.scss   |  7 +++++++
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/client/modules/IDE/components/Console.js b/client/modules/IDE/components/Console.js
index bb08e59b..e1401ed9 100644
--- a/client/modules/IDE/components/Console.js
+++ b/client/modules/IDE/components/Console.js
@@ -58,11 +58,20 @@ class Console extends React.Component {
   appendConsoleEvent(consoleEvent) {
     const args = consoleEvent.arguments;
     const method = consoleEvent.method;
-    const nextChild = (
-      <div key={this.children.length} className={`preview-console__${method}`}>
-        {Object.keys(args).map((key) => <span key={`${this.children.length}-${key}`}>{args[key]}</span>)}
-      </div>
-    );
+    let nextChild;
+    if (Object.keys(args).length === 0) {
+      nextChild = (
+        <div key={this.children.length} className="preview-console__undefined">
+          <span key={`${this.children.length}-0`}>{'undefined'}</span>
+        </div>
+      );
+    } else {
+      nextChild = (
+        <div key={this.children.length} className={`preview-console__${method}`}>
+          {Object.keys(args).map((key) => <span key={`${this.children.length}-${key}`}>{args[key]}</span>)}
+        </div>
+      );
+    }
     this.children.push(nextChild);
   }
 
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
index f113472b..650e9dfb 100644
--- a/client/styles/components/_console.scss
+++ b/client/styles/components/_console.scss
@@ -25,6 +25,13 @@
 		flex: 1 0 auto;
 	}
 
+	.preview-console__undefined {
+		@include themify(){
+			color: getThemifyVariable('inactive-text-color');
+		}
+		flex: 1 0 auto;
+	}
+
 	.preview-console__error {
 		color: $console-error-color;
 		flex: 1 0 auto;