Improved export error handling (#117)

Author: hristoiankov

cider-app/package-lock.json

@@ -45,7 +45,7 @@
     "electron-builder-notarize": "^1.5.2",
     "file-saver": "^2.0.5",
     "handlebars": "^4.7.7",
-    "html-to-image": "^1.11.11",
+    "html-to-image": "^1.11.13",
     "jszip": "^3.10.0",
     "mime": "^3.0.0",
     "mime-wrapper": "^2.0.0",

cider-app/package.json

@@ -9,6 +9,7 @@ import { CardToHtmlPipe } from '../shared/pipes/template-to-html.pipe';
 import * as htmlToImage from 'html-to-image';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import GeneralUtils from '../shared/utils/general-utils';
+import { error } from 'console';
 
 @Component({
   selector: 'app-card-preview',
@@ -27,6 +28,7 @@ export class CardPreviewComponent implements OnInit, AfterViewChecked, OnChanges
   assetUrls: any;
   uuid: string  = uuid();
   cachedImageUrl?: string;
+  invalidTemplate: boolean = false;
   private isLoadedSubject: AsyncSubject<boolean>;
   private isCacheLoadedSubject: AsyncSubject<boolean>;
 
@@ -67,12 +69,19 @@ export class CardPreviewComponent implements OnInit, AfterViewChecked, OnChanges
       lastValueFrom(this.isLoadedSubject).then(() => {
         this.renderCacheService.getOrSet(this.getHash(), 
           () => GeneralUtils.delay(2000).then(() => this.toImageUrl()))
-        .subscribe((cachedImageUrl) => {
-            this.cachedImageUrl = cachedImageUrl;
-            GeneralUtils.delay(1000).then(() => {
-              this.isCacheLoadedSubject.next(true);
-              this.isCacheLoadedSubject.complete();
-            });
+        .subscribe({
+          next: (cachedImageUrl) => {
+              this.cachedImageUrl = cachedImageUrl;
+              GeneralUtils.delay(1000).then(() => {
+                this.isCacheLoadedSubject.next(true);
+                this.isCacheLoadedSubject.complete();
+              });
+          },
+          error: (error) => {
+            this.invalidTemplate = true;
+            this.isCacheLoadedSubject.error('Failed to generate card image');
+            this.isCacheLoadedSubject.complete();
+          }
         });
       });
     }

cider-app/src/app/card-preview/card-preview.component.ts

@@ -34,6 +34,8 @@ export class RenderCacheService {
         const url = URL.createObjectURL(file);
         imageSubject.next(url);
         imageSubject.complete();
+      }).catch(err => {
+        imageSubject.error('Failed to generate cache image');
       });
       return imageSubject.asObservable();
     }

cider-app/src/app/data-services/services/render-cache.service.ts

@@ -166,6 +166,7 @@
         </p-card>
     </div>
 </div>
+<p-confirmDialog [style]="{width: '450px'}"></p-confirmDialog>
 <app-export-selection-dialog [(visible)]="exportSelectionDialogVisible"
     (onApply)="updateSelection($event)" [records]="originalCards"></app-export-selection-dialog>
 <p-dialog header="Exporting Data" [(visible)]="displayLoading" [style]="{width: '450px'}" [modal]="true" >

cider-app/src/app/export-cards/export-cards.component.html

@@ -11,11 +11,13 @@ import FileUtils from '../shared/utils/file-utils';
 import { lastValueFrom } from 'rxjs';
 import StringUtils from '../shared/utils/string-utils';
 import GeneralUtils from '../shared/utils/general-utils';
+import { ConfirmationService } from 'primeng/api';
 
 @Component({
   selector: 'app-export-cards',
   templateUrl: './export-cards.component.html',
-  styleUrls: ['./export-cards.component.scss']
+  styleUrls: ['./export-cards.component.scss'],
+    providers: [ConfirmationService]
 })
 export class ExportCardsComponent implements OnInit {
   private static readonly SINGULAR_EXPORT = 'singular-export';
@@ -76,7 +78,8 @@ export class ExportCardsComponent implements OnInit {
   ];
 
   constructor(cardsService: CardsService, 
-    public templatesService: CardTemplatesService) {
+    public templatesService: CardTemplatesService,
+    private confirmationService: ConfirmationService) {
       cardsService.getAll().then(cards => {
         // check cards for front/back templates being defined
         const cardsWithTemplatesDefined = cards.filter(card => card.backCardTemplateId && card.frontCardTemplateId);
@@ -160,14 +163,31 @@ export class ExportCardsComponent implements OnInit {
   public export() {
     if (this.exportType === ExportCardsComponent.SHEET_EXPORT 
       && this.selectedPaper.name === 'Tabletop Simulator') {
-      this.exportCardSheetsAsImages();
+      this.exportCardSheetsAsImages().catch(err => {
+        this.displayErrorDialog(err);
+      });;
     } else if (this.exportType === ExportCardsComponent.SHEET_EXPORT) {
-      this.exportCardSheets();
+      this.exportCardSheets().catch(err => {
+        this.displayErrorDialog(err);
+      });
     } else {
-      this.exportIndividualImages();
+      this.exportIndividualImages().catch(err => {
+        this.displayErrorDialog(err);
+      });;
     }
   }
 
+  private displayErrorDialog(message: string) {
+    this.confirmationService.confirm({
+      message: message + '\nCheck for errors in this template and card data.',
+      header: 'Error',
+      acceptLabel: "OK",
+      icon: 'pi pi-exclamation-triangle',
+      rejectVisible: false,
+      accept: () => {return;},
+    });
+  }
+
   private async prerenderCardImages() {
     const sliceSize = 3;
     const renderSlices = this.sliceIntoChunks(this.cards, sliceSize);
@@ -182,7 +202,13 @@ export class ExportCardsComponent implements OnInit {
         this.loadingInfo = 'Pre-rendering cards ' + (sliceSize * index) 
           + '-' + (sliceSize * index + slice.length - 1) + '/' + this.cards.length + '...';
         await GeneralUtils.delay(1000);
-        const promisedCards$ = this.cardSheetCards.map(card => lastValueFrom(card.isCacheLoaded()));
+        const promisedCards$ = this.cardSheetCards.map(cardPreview => lastValueFrom(cardPreview.isCacheLoaded()).catch(() => {
+          this.loadingInfo = 'Failed to load card cache.';
+          this.loadingPercent = 0;
+          this.displayLoading = false;
+          this.renderCache = false;
+          return Promise.reject('Failed to render card "' + cardPreview.card.name + '" with template "' + cardPreview.template.name + '".');
+        }));
         const completedPromises = await Promise.all(promisedCards$);
         this.loadingPercent += 100.0/(renderSlices.length);
         return completedPromises;
@@ -210,7 +236,13 @@ export class ExportCardsComponent implements OnInit {
           this.loadingInfo = 'Rendering sheet ' + sheetIndex + ' ' 
             + (showFront ? 'front' : 'back') + ' card images...';
           await GeneralUtils.delay(1000);
-          const promisedCards$ = this.cardSheetCards.map(card => lastValueFrom(card.isCacheLoaded()));
+          const promisedCards$ = this.cardSheetCards.map(cardPreview => lastValueFrom(cardPreview.isCacheLoaded()).catch(() => {
+            this.loadingInfo = 'Failed to load card cache.';
+            this.loadingPercent = 0;
+            this.displayLoading = false;
+            this.renderCache = false;
+            return Promise.reject('Failed to render card "' + cardPreview.card.name + '" with template "' + cardPreview.template.name + '".');
+          }));
           await Promise.all(promisedCards$);
 
           this.loadingInfo = 'Generating sheet ' + sheetIndex + ' ' 
@@ -252,12 +284,18 @@ export class ExportCardsComponent implements OnInit {
         this.sheet = sheet;
         this.loadingInfo = 'Rendering sheet ' + sheetIndex + ' card images...';
         await GeneralUtils.delay(1000);
-        const promisedCards$ = this.cardSheetCards.map(card => lastValueFrom(card.isCacheLoaded()));
+        const promisedCards$ = this.cardSheetCards.map(cardPreview => lastValueFrom(cardPreview.isCacheLoaded()).catch(() => {
+          this.loadingInfo = 'Failed to load card cache.';
+          this.loadingPercent = 0;
+          this.displayLoading = false;
+          this.renderCache = false;
+          return Promise.reject('Failed to render card "' + cardPreview.card.name + '" with template "' + cardPreview.template.name + '".');
+        }));
         await Promise.all(promisedCards$);
 
         this.loadingInfo = 'Generating sheet ' + sheetIndex + ' images...';
         const cardSheets = await Promise.all(this.cardSheets.map(cardSheet => limit(() => {
-          return htmlToImage.toPng((<any>cardSheet).nativeElement, {pixelRatio: 1.0});
+          return htmlToImage.toPng((<any>cardSheet).nativeElement, {pixelRatio: 1.0, onImageErrorHandler: (error) => {console.log('error', error);}});
         })));
         this.loadingPercent += 100.0/(this.slicedCards.length + 1);
         return cardSheets;
@@ -304,7 +342,9 @@ export class ExportCardsComponent implements OnInit {
     this.loadingInfo = 'Generating card images...';
     const limit = pLimit(3);
     const frontCards$ = this.frontCards.map(async cardPreview => {
-      await lastValueFrom(cardPreview.isCacheLoaded());
+      await lastValueFrom(cardPreview.isCacheLoaded()).catch(() => {
+        return Promise.reject('Failed to render card "' + cardPreview.card.name + '" with template "' + cardPreview.template.name + '".');
+      });
       const imgUri = await limit(() => htmlToImage.toPng((<any>cardPreview).element.nativeElement, 
       {pixelRatio: this.individualExportPixelRatio}));
       const imgIdentifier = this.individualExportUseCardName 
@@ -314,7 +354,9 @@ export class ExportCardsComponent implements OnInit {
       return this.dataUrlToFile(imgUri, imgName);
     });
     const backCards$ = this.backCards.map(async cardPreview => {
-      await lastValueFrom(cardPreview.isCacheLoaded());
+      await lastValueFrom(cardPreview.isCacheLoaded()).catch(() => {
+        return Promise.reject('Failed to render card "' + cardPreview.card.name + '" with template "' + cardPreview.template.name + '".');
+      });
       const imgUri = await limit(() => htmlToImage.toPng((<any>cardPreview).element.nativeElement, 
       {pixelRatio: this.individualExportPixelRatio}));
       const imgIdentifier = this.individualExportUseCardName 
@@ -324,7 +366,7 @@ export class ExportCardsComponent implements OnInit {
       return this.dataUrlToFile(imgUri, imgName);
     });
     const allCards$ = frontCards$.concat(backCards$);
-    Promise.all(this.promisesProgress(allCards$, () => this.loadingPercent += 100.0/(allCards$.length + 1)))
+    return Promise.all(this.promisesProgress(allCards$, () => this.loadingPercent += 100.0/(allCards$.length + 1)))
       .then(promisedImages => {
         this.loadingInfo = 'Zipping up files...';
         return this.zipFiles(promisedImages);
@@ -337,6 +379,13 @@ export class ExportCardsComponent implements OnInit {
         this.loadingPercent = 100;
         this.displayLoading = false
         this.renderCache = false;
+      })
+      .catch(err => {
+        this.loadingInfo = 'Failed to load card cache.';
+        this.loadingPercent = 0;
+        this.displayLoading = false;
+        this.renderCache = false;
+        return Promise.reject(err);
       });
   }