Fix: frontend handle autocomplete failure gracefully (#4903)

src-ui/src/app/components/app-frame/app-frame.component.spec.ts

@@ -19,7 +19,7 @@ import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
 import { RemoteVersionService } from 'src/app/services/rest/remote-version.service'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { of, throwError } from 'rxjs'
+import { Observable, of, tap, throwError } from 'rxjs'
 import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
@@ -298,6 +298,21 @@ describe('AppFrameComponent', () => {
     expect(autocompleteSpy).toHaveBeenCalled()
   }))
 
+  it('should handle autocomplete backend failure gracefully', fakeAsync(() => {
+    const serviceAutocompleteSpy = jest.spyOn(searchService, 'autocomplete')
+    serviceAutocompleteSpy.mockReturnValue(
+      throwError(() => new Error('autcomplete failed'))
+    )
+    // serviceAutocompleteSpy.mockReturnValue(of([' world']))
+    let result
+    component.searchAutoComplete(of('hello')).subscribe((res) => {
+      result = res
+    })
+    tick(250)
+    expect(serviceAutocompleteSpy).toHaveBeenCalled()
+    expect(result).toEqual([])
+  }))
+
   it('should support reset search field', () => {
     const resetSpy = jest.spyOn(component, 'resetSearchField')
     const input = (fixture.nativeElement as HTMLDivElement).querySelector(

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -8,6 +8,7 @@ import {
   map,
   switchMap,
   first,
+  catchError,
 } from 'rxjs/operators'
 import { PaperlessDocument } from 'src/app/data/paperless-document'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
@@ -166,7 +167,13 @@ export class AppFrameComponent
         }
       }),
       switchMap((term) =>
-        term.length < 2 ? from([[]]) : this.searchService.autocomplete(term)
+        term.length < 2
+          ? from([[]])
+          : this.searchService.autocomplete(term).pipe(
+              catchError(() => {
+                return from([[]])
+              })
+            )
       )
     )