FIX: Adding debugging and fixing media-optimization-worker issues (#14099)

When we encountered an error with the media-optimization-worker,
we stopped the worker, which made it so further messages were not
received when optimizing images in parallel. Removed this based
on an option.

Also added more debugging lines to help track down issues.

app/assets/javascripts/discourse/app/initializers/register-media-optimization-upload-processor.js

@@ -9,10 +9,10 @@ export default {
       addComposerUploadProcessor(
         { action: "optimizeJPEG" },
         {
-          optimizeJPEG: (data) =>
+          optimizeJPEG: (data, opts) =>
             container
               .lookup("service:media-optimization-worker")
-              .optimizeImage(data),
+              .optimizeImage(data, opts),
         }
       );
     }

app/assets/javascripts/discourse/app/lib/uppy-media-optimization-plugin.js

@@ -23,7 +23,7 @@ export default class UppyMediaOptimization extends Plugin {
 
     this.uppy.emit("preprocess-progress", this.pluginClass, file);
 
-    return this.optimizeFn(file)
+    return this.optimizeFn(file, { stopWorkerOnError: !this.runParallel })
       .then((optimizedFile) => {
         if (!optimizedFile) {
           warn("Nothing happened, possible error or other restriction.", {

app/assets/javascripts/discourse/app/services/media-optimization-worker.js

@@ -12,18 +12,20 @@ export default class MediaOptimizationWorkerService extends Service {
   promiseResolvers = null;
 
   startWorker() {
+    this.logIfDebug("Starting media-optimization-worker");
     this.worker = new Worker(this.workerUrl); // TODO come up with a workaround for FF that lacks type: module support
   }
 
   stopWorker() {
+    this.logIfDebug("Stopping media-optimization-worker...");
     this.worker.terminate();
     this.worker = null;
   }
 
-  ensureAvailiableWorker(usingUppy) {
+  ensureAvailiableWorker() {
     if (!this.worker) {
       this.startWorker();
-      this.registerMessageHandler(usingUppy);
+      this.registerMessageHandler();
       this.appEvents.on("composer:closed", this, "stopWorker");
     }
   }
@@ -35,22 +37,25 @@ export default class MediaOptimizationWorkerService extends Service {
     }
   }
 
-  optimizeImage(data) {
-    const usingUppy = data.id && data.id.includes("uppy");
+  optimizeImage(data, opts = {}) {
+    this.usingUppy = data.id && data.id.includes("uppy");
     this.promiseResolvers = this.promiseResolvers || {};
+    this.stopWorkerOnError = opts.hasOwnProperty("stopWorkerOnError")
+      ? opts.stopWorkerOnError
+      : true;
 
-    let file = usingUppy ? data : data.files[data.index];
+    let file = this.usingUppy ? data : data.files[data.index];
     if (!/(\.|\/)(jpe?g|png|webp)$/i.test(file.type)) {
-      return usingUppy ? Promise.resolve() : data;
+      return this.usingUppy ? Promise.resolve() : data;
     }
     if (
       file.size <
       this.siteSettings
         .composer_media_optimization_image_bytes_optimization_threshold
     ) {
-      return usingUppy ? Promise.resolve() : data;
+      return this.usingUppy ? Promise.resolve() : data;
     }
-    this.ensureAvailiableWorker(usingUppy);
+    this.ensureAvailiableWorker();
     return new Promise(async (resolve) => {
       this.logIfDebug(`Transforming ${file.name}`);
 
@@ -59,14 +64,14 @@ export default class MediaOptimizationWorkerService extends Service {
 
       let imageData;
       try {
-        if (usingUppy) {
+        if (this.usingUppy) {
           imageData = await fileToImageData(file.data);
         } else {
           imageData = await fileToImageData(file);
         }
       } catch (error) {
         this.logIfDebug(error);
-        return usingUppy ? resolve() : resolve(data);
+        return this.usingUppy ? resolve() : resolve(data);
       }
 
       this.worker.postMessage(
@@ -108,7 +113,7 @@ export default class MediaOptimizationWorkerService extends Service {
     });
   }
 
-  registerMessageHandler(usingUppy) {
+  registerMessageHandler() {
     this.worker.onmessage = (e) => {
       switch (e.data.type) {
         case "file":
@@ -119,7 +124,7 @@ export default class MediaOptimizationWorkerService extends Service {
             `Finished optimization of ${optimizedFile.name} new size: ${optimizedFile.size}.`
           );
 
-          if (usingUppy) {
+          if (this.usingUppy) {
             this.promiseResolvers[optimizedFile.name](optimizedFile);
           } else {
             let data = this.currentComposerUploadData;
@@ -129,8 +134,15 @@ export default class MediaOptimizationWorkerService extends Service {
 
           break;
         case "error":
-          this.stopWorker();
-          if (usingUppy) {
+          this.logIfDebug(
+            `Handling error message from image optimization for ${e.data.fileName}.`
+          );
+
+          if (this.stopWorkerOnError) {
+            this.stopWorker();
+          }
+
+          if (this.usingUppy) {
             this.promiseResolvers[e.data.fileName]();
           } else {
             this.promiseResolvers[e.data.fileName](