Basic error handling

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss

@@ -4,11 +4,6 @@ form {
   position: relative;
 }
 
-.alert-heading {
-  font-size: 80%;
-  font-weight: bold;
-}
-
 .alerts-hidden {
   .btn {
     line-height: 1;

src-ui/src/app/components/split-merge/split-merge.component.html

@@ -121,7 +121,12 @@
     </div>
   </div>
   <div class="col-lg-6">
-    <ng-container *ngIf="previewUrls.length > 1">
+    <ngb-alert *ngIf="error" type="danger" class="mt-2 mb-0" [dismissible]="false">
+      <h6 class="alert-heading" i18n>An error occurred during operation</h6>
+      <p class="mb-0 pb-1" i18n>Please check document settings and parts.</p>
+      <p class="mb-0 pb-1 small"><ng-container i18n>Message</ng-container>: <span class="font-italic">{{error}}</span></p>
+    </ngb-alert>
+    <ng-container *ngIf="!error && previewUrls.length > 1">
       <ul ngbNav #previewNav="ngbNav" class="nav-tabs">
         <li *ngFor="let previewUrl of previewUrls; let j = index" [ngbNavItem]="j">
           <a class="bg-light" ngbNavLink><ng-container i18n>Document</ng-container> {{j + 1}}</a>
@@ -138,7 +143,7 @@
       </ul>
       <div [ngbNavOutlet]="previewNav"></div>
     </ng-container>
-    <div *ngIf="previewUrls.length <= 1" class="preview-container text-center bg-light">
+    <div *ngIf="!error && previewUrls.length <= 1" class="preview-container text-center bg-light">
       <h6 class="my-2 text-muted" i18n>Preview</h6>
       <div *ngIf="loading" class="spinner-border" role="status">
         <span class="sr-only" i18n>Loading...</span>

src-ui/src/app/components/split-merge/split-merge.component.ts

@@ -31,6 +31,8 @@ export class SplitMergeComponent implements OnInit, OnDestroy {
 
   private previewSub: Subscription
 
+  public error: string
+
   constructor(
     public splitMergeService: SplitMergeService,
     private documentService: DocumentService,
@@ -47,6 +49,7 @@ export class SplitMergeComponent implements OnInit, OnDestroy {
         this.save(true)
       } else {
         this.previewUrls = []
+        this.error = undefined
       }
     })
     this.previewDebounce$.next()
@@ -103,14 +106,18 @@ export class SplitMergeComponent implements OnInit, OnDestroy {
     this.previewUrls = []
     this.splitMergeService.executeSplitMerge(preview, this.delete_source_documents, this.metadata_setting).subscribe(
       result => {
-        console.log('API split_merge result:', result)
         this.loading = false
+        this.error = undefined
         if (preview) {
           this.previewUrls = result.map(r => this.splitMergeService.getPreviewUrl(r))
         } else {
           this.splitMergeService.clear()
           this.router.navigate([""])
         }
+      },
+      error => {
+        this.error = error
+        this.loading = false
       }
     )
   }

src-ui/src/app/services/split-merge.service.ts

@@ -1,6 +1,7 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 import { environment } from 'src/environments/environment';
 import { PaperlessDocument, PaperlessDocumentPart, PaperlessDocumentSeparator } from '../data/paperless-document';
 import { SplitMergeMetadata, SplitMergeRequest } from '../data/split-merge-request';
@@ -79,7 +80,14 @@ export class SplitMergeService {
       metadata: metadata,
       split_merge_plan: split_merge_plan
     }
-    return this.http.post<string[]>(`${environment.apiBaseUrl}split_merge/`, request)
+    return this.http.post<string[]>(`${environment.apiBaseUrl}split_merge/`, request).pipe(
+      catchError(this.handleError)
+    )
+  }
+
+  handleError(error: HttpErrorResponse) {
+    console.log('API split_merge result error:', error)
+    return throwError(error.message)
   }
 
   getPreviewUrl(previewKey: string) {

src-ui/src/theme.scss

@@ -4,4 +4,9 @@ $primaryFaded: #d1ddd2;
 
 $theme-colors: (
   "primary": $primary
-);
+);
+
+.alert-heading {
+  font-size: 80%;
+  font-weight: bold;
+}