Added more detailed error reporting.

web/src/App.css

@@ -24,6 +24,8 @@
 #ask .MuiDialog-paper { width: 50% ; max-width: 40em !important ; }
 #ask img.icon { width: 2em ; float: left ; margin: 0 1em 1em 0 ; }
 
+#error-response iframe { width: 100% ; border: none ; }
+
 .Toastify p { margin-top: 0.25em ; }
 .Toastify__toast--info { background: #20b040 ; }
 .Toastify__toast--warn { background: #f0c010 ; }

web/src/App.js

@@ -157,7 +157,7 @@ export default class App extends React.Component
             this.focusQueryString() ;
         } )
         .catch( err => {
-            this.showErrorToast( <div> The search query failed: <div className="monospace"> {err.toString()} </div> </div> ) ;
+            this.showErrorResponse( "The search query failed", err ) ;
             this.setState( { searchResults: null, searchSeqNo: this.state.searchSeqNo+1 } ) ;
         } ) ;
     }
@@ -217,6 +217,23 @@ export default class App extends React.Component
     setStoredMsg( msgType, msgData ) { this.refs[ "_stored_msg-" + msgType + "_" ].value = msgData ; }
     getStoredMsg( msgType ) { return this.refs[ "_stored_msg-" + msgType + "_" ].value }
 
+    showErrorResponse( caption, err ) {
+        let content ;
+        if ( ! err.response )
+            content = <div className="monospace"> {err.toString()} </div> ;
+        else {
+            if ( err.response.data.indexOf( "<!DOCTYPE" ) !== -1 || err.response.data.indexOf( "<html" ) !== -1 )
+                content = <iframe title="error-response" srcDoc={err.response.data} /> ;
+            else
+                content = <div className="monospace"> {err.response.data} </div> ;
+        }
+        const buttons = { Close: () => this.closeModalForm() } ;
+        this.showModalForm( "error-response", err.response.statusText, "red",
+            <div> {caption}: {content} </div>,
+            buttons
+        ) ;
+    }
+
     showErrorMsg( content ) {
         // show the error message in a modal dialog
         this.ask( content, "error",
@@ -327,7 +344,10 @@ export default class App extends React.Component
         this.setState( { startupTasks: this.state.startupTasks } ) ;
     }
 
-    focusQueryString() { this._searchFormRef.current.focusQueryString() ; }
+    focusQueryString() {
+        if ( this._searchFormRef.current )
+            this._searchFormRef.current.focusQueryString() ;
+    }
 
     isTestMode() { return process.env.REACT_APP_TEST_MODE ; }
     isFakeUploads() { return this._fakeUploads ; }

web/src/ModalForm.js

@@ -34,6 +34,8 @@ export default class ModalForm extends React.Component
         // close the dialog
         if ( this.props.buttons.Cancel )
             this.props.buttons.Cancel() ;
+        else if ( this.props.buttons.Close )
+            this.props.buttons.Close() ;
     }
 
 }