Improve UI error handling

Browser logs are now going to show both Apps Script and Cloud errors as well, and fail as soon as possible for unexpected errors. In addition, UI timeouts now behave according to the duration of the input video. A 10 minute time out is added per 1 minute of video, up to a max timeout of 1h. Change-Id: Iae2f471ad97d7cf05a4167f82bcf2e8aa239db3c
google-marketing-solutions · Oct 18, 2024 · e9524c0 · e9524c0
1 parent ac220eb
commit e9524c0
Show file tree

Hide file tree

Showing 7 changed files with 178 additions and 92 deletions.
diff --git a/img/overview.png b/img/overview.png
diff --git a/ui/src/ui/src/app/api-calls/api-calls.service.ts b/ui/src/ui/src/app/api-calls/api-calls.service.ts
@@ -16,8 +16,9 @@
 
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable, NgZone } from '@angular/core';
-import { Observable, of, retry, switchMap, timer } from 'rxjs';
+import { catchError, Observable, of, retry, switchMap, timer } from 'rxjs';
 import { CONFIG } from '../../../../config';
+
 import {
   ApiCalls,
   GeneratePreviewsResponse,
@@ -55,6 +56,13 @@ export class ApiCallsService implements ApiCalls {
             subscriber.complete();
           });
         })
+        .withFailureHandler((error: Error) => {
+          console.error(
+            'Could not retrieve the user auth token! Error: ',
+            error
+          );
+          throw error;
+        })
         .getUserAuthToken();
     });
   }
@@ -84,6 +92,10 @@ export class ApiCallsService implements ApiCalls {
               console.log('Upload complete!', response);
               const videoFilePath = `${CONFIG.cloudStorage.authenticatedEndpointBase}/${CONFIG.cloudStorage.bucket}/${encodeURIComponent(folder)}/input.mp4`;
               return of([folder, videoFilePath]);
+            }),
+            catchError(error => {
+              console.error('Upload failed with error: ', error);
+              throw error;
             })
           )
       )
@@ -111,13 +123,11 @@ export class ApiCallsService implements ApiCalls {
       retry({
         count: maxRetries,
         delay: (error, retryCount) => {
-          if (
-            (error.status && error.status !== 404) ||
-            retryCount >= maxRetries
-          ) {
-            throw new Error(`Received an unexpected error: ${error}`);
+          if (error.status && error.status === 404 && retryCount < maxRetries) {
+            console.log('Expected output not available yet, retrying...');
+            return timer(retryDelay);
           }
-          return timer(retryDelay);
+          throw error;
         },
       })
     );
@@ -137,6 +147,13 @@ export class ApiCallsService implements ApiCalls {
             subscriber.complete();
           });
         })
+        .withFailureHandler((error: Error) => {
+          console.error(
+            'Encountered an unexpected error while generating variants! Error: ',
+            error
+          );
+          throw error;
+        })
         .generateVariants(gcsFolder, settings);
     });
   }
@@ -156,6 +173,13 @@ export class ApiCallsService implements ApiCalls {
             subscriber.complete();
           });
         })
+        .withFailureHandler((error: Error) => {
+          console.error(
+            'Encountered an unexpected error while generating format previews! Error: ',
+            error
+          );
+          throw error;
+        })
         .generatePreviews(analysis, segments, settings);
     });
   }
@@ -171,6 +195,13 @@ export class ApiCallsService implements ApiCalls {
             subscriber.complete();
           });
         })
+        .withFailureHandler((error: Error) => {
+          console.error(
+            'Could not retrieve previous runs from GCS! Error: ',
+            error
+          );
+          throw error;
+        })
         .getRunsFromGcs();
     });
   }
@@ -189,6 +220,13 @@ export class ApiCallsService implements ApiCalls {
             subscriber.complete();
           });
         })
+        .withFailureHandler((error: Error) => {
+          console.error(
+            'Encountered an unexpected error while rendering variants! Error: ',
+            error
+          );
+          throw error;
+        })
         .renderVariants(gcsFolder, renderQueue);
     });
   }
@@ -210,6 +248,10 @@ export class ApiCallsService implements ApiCalls {
             subscriber.complete();
           });
         })
+        .withFailureHandler((error: Error) => {
+          console.error('Could not retrieve the Web App URL! Error: ', error);
+          throw error;
+        })
         .getWebAppUrl();
     });
   }

diff --git a/ui/src/ui/src/app/app.component.html b/ui/src/ui/src/app/app.component.html
@@ -508,12 +508,7 @@
       </div>
     </mat-expansion-panel>
   </mat-sidenav-content>
-  <mat-sidenav
-    #renderQueueSidenav
-    position="end"
-    autoFocus="false"
-    style="width: 35rem"
-  >
+  <mat-sidenav #renderQueueSidenav position="end" style="width: 35rem">
     <div style="margin-bottom: auto">
       @for (variant of renderQueue; track variant; let i = $index) {
         <mat-card