From 85f4cae71dd7ca1d3b33f556062fd0f192f7e8de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81bastien=20De=CC=81le=CC=80ze?=
 <sebastien.deleze@rero.ch>
Date: Fri, 24 Jul 2020 09:14:34 +0200
Subject: [PATCH] records: handle errors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Improves errors handling in search, detail and edit views.
* Adds an error component to display the error.
* Adds an interface for error objects.
* Removes `console.log` when a http error is catched.
* Sends an error object with status and title when a http error occurs.
* Types the parameters of subscribers to `getRecords` observable.
* Exports error component for using it in host's projects.
* Closes rero/sonar-ui#114.

Co-Authored-by: Sébastien Délèze <sebastien.deleze@rero.ch>
---
 projects/rero/ng-core/src/lib/core.module.ts  |  5 +-
 .../src/lib/error/error.component.html        | 24 +++++++
 .../src/lib/error/error.component.spec.ts     | 48 ++++++++++++++
 .../ng-core/src/lib/error/error.component.ts  | 31 +++++++++
 projects/rero/ng-core/src/lib/error/error.ts  | 25 +++++++
 .../lib/record/detail/detail.component.html   |  2 +-
 .../record/detail/detail.component.spec.ts    |  7 +-
 .../src/lib/record/detail/detail.component.ts |  3 +-
 .../lib/record/editor/editor.component.html   |  1 +
 .../src/lib/record/editor/editor.component.ts | 50 ++++++++------
 .../src/lib/record/record.service.spec.ts     | 17 +++--
 .../ng-core/src/lib/record/record.service.ts  | 65 +++++++++++++------
 .../search/record-search.component.html       |  4 +-
 .../record/search/record-search.component.ts  | 10 +--
 projects/rero/ng-core/src/public-api.ts       |  1 +
 15 files changed, 235 insertions(+), 58 deletions(-)
 create mode 100644 projects/rero/ng-core/src/lib/error/error.component.html
 create mode 100644 projects/rero/ng-core/src/lib/error/error.component.spec.ts
 create mode 100644 projects/rero/ng-core/src/lib/error/error.component.ts
 create mode 100644 projects/rero/ng-core/src/lib/error/error.ts

diff --git a/projects/rero/ng-core/src/lib/core.module.ts b/projects/rero/ng-core/src/lib/core.module.ts
index 36583bd3..4c59034a 100644
--- a/projects/rero/ng-core/src/lib/core.module.ts
+++ b/projects/rero/ng-core/src/lib/core.module.ts
@@ -23,6 +23,7 @@ import { ModalModule } from 'ngx-bootstrap/modal';
 import { NgxSpinnerModule } from 'ngx-spinner';
 import { ToastrModule } from 'ngx-toastr';
 import { DialogComponent } from './dialog/dialog.component';
+import { ErrorComponent } from './error/error.component';
 import { CallbackArrayFilterPipe } from './pipe/callback-array-filter.pipe';
 import { DefaultPipe } from './pipe/default.pipe';
 import { Nl2brPipe } from './pipe/nl2br.pipe';
@@ -49,7 +50,8 @@ import { MenuComponent } from './widget/menu/menu.component';
     MenuComponent,
     TranslateLanguagePipe,
     TextReadMoreComponent,
-    SortByKeysPipe
+    SortByKeysPipe,
+    ErrorComponent
   ],
   imports: [
     CommonModule,
@@ -80,6 +82,7 @@ import { MenuComponent } from './widget/menu/menu.component';
     SearchInputComponent,
     MenuComponent,
     TextReadMoreComponent,
+    ErrorComponent,
     SortByKeysPipe,
     NgxSpinnerModule
   ],
