Reusable component & pipe for http error rendering

frontend/src/app/bisq/bisq-address/bisq-address.component.html

@@ -98,11 +98,9 @@
   </ng-template>
 
   <ng-template [ngIf]="error">
-    <div class="text-center">
-      Error loading address data.
-      <br>
-      <i>{{ error.error }}</i>
-    </div>
+    <app-http-error [error]="error">
+      <span i18n="address.error.loading-address-data">Error loading address data.</span>
+    </app-http-error>
   </ng-template>
 
 </div>

frontend/src/app/components/address/address.component.html

@@ -135,11 +135,10 @@
 
   <ng-template [ngIf]="error">
     <br>
-    <div class="text-center">
-      <span i18n="address.error.loading-address-data">Error loading address data.</span>
-      <br>
-      <ng-template #displayServerError><i class="small">({{ error.error }})</i></ng-template>
-      <ng-template [ngIf]="error.status === 413 || error.status === 405 || error.status === 504" [ngIfElse]="displayServerError">
+    <ng-template [ngIf]="error.status === 413 || error.status === 405 || error.status === 504" [ngIfElse]="displayServerError">
+      <div class="text-center">
+        <span i18n="address.error.loading-address-data">Error loading address data.</span>
+        <br>
         <ng-container i18n="Electrum server limit exceeded error">
           <i>There many transactions on this address, more than your backend can handle. See more on <a href="/docs/faq#address-lookup-issues">setting up a stronger backend</a>.</i>
           <br><br>
@@ -150,9 +149,14 @@
         <br>
         <a href="http://mempoolhqx4isw62xs7abwphsq7ldayuidyx2v2oethdhhj6mlo2r6ad.onion/address/{{ addressString }}" target="_blank">http://mempoolhqx4isw62xs7abwphsq7ldayuidyx2v2oethdhhj6mlo2r6ad.onion/address/{{ addressString }}</a>
         <br><br>
-        <i class="small">({{ error.error }})</i>
-      </ng-template>
-    </div>
+        <i class="small">({{ error | httpErrorMsg }})</i>
+      </div>
+    </ng-template>
+    <ng-template #displayServerError>
+      <app-http-error [error]="error">
+        <span i18n="address.error.loading-address-data">Error loading address data.</span>
+      </app-http-error>
+    </ng-template>
   </ng-template>
 
 </div>

frontend/src/app/components/address/address.component.ts

@@ -140,10 +140,22 @@ export class AddressComponent implements OnInit, OnDestroy {
           if (!fetchTxs.length) {
             return of([]);
           }
-          return this.apiService.getTransactionTimes$(fetchTxs);
+          return this.apiService.getTransactionTimes$(fetchTxs).pipe(
+            catchError((err) => {
+              this.isLoadingAddress = false;
+              this.isLoadingTransactions = false;
+              this.error = err;
+              this.seoService.logSoft404();
+              console.log(err);
+              return of([]);
+            })
+          );
         })
       )
