fix: handle async errors in background filters pipeline (#1571)

Our background filters pipeline has an async part that runs out of band
with the rest of the pipeline. Errors originating in this async part
(like #1565) were not properly handled, didn't invoke the `onError`
callback, and caused unhandled rejection errors in the console.

This PR fixes these issues.

Author: myandrienko

packages/video-filters-web/src/webgl2/resizingStage.ts

@@ -15,6 +15,7 @@ export function buildResizingStage(
   texCoordBuffer: WebGLBuffer,
   tflite: TFLite,
   segmentationConfig: SegmentationParams,
+  onError?: (error: any) => void,
 ) {
   const fragmentShaderSource = glsl`#version 300 es
 
@@ -81,7 +82,9 @@ export function buildResizingStage(
       gl.RGBA,
       gl.UNSIGNED_BYTE,
       outputPixels,
-    );
+    ).catch((error: any) => {
+      onError?.(error);
+    });
 
     for (let i = 0; i < outputPixelCount; i++) {
       const tfliteIndex = tfliteInputMemoryOffset + i * 3;

packages/video-filters-web/src/webgl2/webgl2Pipeline.ts

@@ -22,6 +22,7 @@ export function buildWebGL2Pipeline(
   canvas: HTMLCanvasElement,
   tflite: TFLite,
   segmentationConfig: SegmentationParams,
+  onError?: (error: any) => void,
 ) {
   const gl = canvas.getContext('webgl2')!;
   if (!gl) throw new Error('WebGL2 is not supported');
@@ -95,6 +96,7 @@ export function buildWebGL2Pipeline(
     texCoordBuffer,
     tflite,
     segmentationConfig,
+    onError,
   );
   const loadSegmentationStage = buildSoftmaxStage(
     gl,