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

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