-      .subscribe((times: number[]) => {
+      .subscribe((times: number[] | null) => {
+        if (!times) {
+          return;
+        }
         times.forEach((time, index) => {
           this.tempTransactions[this.timeTxIndexes[index]].firstSeen = time;
         });

frontend/src/app/components/asset/asset.component.html

@@ -146,13 +146,10 @@
   </ng-template>
 
   <ng-template [ngIf]="error">
-    <div class="text-center">
+    <app-http-error [error]="error">
       <span i18n="asset.error.loading-asset-data">Error loading asset data.</span>
-      <br>
-      <i>{{ error.error }}</i>
-    </div>
+    </app-http-error>
   </ng-template>
-
 </div>
 
 <br>

frontend/src/app/components/assets/assets.component.html

@@ -46,9 +46,7 @@
 </ng-template>
 
 <ng-template [ngIf]="error">
-  <div class="text-center">
-    <ng-container i18n="Asset data load error">Error loading assets data.</ng-container>
-    <br>
-    <i>{{ error.error }}</i>
-  </div>
+  <app-http-error [error]="error">
+    <span i18n="Asset data load error">Error loading assets data.</span>
+  </app-http-error>
 </ng-template>

frontend/src/app/components/block/block.component.html

@@ -338,14 +338,12 @@
     <app-transactions-list [transactions]="transactions" [paginated]="true" [blockTime]="block.timestamp"></app-transactions-list>
 
     <ng-template [ngIf]="transactionsError">
-      <div class="text-center">
-        <br>
+      <br>
+      <app-http-error [error]="transactionsError">
         <span i18n="error.general-loading-data">Error loading data.</span>
-        <br><br>
-        <i>{{ transactionsError.status }}: {{ transactionsError.error }}</i>
-        <br>
-        <br>
-      </div>
+      </app-http-error>
+      <br>
+      <br>
     </ng-template>
 
     <ng-template [ngIf]="isLoadingTransactions && !transactionsError">
@@ -378,11 +376,9 @@
     <br>
   </ng-template>
   <ng-template [ngIf]="error">
-    <div class="text-center">
+    <app-http-error [error]="error">
       <span i18n="error.general-loading-data">Error loading data.</span>
-      <br><br>
-      <i>{{ error.status }}: {{ error.error }}</i>
-    </div>
+    </app-http-error>
   </ng-template>
 
   <ng-template #headerLoader>

frontend/src/app/components/transaction/transaction.component.html

@@ -517,9 +517,9 @@
     </div>
 
     <ng-template #errorTemplate>
-      <div class="text-center">
-        <h3>{{ error.error }}</h3>
-      </div>
+      <app-http-error [error]="error">
+        <span i18n="transaction.error.loading-transaction-data">Error loading transaction data.</span>
+      </app-http-error>
     </ng-template>
   </ng-template>
 

frontend/src/app/lightning/channel/channel-preview.component.html

@@ -66,9 +66,7 @@
 </div>
 
 <ng-template [ngIf]="error">
-  <div class="text-center">
+  <app-http-error [error]="error">
     <span i18n="error.general-loading-data">Error loading data.</span>
-    <br><br>
-    <i>{{ error.status }}: {{ error.error }}</i>
-  </div>
+  </app-http-error>
 </ng-template>

frontend/src/app/shared/components/http-error/http-error.component.html

@@ -0,0 +1,4 @@
+<div class="http-error">
+  <p><b><ng-content></ng-content></b></p>
+  <i class="small">({{ error | httpErrorMsg }})</i>
+</div>

frontend/src/app/shared/components/http-error/http-error.component.scss

@@ -0,0 +1,5 @@
+.http-error {
+  width: 100%;
+  margin: 1em auto;
+  text-align: center;
+}

frontend/src/app/shared/components/http-error/http-error.component.ts

@@ -0,0 +1,11 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-http-error',
+  templateUrl: './http-error.component.html',
+  styleUrls: ['./http-error.component.scss']
+})
+export class HttpErrorComponent {
+  @Input() error: HttpErrorResponse | null;
+}

frontend/src/app/shared/pipes/http-error-pipe/http-error.pipe.ts

@@ -0,0 +1,9 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'httpErrorMsg' })
+export class HttpErrorPipe implements PipeTransform {
+  transform(e: HttpErrorResponse | null): string {
+    return e ? `${e.status}: ${e.statusText}` : '';
+  }
+}

frontend/src/app/shared/shared.module.ts

@@ -21,6 +21,7 @@ import { ScriptpubkeyTypePipe } from './pipes/scriptpubkey-type-pipe/scriptpubke
 import { BytesPipe } from './pipes/bytes-pipe/bytes.pipe';
 import { WuBytesPipe } from './pipes/bytes-pipe/wubytes.pipe';
 import { FiatCurrencyPipe } from './pipes/fiat-currency.pipe';
+import { HttpErrorPipe } from './pipes/http-error-pipe/http-error.pipe';
 import { BlockchainComponent } from '../components/blockchain/blockchain.component';
 import { TimeComponent } from '../components/time/time.component';
 import { ClipboardComponent } from '../components/clipboard/clipboard.component';
@@ -104,6 +105,7 @@ import { ClockFaceComponent } from '../components/clock-face/clock-face.componen
 import { ClockComponent } from '../components/clock/clock.component';
 import { CalculatorComponent } from '../components/calculator/calculator.component';
 import { BitcoinsatoshisPipe } from '../shared/pipes/bitcoinsatoshis.pipe';
+import { HttpErrorComponent } from '../shared/components/http-error/http-error.component';
 
 import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-directives/weight-directives';
 
@@ -133,6 +135,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     Decimal2HexPipe,
     FeeRoundingPipe,
     FiatCurrencyPipe,
+    HttpErrorPipe,
     ColoredPriceDirective,
     BrowserOnlyDirective,
     ServerOnlyDirective,
@@ -208,6 +211,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     AccelerationsListComponent,
     AccelerationStatsComponent,
     PendingStatsComponent,
+    HttpErrorComponent,
   ],
   imports: [
     CommonModule,
@@ -262,6 +266,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     VbytesPipe,
     WuBytesPipe,
     FiatCurrencyPipe,
+    HttpErrorPipe,
     CeilPipe,
     ShortenStringPipe,
     CapAddressPipe,
@@ -327,6 +332,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     AccelerationsListComponent,
     AccelerationStatsComponent,
     PendingStatsComponent,
+    HttpErrorComponent,
 
     MempoolBlockOverviewComponent,
     ClockchainComponent,