Adding front-end error messages (ugly, but helps diagnose issues)

mopidy_iris/static/app.css

@@ -4075,7 +4075,9 @@ input[type="submit"] {
       content: ')'; }
     .list__item__column__item--context-menu-trigger {
       font-size: 14px;
-      margin: -14px -14px -14px 0; }
+      margin: -14px -14px -14px 0;
+      position: relative;
+      z-index: 2; }
       .list__item__column__item--context-menu-trigger:before {
         display: none !important; }
     .light-theme .list__item__column__item .flag {
@@ -6352,6 +6354,19 @@ main header {
           border-color: #08d58f;
           opacity: 1; }
 
+.error-boundary {
+  padding: 20px; }
+  .error-boundary__title {
+    color: #cf2d2d;
+    padding: 10px;
+    margin: 0; }
+    .error-boundary__title .icon {
+      font-size: 1em;
+      padding-right: 10px;
+      vertical-align: middle; }
+  .error-boundary__trace {
+    padding: 10px; }
+
 .artist-view .body-loader:not(.lazy-loader) {
   padding: 15vh 0; }
 

mopidy_iris/static/index.html

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

src/js/components/ErrorBoundary.js

@@ -1,25 +1,40 @@
 
-import React from 'react'
+import React from 'react';
 
 export default class ErrorBoundary extends React.Component {
 
 	constructor(props) {
 		super(props);
-		this.state = { hasError: false };
+		this.state = { 
+			hasError: false,
+			error: null,
+			info: null
+		};
 	}
 
-	componentDidCatch(error, info) {
-		// Display fallback UI
-		this.setState({ hasError: true });
-		// You can also log the error to an error reporting service
-		//logErrorToMyService(error, info);
-		console.error(error,info);
+	componentDidCatch(error, info){
+		this.setState({
+			hasError: true,
+			error: error,
+			info: info
+		});
+		console.error(error, info);
 	}
 
 	render() {
 		if (this.state.hasError){
-			// You can render any custom fallback UI
-			return <p className="mid_grey-text">Failed to render</p>;
+			return (
+				<div className="error-boundary">
+
+					<h4 className="error-boundary__title">
+						<i className="icon icon--material">error</i>
+						{this.state.error ? this.state.error.toString() : "Unknown error"}	
+					</h4>
+
+					{this.state.info ? <pre className="error-boundary__trace">{this.state.info.componentStack}</pre> : null}
+
+				</div>
+			);
 		}
 		return this.props.children;
 	}

src/js/components/Thumbnail.js

@@ -53,7 +53,7 @@ class Thumbnail extends React.Component{
 			var images = this.props.images;
 
 			// An array of image objects (eg Artists), so just pick the first one
-			if (Array.isArray(images)){
+			if (Array.isArray(images) && images.length > 0){
 				images = images[0];
 			}
 
@@ -63,7 +63,10 @@ class Thumbnail extends React.Component{
 				size = this.props.size;
 			}
 
-			return images[size];
+			// Return the requested size
+			if (images[size]){
+				return images[size];
+			}
 		}
 
 		// No images

src/scss/app.scss

@@ -36,6 +36,7 @@
 @import 'components/icon-field';
 @import 'components/commands';
 @import 'components/related-artists';
+@import 'components/error-boundary';
 
 @import 'views/artist';
 @import 'views/user';

src/scss/components/_error-boundary.scss

@@ -0,0 +1,20 @@
+
+.error-boundary {
+	padding: 20px;
+	
+	&__title {
+		color: colour(red);
+		padding: 10px;
+		margin: 0;
+
+		.icon {
+			font-size: 1em;
+			padding-right: 10px;
+			vertical-align: middle;
+		}
+	}
+
+	&__trace {
+		padding: 10px;
+	}
+}

src/scss/components/_lists.scss

@@ -232,6 +232,8 @@
 				&--context-menu-trigger {
 					font-size: 14px;
 					margin: -14px -14px -14px 0;
+					position: relative;
+					z-index: 2;
 
 					&:before {
 						display: none !important;