Block transactions list error handling
This commit is contained in:
		
							parent
							
								
									b4beb29f31
								
							
						
					
					
						commit
						a1fb89963c
					
				@ -197,7 +197,18 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
    <app-transactions-list [transactions]="transactions" [paginated]="true"></app-transactions-list>
 | 
					    <app-transactions-list [transactions]="transactions" [paginated]="true"></app-transactions-list>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <ng-template [ngIf]="isLoadingTransactions">
 | 
					    <ng-template [ngIf]="transactionsError">
 | 
				
			||||||
 | 
					      <div class="text-center">
 | 
				
			||||||
 | 
					        <br>
 | 
				
			||||||
 | 
					        <span i18n="error.general-loading-data">Error loading data.</span>
 | 
				
			||||||
 | 
					        <br><br>
 | 
				
			||||||
 | 
					        <i>{{ transactionsError.status }}: {{ transactionsError.error }}</i>
 | 
				
			||||||
 | 
					        <br>
 | 
				
			||||||
 | 
					        <br>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    </ng-template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <ng-template [ngIf]="isLoadingTransactions && !transactionsError">
 | 
				
			||||||
      <div class="text-center mb-4" class="tx-skeleton">
 | 
					      <div class="text-center mb-4" class="tx-skeleton">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        <ng-container *ngIf="(txsLoadingStatus$ | async) as txsLoadingStatus; else headerLoader">
 | 
					        <ng-container *ngIf="(txsLoadingStatus$ | async) as txsLoadingStatus; else headerLoader">
 | 
				
			||||||
@ -271,9 +282,9 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
  <ng-template [ngIf]="error">
 | 
					  <ng-template [ngIf]="error">
 | 
				
			||||||
    <div class="text-center">
 | 
					    <div class="text-center">
 | 
				
			||||||
      <span i18n="block.error.loading-block-data">Error loading block data.</span>
 | 
					      <span i18n="error.general-loading-data">Error loading data.</span>
 | 
				
			||||||
      <br><br>
 | 
					      <br><br>
 | 
				
			||||||
      <i>{{ error.error }}</i>
 | 
					      <i>{{ error.code }}: {{ error.error }}</i>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
  </ng-template>
 | 
					  </ng-template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -38,6 +38,7 @@ export class BlockComponent implements OnInit, OnDestroy {
 | 
				
			|||||||
  showDetails = false;
 | 
					  showDetails = false;
 | 
				
			||||||
  showPreviousBlocklink = true;
 | 
					  showPreviousBlocklink = true;
 | 
				
			||||||
  showNextBlocklink = true;
 | 
					  showNextBlocklink = true;
 | 
				
			||||||
 | 
					  transactionsError: any = null;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  subscription: Subscription;
 | 
					  subscription: Subscription;
 | 
				
			||||||
  keyNavigationSubscription: Subscription;
 | 
					  keyNavigationSubscription: Subscription;
 | 
				
			||||||
@ -152,12 +153,13 @@ export class BlockComponent implements OnInit, OnDestroy {
 | 
				
			|||||||
        this.stateService.markBlock$.next({ blockHeight: this.blockHeight });
 | 
					        this.stateService.markBlock$.next({ blockHeight: this.blockHeight });
 | 
				
			||||||
        this.isLoadingTransactions = true;
 | 
					        this.isLoadingTransactions = true;
 | 
				
			||||||
        this.transactions = null;
 | 
					        this.transactions = null;
 | 
				
			||||||
 | 
					        this.transactionsError = null;
 | 
				
			||||||
      }),
 | 
					      }),
 | 
				
			||||||
      debounceTime(300),
 | 
					      debounceTime(300),
 | 
				
			||||||
      switchMap((block) => this.electrsApiService.getBlockTransactions$(block.id)
 | 
					      switchMap((block) => this.electrsApiService.getBlockTransactions$(block.id)
 | 
				
			||||||
        .pipe(
 | 
					        .pipe(
 | 
				
			||||||
          catchError((err) => {
 | 
					          catchError((err) => {
 | 
				
			||||||
            console.log(err);
 | 
					            this.transactionsError = err;
 | 
				
			||||||
            return of([]);
 | 
					            return of([]);
 | 
				
			||||||
        }))
 | 
					        }))
 | 
				
			||||||
      ),
 | 
					      ),
 | 
				
			||||||
@ -218,9 +220,16 @@ export class BlockComponent implements OnInit, OnDestroy {
 | 
				
			|||||||
    const start = (page - 1) * this.itemsPerPage;
 | 
					    const start = (page - 1) * this.itemsPerPage;
 | 
				
			||||||
    this.isLoadingTransactions = true;
 | 
					    this.isLoadingTransactions = true;
 | 
				
			||||||
    this.transactions = null;
 | 
					    this.transactions = null;
 | 
				
			||||||
 | 
					    this.transactionsError = null;
 | 
				
			||||||
    target.scrollIntoView(); // works for chrome
 | 
					    target.scrollIntoView(); // works for chrome
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    this.electrsApiService.getBlockTransactions$(this.block.id, start)
 | 
					    this.electrsApiService.getBlockTransactions$(this.block.id, start)
 | 
				
			||||||
 | 
					      .pipe(
 | 
				
			||||||
 | 
					        catchError((err) => {
 | 
				
			||||||
 | 
					          this.transactionsError = err;
 | 
				
			||||||
 | 
					          return of([]);
 | 
				
			||||||
 | 
					      })
 | 
				
			||||||
 | 
					      )
 | 
				
			||||||
     .subscribe((transactions) => {
 | 
					     .subscribe((transactions) => {
 | 
				
			||||||
        this.transactions = transactions;
 | 
					        this.transactions = transactions;
 | 
				
			||||||
        this.isLoadingTransactions = false;
 | 
					        this.isLoadingTransactions = false;
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user