Further fixes; improve error handling

ui/index.js

@@ -1,6 +1,6 @@
 import { h, render, Component } from 'preact';
 import { CaptureButton } from './capture-button.js';
-import { connect } from './ops.js';
+import { connect, rethrowIfCritical } from './ops.js';
 import { Preview } from './preview.js';
 import { Widget } from './widget.js';
 
@@ -69,26 +69,36 @@ class App extends Component {
     }
     // We should reach this only once.
     while (this.connection) {
-      let config = await this.connection.schedule(context =>
-        context.configToJS()
-      );
-      if (!isDebug) {
-        delete config.children.actions;
-        delete config.children.other;
+      try {
+        let config = await this.connection.schedule(context =>
+          context.configToJS()
+        );
+        if (!isDebug) {
+          delete config.children.actions;
+          delete config.children.other;
+        }
+        this.setState({
+          type: 'Config',
+          config
+        });
+      } catch (err) {
+        rethrowIfCritical(err);
+        console.error('Could not refresh config:', err);
       }
-      this.setState({
-        type: 'Config',
-        config
-      });
       while (true) {
         await new Promise(resolve =>
           requestIdleCallback(resolve, { timeout: 500 })
         );
-        let hadEvents = await this.connection.schedule(context =>
-          context.consumeEvents()
-        );
-        if (hadEvents) {
-          break;
+        try {
+          let hadEvents = await this.connection.schedule(context =>
+            context.consumeEvents()
+          );
+          if (hadEvents) {
+            break;
+          }
+        } catch (err) {
+          rethrowIfCritical(err);
+          console.error('Could not consume events:', err);
         }
       }
     }

ui/ops.js

@@ -4,29 +4,31 @@ import initModule from '../libapi.mjs';
 
 const ModulePromise = initModule();
 
+export function rethrowIfCritical(err) {
+  // If it's precisely Error, it's a custom error; anything else - SyntaxError,
+  // WebAssembly.RuntimeError, TypeError, etc. - is treated as critical here.
+  if (err.constructor !== Error) {
+    throw err;
+  }
+}
+
 export async function connect() {
   const Module = await ModulePromise;
 
   let context = await new Module.Context();
   let supportedOps = await context.supportedOps();
 
+  /** @type {Promise<unknown>} */
   let queue = Promise.resolve();
 
   /** Schedules an exclusive async operation on the global context.
-   * @template T
+   * @template T,T2
    * @param {(ctx: Context) => Promise<T>} op
    * @returns {Promise<T>}
    */
   function schedule(op) {
     let res = queue.then(() => op(context));
-
-    // Queue should ignore result values as well as errors from singular ops.
-    queue = res.then(
-      () => {},
-      () => {}
-    );
-
-    // Result should contain the unwrapped value or error.
+    queue = res.catch(rethrowIfCritical);
     return res;
   }
 

ui/preview.js

@@ -1,4 +1,5 @@
 import { h, Component, createRef } from 'preact';
+import { rethrowIfCritical } from './ops.js';
 
 export const isDebug = new URLSearchParams(location.search).has('debug');
 
@@ -87,8 +88,9 @@ export class Preview extends Component {
           updateCanvasSize();
         }
         canvasCtx.transferFromImageBitmap(img);
-      } catch (error) {
-        console.error(error);
+      } catch (err) {
+        rethrowIfCritical(err);
+        console.error('Could not refresh preview:', err);
       }
       await new Promise(resolve => requestAnimationFrame(resolve));
       this.stats?.update();