Error boundaries

mopidy_iris/static/app.css

@@ -4378,8 +4378,8 @@ $icon-websocket: \e920;
       width: auto;
       bottom: auto;
       bottom: 8px;
-      left: 60px;
-      right: 60px;
+      left: 70px;
+      right: 70px;
       text-align: center;
       font-size: 12px;
       color: #FFFFFF !important; }

mopidy_iris/static/app.min.css

@@ -4378,8 +4378,8 @@ $icon-websocket: \e920;
       width: auto;
       bottom: auto;
       bottom: 8px;
-      left: 60px;
-      right: 60px;
+      left: 70px;
+      right: 70px;
       text-align: center;
       font-size: 12px;
       color: #FFFFFF !important; }
@@ -6046,9 +6046,11 @@ main header {
     height: 0.5em;
     margin: 0.25em 1px;
     background: #cecac4;
-    opacity: 0.25; }
+    opacity: 0.2; }
     .popularity-bars .bar.filled {
       opacity: 1; }
+    .light-theme .popularity-bars .bar {
+      background: #121212; }
 
 .popularity-value {
   display: none; }
@@ -6422,7 +6424,8 @@ main .track-view {
       height: 4rem;
       margin-top: -1rem; }
     .search-view .search-form input:focus, .search-view .search-form input:active {
-      border-color: #08d58f; }
+      border-color: #08d58f;
+      background: transparent; }
 
 .search-view .search-result-sections {
   padding-bottom: 30px; }

mopidy_iris/static/index.html

@@ -98,7 +98,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1535919926";
+	var build = "1536011758";
 	var version = "3.25.1";
 
 	// Construct the script tag

src/js/App.js

@@ -12,6 +12,7 @@ import ContextMenu from './components/ContextMenu';
 import Dragger from './components/Dragger';
 import Notifications from './components/Notifications';
 import DebugInfo from './components/DebugInfo';
+import ErrorBoundary from './components/ErrorBoundary';
 
 import * as helpers from './helpers';
 import * as coreActions from './services/core/actions';
@@ -52,12 +53,6 @@ class App extends React.Component{
 
 		if (this.props.allow_reporting){
 			ReactGA.initialize('UA-64701652-3');
-
-			/*
-			if (Raven !== undefined){
-				Raven.config('https://ca99fb6662fe40ae8ec4c18a466e4b4b@sentry.io/219026').install();
-			}
-			*/
 		}
 		
 		// Fire up our services
@@ -301,27 +296,29 @@ class App extends React.Component{
 
 		return (
 			<div className={className}>
+				<ErrorBoundary>
 			
-				<div className="body">
-			        <Sidebar />		        
-			        <PlaybackControls />
-			        <main>
-			      		{this.props.children}
-			        </main>
-		        </div>
+					<div className="body">
+				        <Sidebar />		        
+				        <PlaybackControls />
+				        <main>
+				      		{this.props.children}
+				        </main>
+			        </div>
 
-		        <ContextMenu />
-		        <Dragger />
-		        <Notifications 
-		        	uiActions={this.props.uiActions} 
-		        	spotifyActions={this.props.spotifyActions} 
-		        	notifications={this.props.notifications} 
-		        	processes={this.props.processes}
-		        	broadcasts={this.props.broadcasts}
-		        />
+			        <ContextMenu />
+			        <Dragger />
+			        <Notifications 
+			        	uiActions={this.props.uiActions} 
+			        	spotifyActions={this.props.spotifyActions} 
+			        	notifications={this.props.notifications} 
+			        	processes={this.props.processes}
+			        	broadcasts={this.props.broadcasts}
+			        />
 
-		        {this.props.debug_info ? <DebugInfo /> : null}
+			        {this.props.debug_info ? <DebugInfo /> : null}
 
+		        </ErrorBoundary>
 	        </div>
 		);
 	}

src/js/services/core/actions.js

@@ -26,7 +26,9 @@ export function getBroadcasts(){
                                 xhr: xhr,
                                 status: status,
                                 error: error
-                            }
+                            },
+                            null,
+                            false
                         )
                     );
                 }
@@ -43,12 +45,13 @@ export function startSearch(search_type, query, only_mopidy = false){
 	}
 }
 
-export function handleException(message, data = {}, description = null){
+export function handleException(message, data = {}, description = null, show_notification = true){
     return {
         type: 'HANDLE_EXCEPTION',
         message: message,
         description: description,
-        data: data
+        data: data,
+        show_notification: show_notification
     }
 }
 

src/js/services/core/middleware.js

@@ -71,18 +71,6 @@ const CoreMiddleware = (function(){
                     }
                 );
 
-                // Log with Raven Sentry
-                /*
-                if (store.getState().ui.allow_reporting){
-	                Raven.captureException(
-	                    new Error(message),
-	                    {
-	                        extra: data
-	                    }
-	                );
-	            }
-                */
-
                 // Log with Analytics
                 if (store.getState().ui.allow_reporting){
 	                ReactGA.event({
@@ -93,8 +81,12 @@ const CoreMiddleware = (function(){
 	                });
 	            }
 
-                store.dispatch(uiActions.createNotification({content: message, type: 'bad', description: description}));
+	            if (action.show_notification){
+	                store.dispatch(uiActions.createNotification({content: message, type: 'bad', description: description}));
+	            }
+
                 console.error(message, description, data);
+                
                 break;
 
             case 'PLAY_PLAYLIST':

src/scss/components/_playback-controls.scss

@@ -205,8 +205,8 @@
 			width: auto;
 			bottom: auto;
 			bottom: 8px;
-			left: 60px;
-			right: 60px;
+			left: 70px;
+			right: 70px;
 			text-align: center;
 			font-size: 12px;
 			color: $white !important;