Merge pull request #1700 from mempool/simon/block-transactions-error-catcher

Block transactions list error handling
This commit is contained in:
wiz 2022-05-25 20:09:05 +09:00 committed by GitHub
commit 8372ca1cf0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 4 deletions

View File

@ -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>

View File

@ -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;