Notify when errors occur in the app

Related to #27.

Author: zalmoxisus

src/assets/img/logo/error.png

@@ -3,6 +3,7 @@ import syncOptions from '../options/syncOptions';
 import createMenu from './contextMenus';
 import openDevToolsWindow from './openWindow';
 let connections = {};
+let catchedErrors = {};
 
 window.syncOptions = syncOptions; // Used in the options page
 
@@ -60,13 +61,40 @@ function messaging(request, sender, sendResponse) {
     if (tabId in connections) {
       connections[ tabId ].postMessage({payload: payload});
     }
+
+    // Notify when errors occur in the app
+    syncOptions.get(options => {
+      if (!options.notifyErrors) return;
+      const error = payload.computedStates[payload.currentStateIndex].error;
+      if (error) {
+        chrome.notifications.create('redux-error', {
+          type: 'basic',
+          title: 'An error occurred in the app',
+          message: error,
+          iconUrl: 'img/logo/48x48.png',
+          isClickable: true
+        });
+        if (typeof store.id === 'number') {
+          chrome.pageAction.setIcon({tabId: store.id, path: 'img/logo/error.png'});
+          catchedErrors.tab = store.id;
+        }
+      } else if (catchedErrors.last && typeof store.id === 'number' && catchedErrors.tab === store.id) {
+        chrome.pageAction.setIcon({tabId: store.id, path: 'img/logo/38x38.png'});
+      }
+      catchedErrors.last = error;
+    });
   }
   return true;
 }
 
 onMessage(messaging);
 chrome.runtime.onMessageExternal.addListener(messaging);
 
+chrome.notifications.onClicked.addListener(id => {
+  chrome.notifications.clear(id);
+  if (id === 'redux-error') openDevToolsWindow('devtools-right');
+});
+
 export function toContentScript(action) {
   if (store.id in connections) {
     connections[ store.id ].postMessage({action: action});

src/browser/extension/background/messaging.js

@@ -65,7 +65,7 @@
   "externally_connectable": {
     "ids": ["*"]
   },
-  "permissions": [ "contextMenus", "tabs", "storage", "<all_urls>" ],
+  "permissions": [ "notifications", "contextMenus", "tabs", "storage", "<all_urls>" ],
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;",
   "update_url": "https://clients2.google.com/service/update2/crx",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAsdJEPwY92xUACA9CcDBDBmbdbp8Ap3cKQ0DJTUuVQvqb4FQAv8RtKY3iUjGvdwuAcSJQIZwHXcP2aNDH3TiFik/NhRK2GRW8X3OZyTdkuDueABGP2KEX8q1WQDgjX/rPIinGYztUrvoICw/UerMPwNW62jwGoVU3YhAGf+15CgX2Y6a4tppnf/+1mPedKPidh0RsM+aJY98rX+r1SPAHPcGzMjocLkqcT75DZBXer8VQN14tOOzRCd6T6oy7qm7eWru8lJwcY66qMQvhk0osqEod2G3nA7aTWpmqPFS66VEiecP9PgZlp8gQdgZ3dFhA62exydlD55JuRhiMIR63yQIDAQAB"

src/browser/extension/manifest.json

@@ -70,6 +70,11 @@ chrome.runtime.getBackgroundPage( background => {
           <span className="caption">Pages urls to inject DevTools in (regex from new line):</span>
           <textarea onChange={saveUrls} id="urls" defaultValue={items.urls}/>
         </div>
+        <div className="input">
+          <span className="caption">Show errors:</span>
+          <input id="notifyErrors" type="checkbox" defaultChecked={items.notifyErrors} onChange={saveOption}/>
+          <span className="comment">(will notify when errors occur in the app)</span>
+        </div>
       </div>,
       document.getElementById('root')
     );

src/browser/extension/options/index.js

@@ -19,6 +19,7 @@ const get = callback => {
       blacklist: '',
       timeout: 1,
       serialize: true,
+      notifyErrors: true,
       inject: true,
       urls: '^https?://localhost|0\\.0\\.0\\.0:\\d+\n^https?://.+\\.github\\.io'
     }, function(items) {