Reusable component & pipe for http error rendering

This commit is contained in:
Mononaut
2024-03-21 07:57:13 +00:00
parent 21b3e4071c
commit 484e032775
13 changed files with 81 additions and 43 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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