error handling & panic screen (#19)

Author: aspage2

docker-compose.yaml

@@ -27,6 +27,5 @@ services:
       - ./nginx.conf:/etc/nginx/nginx.conf:ro
       - ./web/static/index.html:/www/data/static/index.html:ro
       - ./web/dist:/www/data/static/dist:ro
-      - ./art/remote_art/static/notfound.png:/www/data/static/notfound.png:ro
     ports:
       - 80:80

web/src/AlbumPage/Component.js

@@ -42,8 +42,15 @@ export default function AlbumPage({ album, albumartist }) {
   const { loaded, err, data } = useMPDQuery(
     `find albumartist "${albumartist}" album "${album}"`
   );
-  if (!loaded) return <div />;
-  if (err) return <h3>Error</h3>;
+  if (!loaded) return <h2>Loading...</h2>;
+  if (err) {
+		debugger;
+		return <>
+			<h1>{album}</h1>
+			<h2>Error Fetching Data</h2>
+			<p>{data.toString()}</p>
+		</>
+	}
 
   const tracks = Array.from(tracksFromData(data));
 

web/src/Browse/Browse.js

@@ -1,5 +1,5 @@
 import urls from "../urls";
-import React from "react";
+import React, { useEffect } from "react";
 import { Link, Route, Switch } from "react-router-dom";
 
 import map from "lodash/map";

web/src/PanicScreen.js

@@ -0,0 +1,23 @@
+import React from "react";
+
+export function PanicScreen({uncaughtPromise, obj}) {
+	let contents;
+	if (obj instanceof Error) {
+		contents = <p>{obj.toString()}</p>;
+	} else if (obj instanceof Response) {
+		contents = <>
+			<p><b>The application provided a fetch Response object for context</b></p>
+			<p>Status: {obj.status} {obj.statusText}</p>
+		</>
+	} else if (obj === undefined) {
+		contents = <p>No further context was provided.</p>
+	} else {
+		contents = <p>The provided context (type {typeof obj}) could not be interpreted.</p>
+	}
+	return <>
+		<h1>An Unexpected Issue Occurred</h1>
+		<p><b>{uncaughtPromise ? "Uncaught Promise" : "Standard Error"}</b></p>
+		<h2>Context</h2>
+		{contents}
+	</>;
+}

web/src/hooks.js

@@ -40,10 +40,16 @@ export function useMPDQuery(cmd) {
   const [ls, success, err, reset] = useLoadState();
 
   useEffect(() => {
-    if (cmd !== "") {
-      reset();
-      mpdQuery(cmd).then(success).catch(err);
-    }
+		if (cmd === "") {
+			return;
+		}
+		const doit = async () => {
+			reset();
+			mpdQuery(cmd)
+				.then(success)
+				.catch(err);
+		};
+		doit().catch(err);
   }, [cmd]);
 
   return ls;

web/src/index.js

@@ -10,6 +10,7 @@ import { SnackbarContext, SnackbarProvider } from "./Snackbar/Context";
 import { ConnectionContext, ConnectionProvider } from "./App/Context";
 import { QueueContext, QueueProvider } from "./Queue/Context";
 import { PlaybackContext, PlaybackProvider } from "./PlaybackControls/Context";
+import { PanicScreen } from "./PanicScreen";
 
 import { pullPlaybackInfo, pullQueueInfo } from "./mpd";
 import { ChannelProvider } from "./ChannelPage/Context";
@@ -28,6 +29,17 @@ function Root() {
   return <App />;
 }
 async function start() {
+	const root = document.getElementById("root");
+	window.onerror = function(_a, _b, _c, _d, err) {
+		ReactDOM.render(<PanicScreen 
+			uncaughtPromise={false}
+			obj={err}/>, root)
+	};
+	window.onunhandledrejection = function(ev) {
+		ReactDOM.render(<PanicScreen 
+			uncaughtPromise={true}
+			obj={ev.reason}/>, root)
+	};
   const playback = await pullPlaybackInfo();
   const queue = await pullQueueInfo();
   const channels = await fetch("/go/channels").then((res) => res.json());

web/src/mpd.js

@@ -3,8 +3,14 @@
  */
 
 export async function mpdQuery(command) {
-  const resp = await fetch(`/go/cmd?q=${encodeURIComponent(command)}`);
-  return await resp.text();
+	const path = `/go/cmd?q=${encodeURIComponent(command)}`;
+  const resp = await fetch(path);
+	if (!resp.ok) {
+		const err = new Error(`${path}: ${resp.status} ${resp.statusText}`);
+		return Promise.reject(err);
+	}
+  const data = await resp.text();
+	return Promise.resolve(data);
 }
 
 export function* parsePairs(data) {