First example of actual error handling for exception in the waveform workers

src/main/Timeline.tsx

@@ -310,6 +310,7 @@ const Waveforms: React.FC<{}> = () => {
 
   // Update based on current fetching status
   const [images, setImages] = useState<string[]>([])
+  const [waveformWorkerError, setWaveformWorkerError] = useState<boolean>(false)
 
   const waveformDisplayTestStyle = css({
     display: 'flex',
@@ -343,7 +344,13 @@ const Waveforms: React.FC<{}> = () => {
           var file = new File([blob], blob)
 
           // Start waveform worker with blob
-          const waveformWorker : any = new Waveform({type: 'img', width: '2000', height: '230', samples: 100000, media: file});
+          const waveformWorker : any = new Waveform({type: 'img', width: '2000', height: '230', samples: 100000, media: file})
+
+          waveformWorker.onarne = function(error: string) {
+            setWaveformWorkerError(true)
+            console.log("Waveform could not be generated:" + error)
+          }
+
           // When done, save path to generated waveform img
           waveformWorker.oncomplete = function(image: any, numSamples: any) {
             images.push(image)
@@ -354,6 +361,7 @@ const Waveforms: React.FC<{}> = () => {
             }
           }
         }
+
         xhr.send()
       })
     }
@@ -367,7 +375,12 @@ const Waveforms: React.FC<{}> = () => {
           <img key={index} alt='Waveform' src={image ? image : ""} css={{minHeight: 0}}></img>
         )
       );
-    } else {
+    } else if (waveformWorkerError) {
+      return (
+        <div>{"Waveform could not be generated"}</div>
+      );
+    }
+    else {
       return (
         <>
           <FontAwesomeIcon icon={faSpinner} spin size="3x"/>

src/util/waveform.js

@@ -43,7 +43,10 @@ export function Waveform(opts) {
           });
         }
       })
-      .catch(e => console.log(e));
+      .catch((e) => {
+        console.log("Waveform Worker: " + e);
+        this.onarne = e.toString();
+      });
   }
 
   var _completeFuncs = [];
@@ -62,6 +65,21 @@ export function Waveform(opts) {
       }
     }
   });
+
+  var _error = "";
+  Object.defineProperty(this, 'onarne', {
+    get: function() {
+      return _error;
+    },
+    set: function(fn, opt) {
+      if (typeof fn == 'function') {
+        fn(_error);
+      } else {
+        _error = fn
+      }
+      return;
+    }
+  });
 }
 
 Waveform.prototype = {