Trapping errors in URL formatting and displaying an error message

spec/regexper_spec.js

@@ -23,7 +23,8 @@ describe('regexper.js', function() {
 
     this.regexper = new Regexper(this.root);
     spyOn(this.regexper, '_setHash');
-    spyOn(this.regexper, '_getHash').and.returnValue('example hash value');
+    spyOn(this.regexper, '_getHash');
+    spyOn(window._gaq, 'push');
   });
 
   describe('#keypressListener', function() {
@@ -179,6 +180,31 @@ describe('regexper.js', function() {
 
   describe('#hashchangeListener', function() {
 
+    describe('when the URL is invalid', function() {
+
+      beforeEach(function() {
+        this.regexper._getHash.and.returnValue(new Error('example error'));
+      });
+
+      it('displays an error message', function() {
+        this.regexper.hashchangeListener();
+        expect(this.regexper.state).toEqual('has-error');
+        expect(this.regexper.error.innerHTML).toEqual('Malformed expression in URL');
+      });
+
+      it('tracks the event', function() {
+        this.regexper.hashchangeListener();
+        expect(window._gaq.push).toHaveBeenCalledWith(['_trackEvent', 'visualization', 'malformed URL']);
+      });
+
+    });
+
+    describe('when the URL is valid', function() {
+
+      beforeEach(function() {
+        this.regexper._getHash.and.returnValue('example hash value');
+      });
+
       it('enables the permalink', function() {
         this.regexper.hashchangeListener();
         expect(this.regexper.permalinkEnabled).toEqual(true);
@@ -192,6 +218,8 @@ describe('regexper.js', function() {
 
     });
 
+  });
+
   describe('#bindListeners', function() {
 
     beforeEach(function() {
@@ -352,7 +380,6 @@ describe('regexper.js', function() {
       spyOn(Parser.prototype, 'render').and.returnValue(this.renderPromise.promise);
       spyOn(Parser.prototype, 'cancel');
 
-      spyOn(window._gaq, 'push');
       spyOn(this.regexper, 'updateLinks');
       spyOn(this.regexper, 'displayWarnings');
     });

src/js/regexper.js

@@ -53,8 +53,16 @@ export default class Regexper {
   }
 
   hashchangeListener() {
+    var expr = this._getHash();
+
+    if (expr instanceof Error) {
+      this.state = 'has-error';
+      this.error.innerHTML = 'Malformed expression in URL';
+      window._gaq.push(['_trackEvent', 'visualization', 'malformed URL']);
+    } else {
       this.permalinkEnabled = true;
-    this.showExpression(this._getHash());
+      this.showExpression(expr);
+    }
   }
 
   bindListeners() {
@@ -69,8 +77,13 @@ export default class Regexper {
   }
 
   _getHash() {
+    try {
       return decodeURIComponent(location.hash.slice(1));
     }
+    catch(e) {
+      return e;
+    }
+  }
 
   set state(state) {
     this.root.className = state;