feat(StoreDevtools): catch redux devtools errors

modules/store-devtools/spec/extension.spec.ts

@@ -565,4 +565,43 @@ describe('DevtoolsExtension', () => {
       );
     });
   });
+
+  describe('error handling', () => {
+    let consoleSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      devtoolsExtension = new DevtoolsExtension(
+        reduxDevtoolsExtension,
+        createConfig({}),
+        <any>null
+      );
+      // Subscription needed or else extension connection will not be established.
+      devtoolsExtension.actions$.subscribe();
+      consoleSpy = spyOn(console, 'warn');
+    });
+
+    it('for normal action', () => {
+      (extensionConnection.send as jasmine.Spy).and.callFake(() => {
+        throw new Error('uh-oh something went wrong');
+      });
+
+      const action = new PerformAction({ type: 'FOO' }, 1234567);
+      const state = createState();
+
+      devtoolsExtension.notify(action, state);
+      expect(consoleSpy).toHaveBeenCalled();
+    });
+
+    it('for action that requires full state update', () => {
+      (reduxDevtoolsExtension.send as jasmine.Spy).and.callFake(() => {
+        throw new Error('uh-oh something went wrong');
+      });
+
+      const action = {} as LiftedAction;
+      const state = createState();
+
+      devtoolsExtension.notify(action, state);
+      expect(consoleSpy).toHaveBeenCalled();
+    });
+  });
 });

modules/store-devtools/src/extension.ts

@@ -133,7 +133,10 @@ export class DevtoolsExtension {
             state.nextActionId
           )
         : action;
-      this.extensionConnection.send(sanitizedAction, sanitizedState);
+
+      this.sendToReduxDevtools(() =>
+        this.extensionConnection.send(sanitizedAction, sanitizedState)
+      );
     } else {
       // Requires full state update
       const sanitizedLiftedState = {
@@ -146,10 +149,13 @@ export class DevtoolsExtension {
           ? sanitizeStates(this.config.stateSanitizer, state.computedStates)
           : state.computedStates,
       };
-      this.devtoolsExtension.send(
-        null,
-        sanitizedLiftedState,
-        this.getExtensionConfig(this.config)
+
+      this.sendToReduxDevtools(() =>
+        this.devtoolsExtension.send(
+          null,
+          sanitizedLiftedState,
+          this.getExtensionConfig(this.config)
+        )
       );
     }
   }
@@ -250,4 +256,15 @@ export class DevtoolsExtension {
     }
     return extensionOptions;
   }
+
+  private sendToReduxDevtools(send: Function) {
+    try {
+      send();
+    } catch (err) {
+      console.warn(
+        '@ngrx/store-devtools: something went wrong inside the redux devtools',
+        err
+      );
+    }
+  }
 }