show parser errors

script/viewer.tsx

@@ -40,6 +40,7 @@ ready(async () => {
 })
 
 const parse = async (data: ArrayBuffer, parseProgress: HTMLProgressElement, stored: boolean) => {
+    try {
         const header = parseHeaderFromBuffer(data);
         console.log(header);
         const parser = new AsyncParser(data, (progress) => parseProgress.value = progress);
@@ -48,4 +49,8 @@ const parse = async (data: ArrayBuffer, parseProgress: HTMLProgressElement, stor
         const page = document.querySelector('.viewer-page');
 
         render(() => <Analyser parser={parser} header={header} isStored={stored}/>, page);
+    } catch (e) {
+        const errorDiv: HTMLDivElement = document.querySelector(`#error`);
+        errorDiv.textContent = e.message;
+    }
 }

src/main.rs

@@ -214,7 +214,7 @@ async fn main() -> Result<()> {
     match config.listen {
         Listen::Tcp { address, port } => {
             let addr = SocketAddr::from((address, port));
-            info!("listening on {}", addr);
+            info!("listening on http://{}", addr);
             Server::bind(&addr)
                 .serve(service)
                 .with_graceful_shutdown(ctrl_c)

src/pages/viewer.rs

@@ -63,6 +63,7 @@ impl Page for ViewerPage<'_> {
                     }
                 }
                 progress.parse.onlyscript min = "0" max = "100" value = "0" {}
+                #error {}
             }
             script module src = (script) type = "text/javascript" {}
             link rel="stylesheet" type="text/css" href=(style_url);

style/pages/viewer.css

@@ -16,3 +16,10 @@ progress {
 body > footer {
     display: none;
 }
+
+#error {
+    color: var(--button-critical);
+    text-align: center;
+    font-size: 2em;
+    padding-top: 2em;
+}