better error handling

docs/index.html

@@ -14,7 +14,7 @@
   <!-- <link rel="stylesheet" href="https://www.w3.org/StyleSheets/Core/Modernist" type="text/css"> -->
 
   <title>webgpu-waveform</title>
-  <script type="module" crossorigin src="./assets/index-DAtS7Z2d.js"></script>
+  <script type="module" crossorigin src="./assets/index-wbvvEkbe.js"></script>
   <link rel="stylesheet" crossorigin href="./assets/index-BXBGKmvD.css">
 </head>
 

src/lib/GPUWaveform.tsx

@@ -43,5 +43,15 @@ export const GPUWaveform = forwardRef(function GPUWaveformImpl(
     // renderer?.render(Math.round(Math.exp((Math.log(1000) / 100) * scale)));
   }, [audioBuffer, height, offset, renderer, scale, width]);
 
+  if (renderer.status === "error") {
+    return (
+      <pre style={{ color: "red" }}>
+        {renderer.error instanceof Error
+          ? renderer.error.message
+          : String(renderer.error)}
+      </pre>
+    );
+  }
+
   return <canvas ref={mergeRefs([canvasRef, ref])} {...props} />;
 });

src/lib/GPUWaveformRenderer.ts

@@ -20,11 +20,15 @@ export class GPUWaveformRenderer {
 
   // TODO: make other things use create too for consistency and to remove duplication. `createPipeline` should be private.
   static async create(canvas: HTMLCanvasElement, channelData: Float32Array) {
-    const context = nullthrows(canvas.getContext("webgpu"));
     if (!navigator.gpu) {
-      throw new Error("WebGPU not supported on this browser.");
+      throw new Error("WebGPU not supported in this browser.");
     }
 
+    const context = nullthrows(
+      canvas.getContext("webgpu"),
+      "nil webgpu context"
+    );
+
     const adapter = await navigator.gpu.requestAdapter();
     if (adapter == null) {
       throw new Error("No appropriate GPUAdapter found.");

src/lib/useWaveformRenderer.tsx

@@ -19,7 +19,10 @@ export function useWaveformRenderer(
   });
 
   useEffect(() => {
-    const canvas = nullthrows(canvasRef.current);
+    const canvas = nullthrows(
+      canvasRef.current,
+      "expected canvas to not be nil"
+    );
     const channelData = audioBuffer.getChannelData(0);
 
     GPUWaveformRenderer.create(canvas, channelData)

src/lib/useWebGPU.tsx

@@ -39,15 +39,21 @@ async function initializeWebGPU() {
   return [canvasFormat, adapter, device, encoder] as const;
 }
 
-export function useWebGPU(
+function useWebGPU(
   canvasRef: React.RefObject<HTMLCanvasElement>
 ): WebGPUStatus {
   const [status, setStatus] = useState<WebGPUStatus>({ status: "waiting" });
   useEffect(() => {
     async function main() {
       try {
-        const canvas = nullthrows(canvasRef.current);
-        const context = nullthrows(canvas.getContext("webgpu"));
+        const canvas = nullthrows(
+          canvasRef.current,
+          "expected canvas to not be nil"
+        );
+        const context = nullthrows(
+          canvas.getContext("webgpu"),
+          "null webgpu context"
+        );
 
         const [canvasFormat, adapter, device, encoder] =
           await initializeWebGPU();

src/site/Examples.tsx

@@ -1,9 +1,8 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { GPUWaveform } from "../lib/GPUWaveform";
-import { audioContext, loadSound, usePromise } from "./utils";
-import { useWaveformRenderer } from "../lib/useWaveformRenderer";
 import { GPUWaveformRenderer } from "../lib/GPUWaveformRenderer";
-import { nullthrows } from "../lib/useWebGPU";
+import { useWaveformRenderer } from "../lib/useWaveformRenderer";
+import { audioContext, loadSound, usePromise } from "./utils";
 
 export function Example({
   render,
@@ -93,6 +92,16 @@ export function Example1({ audioBuffer }: { audioBuffer: AudioBuffer }) {
     example1(canvasRef.current, audioBuffer).catch(console.error);
   }, [renderer, audioBuffer]);
 
+  if (renderer.status === "error") {
+    return (
+      <pre style={{ color: "red" }}>
+        {renderer.error instanceof Error
+          ? renderer.error.message
+          : String(renderer.error)}
+      </pre>
+    );
+  }
+
   return <canvas ref={canvasRef} width={300} height={100} />;
 }
 
@@ -116,6 +125,16 @@ export function Example2({
     renderer.instance.render(audioBuffer.length / width, 0, width, height);
   }, [renderer, audioBuffer, width, height]);
 
+  if (renderer.status === "error") {
+    return (
+      <pre style={{ color: "red" }}>
+        {renderer.error instanceof Error
+          ? renderer.error.message
+          : String(renderer.error)}
+      </pre>
+    );
+  }
+
   return <canvas ref={canvasRef} width={width} height={height} />;
 }