Support of error results

src/app/appState.js

@@ -4,6 +4,7 @@ export default class AppState {
         this.commandResults = [];
         this.handlers = [];
         this.uiTheme = persistData.uiTheme || 'dark';
+        this.debugMode = false;
     }
 
     addCommandResult(result) {

src/app/cmd.js

@@ -2,8 +2,12 @@ import is from './is';
     
     var handlers = [];
 
+var config = {
+    errorHandler: (input, err) => logError(err)
+}
+
 var cmd = {
-        debugMode: true,
+        debugMode: false,
         execute: function(rawInput) {
             var input = rawInput.trim().toLowerCase();
             var handler = findHandler(input);
@@ -15,12 +19,12 @@ var cmd = {
                     try {
                         invokeHandler(input, handler);
                     } catch (e) {
-                        displayCommandError(input, "Error: " + e);
+                         config.errorHandler(input, e);
                     }
                 }
             }
             else {
-                displayCommandError(input, "Unsupported expression: " + input.trim());
+                logError(input, new Error("Unsupported expression: " + input.trim()));
             }
         },
         commands: function(catalog) {
@@ -51,11 +55,14 @@ var cmd = {
         },
         clear: function() {
             console.log('clear');
+        },
+        onError: function(handler) {
+            config.errorHandler = handler;
         }
     };
 
-    function displayCommandError(input, message) {
-        console.error(message)
+    function logError(err) {
+        console.error(err)
     }
 
     function invokeHandler (input, handler) {

src/app/commands.js

@@ -2,6 +2,7 @@ import HelpResult from './models/HelpResult';
 import AboutResult from './models/AboutResult';
 import UnknownCommandResult from './models/UnknownCommandResult';
 import ExpressionResult from './models/ExpressionResult';
+import ErrorResult from './models/ErrorResult';
 import * as expression from './expression';
 
 var cmdConfig = {};
@@ -36,16 +37,15 @@ export default {
                 'about': function(c) {
                     appState.addCommandResult(new AboutResult(c.input));
                 },
-                '-debug': function() {
-                    app.debugMode = true;
-                    console.log('debug is on');
-                },
                 '-notrack': function () {}
         });
 
+        // Last command handler reports that input is unknown
         cmd.command({
             canHandle: () => true,
             handle: (c) => appState.addCommandResult(new UnknownCommandResult(c.input))
         });
+
+        cmd.onError((input, err) => appState.addCommandResult(new ErrorResult(input, err)));
     }
  }

src/app/components/results/DisplayResultView.jsx

@@ -6,6 +6,7 @@ import HelpResultView from './HelpResultView';
 import AboutResultView from './AboutResultView';
 import ExpressionResult from '../../models/ExpressionResult';
 import ExpressionResultView from './ExpressionResultView';
+import ErrorResult from '../../models/ErrorResult';
 
 export default class DisplayResult extends React.Component {
     render() {
@@ -14,6 +15,10 @@ export default class DisplayResult extends React.Component {
             return this.renderUnknown();            
         }
 
+        if(this.props.content instanceof ErrorResult) {
+            return this.renderError(this.props.content.error.message);
+        }
+
         return <div className="result">
                         <div className="input mono"><span className="cur">&gt;</span>{this.props.content.input}<a className="hashLink" title="Link for this expression" href={window.location.pathname + '#' + this.props.inputHash}>#</a></div>
                         <div className="content">
@@ -28,6 +33,12 @@ export default class DisplayResult extends React.Component {
                </div>
     }
 
+    renderError(message) {
+        return <div className="result">
+                    <div className="error">(X_X) Error occurred: <strong>{message}</strong></div>
+               </div>
+    }
+
     findResultComponent(result) {
         if(result instanceof HelpResult) {
             return <HelpResultView content={result} />

src/app/models/ErrorResult.js

@@ -0,0 +1,8 @@
+import CommandResult from './CommandResult';
+
+export default class ErrorResult extends CommandResult {
+    constructor(input, error) {
+        super(input);
+        this.error = error;
+    }
+}

src/css/styles.css

@@ -83,6 +83,7 @@ code { font-size: 1.2em; font-weight: bold; }
 .dark .hashLink, .dark .hashLink:visited { color: #333 }
 .dark .hashLink:hover { color: #999 }
 .dark ul.top-links li:hover { background: #333 }
+.dark .error { color: mediumvioletred}
 
 /* Top Links Shrink */
 @media (max-width: 800px) {