Adding Sentry/Raven for error tracking

src/index.html

@@ -24,6 +24,11 @@
 	<link rel="apple-touch-icon" sizes="192x192" href="/iris/assets/logo-app-192.png">
 	<link rel="apple-touch-icon" sizes="512x512" href="/iris/assets/logo-app-512.png">
 
+	<!-- Raven Sentry -->
+	<script src="https://cdn.ravenjs.com/3.17.0/raven.min.js" crossorigin="anonymous"></script>
+
+	<script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-3.min.js" data-apikey="04e476df27fbfb1ce96602e985ef3bdd"></script>
+
 </head>
 <body>
 
@@ -35,6 +40,9 @@
 
 <script type="text/javascript">
 
+	// Initiate Raven Sentry
+	Raven.config('https://023e3bf7721b48f29948545fc36a4621@sentry.io/219026').install()
+
 	var build_name = "BUILD_NAME_HERE";
 
     var js = document.createElement("script");

src/js/App.js

@@ -47,6 +47,8 @@ class App extends React.Component{
 	}
 
 	componentDidMount(){
+		
+		// Fire up our services
 		this.props.coreActions.startServices()
 		this.props.coreActions.getBroadcasts()
 

src/js/index.js

@@ -35,6 +35,15 @@ import LibraryTracks from './views/library/LibraryTracks'
 import LibraryPlaylists from './views/library/LibraryPlaylists'
 import LibraryBrowse from './views/library/LibraryBrowse'
 
+/*
+// Hijack console error for Raven to capture
+var originalConsoleError = console.error;  
+console.error = function(message, error){  
+    Raven.captureException(message, error);
+    originalConsoleError.apply(this, arguments)
+}
+*/
+
 // setup our analytics tracking
 ReactGA.initialize('UA-64701652-3');
 function handleUpdate() {

src/js/services/core/actions.js

@@ -32,7 +32,15 @@ export function startSearch(search_type, query, only_mopidy = false){
 	}
 }
 
-export function debugResponse( response ){
+export function handleException(message, data = {}){
+    return {
+        type: 'HANDLE_EXCEPTION',
+        message: message,
+        data: data
+    }
+}
+
+export function debugResponse(response){
     return {
         type: 'DEBUG',
         response: response

src/js/services/core/middleware.js

@@ -18,6 +18,27 @@ const CoreMiddleware = (function(){
 
         switch(action.type){
 
+            case 'HANDLE_EXCEPTION':
+                var data = Object.assign(
+                    {},
+                    action.data, 
+                    {
+                        state: store.getState()
+                    }
+                );
+
+                Raven.captureException(
+                    new Error(action.message), 
+                    {
+                        extra: data
+                    }
+                );
+
+                store.dispatch(uiActions.createNotification(action.message,'bad'))
+
+                console.error(action.message, data);
+                break;
+
             case 'CORE_START_SERVICES':
                 store.dispatch(mopidyActions.connect())
                 store.dispatch(pusherActions.connect())

src/js/services/mopidy/middleware.js

@@ -5,6 +5,7 @@ import { hashHistory } from 'react-router'
 import * as helpers from '../../helpers'
 
 var mopidyActions = require('./actions.js')
+var coreActions = require('../core/actions.js')
 var uiActions = require('../ui/actions.js')
 var spotifyActions = require('../spotify/actions.js')
 var pusherActions = require('../pusher/actions.js')
@@ -128,7 +129,7 @@ const MopidyMiddleware = (function(){
 
         return new Promise( (resolve, reject) => {
 
-            if( model in ws ){
+            if (model in ws){
                 if( method in ws[model] ){
                     var mopidyObject = ws[model][method]
                     var property = method;       
@@ -136,13 +137,19 @@ const MopidyMiddleware = (function(){
                     var mopidyObject = ws[model]
                     var property = model;   
                 }
-            }else{
+
+            } else {
                 var error = {
                     message: 'Call to an invalid object. Check you are calling a valid Mopidy object.',
                     call: call,
                     value: value
                 }
-                console.error(error)
+
+                store.dispatch(coreActions.handleException(
+                    error.message, 
+                    error
+                ));
+
                 reject(error)
             }
 

src/js/services/pusher/middleware.js

@@ -21,13 +21,25 @@ const PusherMiddleware = (function(){
         // if debug enabled
         if (store.getState().ui.log_pusher) console.log('Pusher', message)
 
+        // error
+        if (message.status == 0){
+            store.dispatch(coreActions.handleException(
+                message.message, 
+                message
+            ));
+        }
+
         // response to a request [we] made
-        if (typeof(message.request_id) !== 'undefined' && message.request_id){            
+        if (message.request_id !== undefined && message.request_id){            
             if (typeof( deferredRequests[ message.request_id ]) !== 'undefined' ){
                 store.dispatch(uiActions.stopLoading(message.request_id))
                 deferredRequests[ message.request_id ].resolve( message )
+
             } else {
-                console.error('Pusher: Response with no matching request', message);
+                store.dispatch(coreActions.handleException(
+                    'Pusher response received with no matching request', 
+                    message
+                ));
             }
 
         // general message

src/js/services/spotify/actions.js

@@ -1,4 +1,5 @@
 
+var coreActions = require('../../services/core/actions')
 var uiActions = require('../../services/ui/actions')
 var mopidyActions = require('../../services/mopidy/actions')
 var lastfmActions = require('../../services/lastfm/actions')
@@ -64,14 +65,20 @@ const sendRequest = ( dispatch, getState, endpoint, method = 'GET', data = false
                                 status = response.error.status
                             }
 
+                            dispatch(coreActions.handleException(
+                                message,
+                                {
+                                    config: config,
+                                    response: response
+                                }
+                            ))
+
                             // TODO: Instead of allowing request to fail before renewing the token, once refreshed
                             // we should retry the original request(s)
                             if (message == 'The access token expired'){
                                 dispatch(refreshToken(dispatch, getState))
                             }
 
-                            dispatch(uiActions.createNotification(message,'bad'))
-                            console.error( endpoint+' failed', response)
                             reject(error)
                         }
                     )

src/js/views/discover/DiscoverNewReleases.js

@@ -56,9 +56,11 @@ class DiscoverNewReleases extends React.Component{
 							onContextMenu={e => this.handleContextMenu(e,album)}>
 								<Thumbnail images={album.images} />
 						</Link>
+						<h2>
 							<Link to={global.baseURL+'album/'+album.uri}>
-							<h2>{album.name}</h2>
+								{album.name}
 							</Link>
+						</h2>
 						<h3>
 							<ArtistSentence artists={album.artists} />
 						</h3>

src/scss/views/_discover.scss

@@ -97,9 +97,6 @@
 			padding-bottom: 20px;
 		}
 	}
-
-	@include responsive( $bp_medium ){
-	}
 }
 
 .discover-featured-view,
@@ -155,6 +152,8 @@
 
 	@include responsive( $bp_medium ){
 		.intro {
+			padding-top: 50px;
+
 			.content {
 				padding: 20px;
 
@@ -162,10 +161,18 @@
 					padding-top: 0;
 				}
 
+				h2 {
+					padding-top: 0;
+				}
+
+				h3 {
+					line-height: 1.3em;
+				}
+
 				h2,
 				h3,
 				.actions {
-					padding-left: 120px;
+					padding-left: 45%;
 				}
 
 				.actions {
@@ -173,7 +180,7 @@
 				}
 
 				.thumbnail {
-					max-width: 100px;
+					max-width: 40%;
 				}
 			}
 		}