Add more context to error messages

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

@@ -364,7 +364,7 @@
   </ng-template>
   <ng-template [ngIf]="error">
     <app-http-error [error]="error">
-      <span i18n="error.general-loading-data">Error loading data.</span>
+      <span i18n="block.error.loading-block-data">Error loading block data.</span>
     </app-http-error>
   </ng-template>
 

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

@@ -1,6 +1,6 @@
 <app-indexing-progress></app-indexing-progress>
 
-<div class="container-xl">
+<div class="container-xl" *ngIf="!error; else errorTemplate">
 
   <!-- Pool overview -->
   <div *ngIf="poolStats$ | async as poolStats; else loadingMain">
@@ -460,3 +460,10 @@
 <ng-template #emptyTd>
   <td class="text-center"></td>
 </ng-template>
+
+<ng-template #errorTemplate>
+  <br>
+  <app-http-error [error]="error">
+    <span i18n="pool.error.loading-pool-data">Error loading pool data.</span>
+  </app-http-error>
+</ng-template>

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

@@ -9,6 +9,7 @@ import { StateService } from '../../services/state.service';
 import { selectPowerOfTen } from '../../bitcoin.utils';
 import { formatNumber } from '@angular/common';
 import { SeoService } from '../../services/seo.service';
+import { HttpErrorResponse } from '@angular/common/http';
 
 interface AccelerationTotal {
   cost: number,
@@ -33,6 +34,7 @@ export class PoolComponent implements OnInit {
   blocks$: Observable<BlockExtended[]>;
   oobFees$: Observable<AccelerationTotal[]>;
   isLoading = true;
+  error: HttpErrorResponse | null = null;
 
   chartOptions: EChartsOption = {};
   chartInitOptions = {
@@ -105,6 +107,10 @@ export class PoolComponent implements OnInit {
           }
           return this.apiService.getPoolBlocks$(this.slug, this.blocks[this.blocks.length - 1]?.height);
         }),
+        catchError((err) => {
+          this.error = err;
+          return of([]);
+        }),
         tap((newBlocks) => {
           this.blocks = this.blocks.concat(newBlocks);
         }),

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

@@ -4,6 +4,6 @@ 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}` : '';
+    return e ? `${e.status} ${e.statusText}: ${e.error}` : '';
   }
 }