diff --git a/projects/rero/ng-core/src/lib/error/error.component.html b/projects/rero/ng-core/src/lib/error/error.component.html
new file mode 100644
index 00000000..14d83e2f
--- /dev/null
+++ b/projects/rero/ng-core/src/lib/error/error.component.html
@@ -0,0 +1,24 @@
+<!--
+ RERO angular core
+ Copyright (C) 2020 RERO
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, version 3 of the License.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+<div class="text-center my-5">
+  <p class="display-4">
+    <i class="fa fa-flash mr-3"></i>
+    <span class="text-muted">{{ error.status }}</span>
+    {{ error.title }}
+  </p>
+  <h5 class="mt-5">{{ error.message | default: ('You cannot access this page.' | translate) }}</h5>
+</div>
diff --git a/projects/rero/ng-core/src/lib/error/error.component.spec.ts b/projects/rero/ng-core/src/lib/error/error.component.spec.ts
new file mode 100644
index 00000000..997c53f2
--- /dev/null
+++ b/projects/rero/ng-core/src/lib/error/error.component.spec.ts
@@ -0,0 +1,48 @@
+/*
+ * RERO angular core
+ * Copyright (C) 2020 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { DefaultPipe } from '../pipe/default.pipe';
+import { ErrorComponent } from './error.component';
+
+describe('ErrorComponent', () => {
+  let component: ErrorComponent;
+  let fixture: ComponentFixture<ErrorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ErrorComponent, DefaultPipe ],
+      imports: [
+        TranslateModule.forRoot({
+          loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
+        })
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ErrorComponent);
+    component = fixture.componentInstance;
+    component.error = { title: 'Error', status: 500 };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/rero/ng-core/src/lib/error/error.component.ts b/projects/rero/ng-core/src/lib/error/error.component.ts
new file mode 100644
index 00000000..82969a77
--- /dev/null
+++ b/projects/rero/ng-core/src/lib/error/error.component.ts
@@ -0,0 +1,31 @@
+/*
+ * RERO angular core
+ * Copyright (C) 2020 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Component, Input } from '@angular/core';
+import { Error } from './error';
+
+/**
+ * Component for displaying errors.
+ */
+@Component({
+  selector: 'ng-core-error',
+  templateUrl: './error.component.html'
+})
+export class ErrorComponent {
+  // Error object containing title, status and optionally a message.
+  @Input()
+  error: Error;
+}
diff --git a/projects/rero/ng-core/src/lib/error/error.ts b/projects/rero/ng-core/src/lib/error/error.ts
new file mode 100644
index 00000000..8c818352
--- /dev/null
+++ b/projects/rero/ng-core/src/lib/error/error.ts
@@ -0,0 +1,25 @@
+/*
+ * RERO angular core
+ * Copyright (C) 2020 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * Interface representing an error.
+ */
+export interface Error {
+  status: number;
+  title: string;
+  message?: string;
+}
diff --git a/projects/rero/ng-core/src/lib/record/detail/detail.component.html b/projects/rero/ng-core/src/lib/record/detail/detail.component.html
index bd20c538..951fa587 100644
--- a/projects/rero/ng-core/src/lib/record/detail/detail.component.html
+++ b/projects/rero/ng-core/src/lib/record/detail/detail.component.html
@@ -15,7 +15,7 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <div class="main-content">
-  <div class="alert alert-danger" *ngIf="error">{{ error | translate }}</div>
+  <ng-core-error [error]="error" *ngIf="error"></ng-core-error>
   <div class="float-right ml-4 mt-2 mb-4" *ngIf="record && adminMode.can">
       <a href class="btn btn-sm btn-primary" [routerLink]="['../../edit', record.metadata.pid]"
           *ngIf="updateStatus && updateStatus.can" id="detail-edit-button">
diff --git a/projects/rero/ng-core/src/lib/record/detail/detail.component.spec.ts b/projects/rero/ng-core/src/lib/record/detail/detail.component.spec.ts
index 40ec8498..ef554a4a 100644
--- a/projects/rero/ng-core/src/lib/record/detail/detail.component.spec.ts
+++ b/projects/rero/ng-core/src/lib/record/detail/detail.component.spec.ts
@@ -24,6 +24,8 @@ import { ActionStatus } from '@rero/ng-core/public-api';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { ToastrModule } from 'ngx-toastr';
 import { Observable, of, throwError } from 'rxjs';
+import { ErrorComponent } from '../../error/error.component';
+import { DefaultPipe } from '../../pipe/default.pipe';
 import { RecordService } from '../record.service';
 import { DetailComponent } from './detail.component';
 import { RecordDetailDirective } from './detail.directive';
@@ -78,7 +80,9 @@ describe('RecordDetailComponent', () => {
       declarations: [
         DetailComponent,
         JsonComponent,
-        RecordDetailDirective
+        RecordDetailDirective,
+        ErrorComponent,
+        DefaultPipe
       ],
       imports: [
         TranslateModule.forRoot({
@@ -174,7 +178,6 @@ describe('RecordDetailComponent', () => {
     fixture.detectChanges();
 
     expect(component.record).toBe(null);
-    expect(component.error).toBe('error');
   });
 
   it('should use a custom view component for displaying record', () => {
diff --git a/projects/rero/ng-core/src/lib/record/detail/detail.component.ts b/projects/rero/ng-core/src/lib/record/detail/detail.component.ts
index 869c41ab..9311f146 100644
--- a/projects/rero/ng-core/src/lib/record/detail/detail.component.ts
+++ b/projects/rero/ng-core/src/lib/record/detail/detail.component.ts
@@ -21,6 +21,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { NgxSpinnerService } from 'ngx-spinner';
 import { ToastrService } from 'ngx-toastr';
 import { Observable, Subscription } from 'rxjs';
+import { Error } from '../../error/error';
 import { ActionStatus } from '../action-status';
 import { RecordUiService } from '../record-ui.service';
 import { RecordService } from '../record.service';
@@ -61,7 +62,7 @@ export class DetailComponent implements OnInit, OnDestroy {
   /**
    * Error message
    */
-  error: string = null;
+  error: Error;
 
   /**
    * Admin mode for CRUD operations
diff --git a/projects/rero/ng-core/src/lib/record/editor/editor.component.html b/projects/rero/ng-core/src/lib/record/editor/editor.component.html
index 15b60f6b..f40eb7f7 100644
--- a/projects/rero/ng-core/src/lib/record/editor/editor.component.html
+++ b/projects/rero/ng-core/src/lib/record/editor/editor.component.html
@@ -78,3 +78,4 @@
     </form>
   </div>
 </div>
+<ng-core-error [error]="error" *ngIf="error"></ng-core-error>
diff --git a/projects/rero/ng-core/src/lib/record/editor/editor.component.ts b/projects/rero/ng-core/src/lib/record/editor/editor.component.ts
index c7e0f2f9..a23a07f5 100644
--- a/projects/rero/ng-core/src/lib/record/editor/editor.component.ts
+++ b/projects/rero/ng-core/src/lib/record/editor/editor.component.ts
@@ -27,6 +27,8 @@ import { ToastrService } from 'ngx-toastr';
 import { combineLatest, Observable, of, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 import { ApiService } from '../../api/api.service';
+import { Error } from '../../error/error';
+import { Record } from '../record';
 import { RecordUiService } from '../record-ui.service';
 import { RecordService } from '../record.service';
 import { EditorService } from './editor.service';
@@ -74,6 +76,9 @@ export class EditorComponent implements OnInit, OnChanges, OnDestroy {
   // store pid on edit mode
   pid = null;
 
+  // If an error occurred, it is stored, to display in interface.
+  error: Error;
+
   // subscribers
   private _subscribers: Subscription[] = [];
 
@@ -171,26 +176,33 @@ export class EditorComponent implements OnInit, OnChanges, OnDestroy {
             );
         }
 
-        combineLatest([schema$, record$]).subscribe(([schemaform, data]) => {
-          // Set schema
-          this.setSchema(schemaform.schema);
+        combineLatest([schema$, record$]).subscribe(
+          ([schemaform, data]) => {
+            // Set schema
+            this.setSchema(schemaform.schema);
+
+            // Check permissions and set record
+            if (data.result && data.result.can === false) {
+              this._toastrService.error(
+                this._translateService.instant('You cannot update this record'),
+                this._translateService.instant(this.recordType)
+              );
+              this._location.back();
+            } else {
+              this._setModel(data.record);
+            }
 
-          // Check permissions and set record
-          if (data.result && data.result.can === false) {
-            this._toastrService.error(
-              this._translateService.instant('You cannot update this record'),
-              this._translateService.instant(this.recordType)
-            );
-            this._location.back();
-          } else {
-            this._setModel(data.record);
+            // add a small amount of time as the editor needs additionnal time to
+            // resolve all async tasks
+            setTimeout(() => this._spinner.hide(), 500);
+            this.loadingChange.emit(false);
+          },
+          (error) => {
+            this.error = error;
+            this._spinner.hide();
+            this.loadingChange.emit(false);
           }
-
-          // add a small amount of time as the editor needs additionnal time to
-          // resolve all async tasks
-          setTimeout(() => this._spinner.hide(), 500);
-          this.loadingChange.emit(false);
-        });
+        );
       }
     );
   }
@@ -467,7 +479,7 @@ export class EditorComponent implements OnInit, OnChanges, OnDestroy {
           f.templateOptions.options = this._recordService
             .getRecords(recordType, query, 1, RecordService.MAX_REST_RESULTS_SIZE)
             .pipe(
-              map(data =>
+              map((data: Record) =>
                 data.hits.hits.map((record: any) => {
                   return {
                     label: formOptions.remoteOptions.labelField && formOptions.remoteOptions.labelField in record.metadata
diff --git a/projects/rero/ng-core/src/lib/record/record.service.spec.ts b/projects/rero/ng-core/src/lib/record/record.service.spec.ts
index 8adebf74..75bb86c1 100644
--- a/projects/rero/ng-core/src/lib/record/record.service.spec.ts
+++ b/projects/rero/ng-core/src/lib/record/record.service.spec.ts
@@ -17,7 +17,9 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { getTestBed, TestBed } from '@angular/core/testing';
+import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { ApiService } from '../api/api.service';
+import { Error } from '../error/error';
 import { Record } from './record';
 import { RecordService } from './record.service';
 
@@ -34,7 +36,10 @@ describe('RecordService', () => {
 
     TestBed.configureTestingModule({
       imports: [
-        HttpClientTestingModule
+        HttpClientTestingModule,
+        TranslateModule.forRoot({
+          loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
+        })
       ],
       providers: [
         { provide: ApiService, useValue: spy }
@@ -68,7 +73,7 @@ describe('RecordService', () => {
       links: {}
     };
 
-    service.getRecords('documents', '', 1, 10, [{ key: 'author', values: ['John doe'] }]).subscribe(data => {
+    service.getRecords('documents', '', 1, 10, [{ key: 'author', values: ['John doe'] }]).subscribe((data: Record) => {
       expect(data.hits.total).toBe(2);
     });
 
@@ -82,8 +87,8 @@ describe('RecordService', () => {
 
     service.getRecords('documents').subscribe(
       () => fail('should have failed with the 404 error'),
-      (error: HttpErrorResponse) => {
-        expect(error).toContain('Something bad happened');
+      (error: Error) => {
+        expect(error.title).toBe('Not found');
       });
 
     const req = httpMock.expectOne(request => request.method === 'GET' && request.url === url + '/');
@@ -96,8 +101,8 @@ describe('RecordService', () => {
 
     service.getRecords('documents').subscribe(
       () => fail('should have failed with the 404 error'),
-      (error: HttpErrorResponse) => {
-        expect(error).toContain('Something bad happened');
+      (error: Error) => {
+        expect(error.title).toBe('An error occurred');
       });
 
     const req = httpMock.expectOne(request => request.method === 'GET' && request.url === url + '/');
diff --git a/projects/rero/ng-core/src/lib/record/record.service.ts b/projects/rero/ng-core/src/lib/record/record.service.ts
index 3ce02ba9..a2fb1bd9 100644
--- a/projects/rero/ng-core/src/lib/record/record.service.ts
+++ b/projects/rero/ng-core/src/lib/record/record.service.ts
@@ -17,9 +17,11 @@
 import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { FormlyFieldConfig } from '@ngx-formly/core';
+import { TranslateService } from '@ngx-translate/core';
 import { Observable, of, Subject, throwError } from 'rxjs';
 import { catchError, debounceTime, map, tap } from 'rxjs/operators';
 import { ApiService } from '../api/api.service';
+import { Error } from '../error/error';
 import { resolveRefs } from './editor/utils';
 import { Record } from './record';
 
@@ -73,8 +75,13 @@ export class RecordService {
    * Constructor
    * @param _http HttpClient
    * @param _apiService ApiService
+   * @param _translateService Translate service.
    */
-  constructor(private _http: HttpClient, private _apiService: ApiService) { }
+  constructor(
+    private _http: HttpClient,
+    private _apiService: ApiService,
+    private _translateService: TranslateService
+  ) {}
 
   /**
    * Get records filtered by given parameters.
@@ -94,7 +101,7 @@ export class RecordService {
     preFilters: object = {},
     headers: any = null,
     sort: string = null
-  ): Observable<Record> {
+  ): Observable<Record | Error> {
     // Build query string
     let httpParams = new HttpParams().set('q', query);
     httpParams = httpParams.append('page', '' + page);
@@ -119,7 +126,7 @@ export class RecordService {
         params: httpParams,
         headers: this.createRequestHeaders(headers),
       })
-      .pipe(catchError(this.handleError));
+      .pipe(catchError((error) => this.handleError(error)));
   }
 
   /**
@@ -127,12 +134,12 @@ export class RecordService {
    * @param type - string, type of record
    * @param pid - string, PID to remove
    */
-  delete(type: string, pid: string): Observable<void> {
+  delete(type: string, pid: string): Observable<void | Error> {
     return this._http
       .delete<void>(this._apiService.getEndpointByType(type, true) + '/' + pid)
       .pipe(
         tap(() => this.onDelete.next(this.createEvent(type, { pid }))),
-        catchError(this.handleError)
+        catchError((error) => this.handleError(error))
       );
   }
 
@@ -146,7 +153,7 @@ export class RecordService {
     pid: string,
     resolve = 0,
     headers: any = {}
-  ): Observable<any> {
+  ): Observable<any | Error> {
     return this._http
       .get<Record>(
         `${this._apiService.getEndpointByType(
@@ -157,7 +164,7 @@ export class RecordService {
           headers: this.createRequestHeaders(headers),
         }
       )
-      .pipe(catchError(this.handleError));
+      .pipe(catchError(error => this.handleError(error)));
   }
 
   /**
@@ -228,7 +235,7 @@ export class RecordService {
       query += ` NOT pid:${excludePid}`;
     }
     return this.getRecords(recordType, query, 1, 1).pipe(
-      map((res) => res.hits.total),
+      map((res: Record) => res.hits.total),
       map((total) => (total ? { alreadyTaken: value } : null)),
       debounceTime(1000)
     );
@@ -275,7 +282,7 @@ export class RecordService {
       query += ` NOT pid:${excludePid}`;
     }
     return this.getRecords(recordType, query, 1, 1).pipe(
-      map((res) => res.hits.total),
+      map((res: Record) => res.hits.total),
       map((total) => (total ? { alreadyTaken: value } : null)),
       debounceTime(500)
     );
@@ -285,19 +292,35 @@ export class RecordService {
    * Error handling during api call process.
    * @param error - HttpErrorResponse
    */
-  private handleError(error: HttpErrorResponse) {
-    if (error.error instanceof ErrorEvent) {
-      // A client-side or network error occurred. Handle it accordingly.
-      console.error('An error occurred:', error.error.message);
-    } else {
-      // The backend returned an unsuccessful response code.
-      // The response body may contain clues as to what went wrong,
-      console.error(
-        `Backend returned code ${error.status}, ` + `body was: ${error.error}`
-      );
+  private handleError(error: HttpErrorResponse): Observable<Error> {
+    let title: string;
+    let status = error.status;
+
+    switch (status) {
+      case 400: {
+        title = this._translateService.instant('Bad request');
+        break;
+      }
+      case 401: {
+        title = this._translateService.instant('Unauthorized');
+        break;
+      }
+      case 403: {
+        title = this._translateService.instant('Forbidden');
+        break;
+      }
+      case 404: {
+        title = this._translateService.instant('Not found');
+        break;
+      }
+      default: {
+        title = this._translateService.instant('An error occurred');
+        status = 500;
+        break;
+      }
     }
-    // return an observable with a user-facing error message
-    return throwError('Something bad happened; please try again later.');
+
+    return throwError({ status, title });
   }
 
   /**
diff --git a/projects/rero/ng-core/src/lib/record/search/record-search.component.html b/projects/rero/ng-core/src/lib/record/search/record-search.component.html
index c4f3af56..0fcfdb27 100644
--- a/projects/rero/ng-core/src/lib/record/search/record-search.component.html
+++ b/projects/rero/ng-core/src/lib/record/search/record-search.component.html
@@ -14,9 +14,7 @@
  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="alert alert-danger" *ngIf="error; else showComponent">
-  {{ error | translate }}
-</div>
+<ng-core-error [error]="error" *ngIf="error; else showComponent"></ng-core-error>
 <ng-template #showComponent>
   <ul class="nav nav-tabs" *ngIf="types.length > 1">
     <li class="nav-item" *ngFor="let type of types">
diff --git a/projects/rero/ng-core/src/lib/record/search/record-search.component.ts b/projects/rero/ng-core/src/lib/record/search/record-search.component.ts
index 68007263..28593f93 100644
--- a/projects/rero/ng-core/src/lib/record/search/record-search.component.ts
+++ b/projects/rero/ng-core/src/lib/record/search/record-search.component.ts
@@ -21,11 +21,13 @@ import { JSONSchema7 } from 'json-schema';
 import { NgxSpinnerService } from 'ngx-spinner';
 import { Observable, of, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { ApiService } from '../../api/api.service';
+import { Error } from '../../error/error';
 import { ActionStatus } from '../action-status';
+import { Record } from '../record';
 import { RecordUiService } from '../record-ui.service';
 import { RecordService } from '../record.service';
 import { AggregationsFilter, RecordSearchService } from './record-search.service';
-import { ApiService } from '../../api/api.service';
 
 @Component({
   selector: 'ng-core-record-search',
@@ -124,7 +126,7 @@ export class RecordSearchComponent implements OnInit, OnChanges, OnDestroy {
   /**
    * Error message when something wrong happend during a search
    */
-  error: string = null;
+  error: Error;
 
   /**
    * Check if record can be added
@@ -220,7 +222,7 @@ export class RecordSearchComponent implements OnInit, OnChanges, OnDestroy {
       this._recordService.getRecords(
         type.key, '', 1, 1, [],
         this._config.preFilters || {},
-        this._config.listHeaders || null).subscribe(records => {
+        this._config.listHeaders || null).subscribe((records: Record) => {
           type.total = records.hits.total;
         });
     }
@@ -621,7 +623,7 @@ export class RecordSearchComponent implements OnInit, OnChanges, OnDestroy {
       this._config.listHeaders || null,
       this.sort
     ).subscribe(
-      records => {
+      (records: Record) => {
         this.hits = records.hits;
         this.aggregations$(records.aggregations).subscribe((aggr: any) => {
           this.aggregations = this.aggregationsOrder(aggr);
diff --git a/projects/rero/ng-core/src/public-api.ts b/projects/rero/ng-core/src/public-api.ts
index 3c3536a8..cf217d8a 100644
--- a/projects/rero/ng-core/src/public-api.ts
+++ b/projects/rero/ng-core/src/public-api.ts
@@ -61,3 +61,4 @@ export * from './lib/utils/sort-by-keys';
 export * from './lib/utils/utils';
 export * from './lib/validator/time.validator';
 export * from './lib/validator/unique.validator';
+export * from './lib/error/error.component';