commit 18ffb5b4db22c97daac4669820f111028bdf4308
parent 1b491152eb25d41584cab4fc06603eeb110882c1
Author: MTRNord <mtrnord1@gmail.com>
Date: Mon, 12 Mar 2018 18:06:22 +0100
Use better error handling (5 retries plus a visible error message for the user)
Diffstat:
7 files changed, 55 insertions(+), 11 deletions(-)
diff --git a/.angular-cli.json b/.angular-cli.json
@@ -24,7 +24,8 @@
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
"../node_modules/angular-bootstrap-md/scss/mdb-free.scss",
- "./styles.scss"
+ "./styles.scss",
+ "../node_modules/ngx-toastr/toastr.css"
],
"scripts": [
"../node_modules/chart.js/dist/Chart.js",
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
},
"private": true,
"dependencies": {
- "@angular/animations": "^5.0.0",
+ "@angular/animations": "^5.2.8",
"@angular/cdk": "^5.2.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
@@ -35,6 +35,7 @@
"hammerjs": "^2.0.8",
"ng-gallery": "^1.0.1",
"ngx-avatar": "^2.9.0",
+ "ngx-toastr": "^8.3.0",
"raven-js": "^3.22.3",
"rxjs": "^5.5.2",
"ts-loader": "^3.5.0",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -18,6 +18,7 @@ import { PapersListComponent } from './papers-list/papers-list.component';
import { ApiService } from './api.service';
import * as Raven from 'raven-js';
+import {ToastrModule} from 'ngx-toastr';
Raven
.config('https://b760c9f9035c472998ada3a02dcc81d3@sentry.io/294520', {
environment: 'development',
@@ -66,6 +67,7 @@ export const config: GalleryConfig = {
GalleryModule.forRoot(config),
AvatarModule,
HttpClientModule,
+ ToastrModule.forRoot(), // ToastrModule added
],
providers: [
ApiService,
diff --git a/src/app/papers-list/papers-list.component.ts b/src/app/papers-list/papers-list.component.ts
@@ -1,6 +1,8 @@
import {Component} from '@angular/core';
import {ApiService, Paper} from '../api.service';
import * as Raven from 'raven-js';
+import {Observable} from 'rxjs/Observable';
+import {ToastrService} from 'ngx-toastr';
@Component({
selector: 'app-papers-list',
@@ -10,7 +12,7 @@ import * as Raven from 'raven-js';
export class PapersListComponent {
data: (Paper)[][];
- constructor(private apiService: ApiService) {
+ constructor(private apiService: ApiService, private toastr: ToastrService) {
Raven.captureBreadcrumb({
message: 'Listing Papers',
category: 'papers-list'
@@ -20,9 +22,24 @@ export class PapersListComponent {
getPapers() {
this.apiService.getPapers()
+ // TODO: Better variable naming
+ .retryWhen(oerror => {
+ return oerror
+ .flatMap((error: any) => {
+ if (error.status.startsWith('50')) {
+ return Observable.of(error.status).delay(1000);
+ }
+ return Observable.throw({error: 'No retry'});
+ })
+ .take(5)
+ .concat(Observable.throw({error: 'Sorry, there was an error (after 5 retries)'}));
+ })
.subscribe(
data => { this.data = this.chunk(data, 3); },
- err => { throw err; },
+ err => {
+ this.toastr.error(err, 'Error connecting API');
+ throw err;
+ },
() => console.log('done loading Papers')
);
}
diff --git a/src/app/tweet-list/tweet-list.component.ts b/src/app/tweet-list/tweet-list.component.ts
@@ -1,6 +1,8 @@
import {Component, Input, OnInit} from '@angular/core';
import * as Raven from 'raven-js';
import {ApiService, TweetsEntity} from '../api.service';
+import {Observable} from 'rxjs/Observable';
+import {ToastrService} from 'ngx-toastr';
@Component({
@@ -12,7 +14,7 @@ export class TweetListComponent implements OnInit {
@Input() uuid;
data: (TweetsEntity)[][];
- constructor(private apiService: ApiService) {
+ constructor(private apiService: ApiService, private toastr: ToastrService) {
Raven.captureBreadcrumb({
message: 'Showing Paper',
category: 'paper',
@@ -28,9 +30,24 @@ export class TweetListComponent implements OnInit {
getYesterday() {
this.apiService.getYesterday(this.uuid)
+ // TODO: Better variable naming
+ .retryWhen(oerror => {
+ return oerror
+ .flatMap((error: any) => {
+ if (error.status.startsWith('50')) {
+ return Observable.of(error.status).delay(1000);
+ }
+ return Observable.throw({error: 'No retry'});
+ })
+ .take(5)
+ .concat(Observable.throw({error: 'Sorry, there was an error (after 5 retries)'}));
+ })
.subscribe(
data => { this.data = this.chunk(data.tweets, 3); },
- err => { throw err; },
+ err => {
+ this.toastr.error(err, 'Error connecting API');
+ throw err;
+ },
() => console.log('done loading Yesterday')
);
}
diff --git a/src/styles.scss b/src/styles.scss
@@ -22,7 +22,7 @@ html { overflow:auto; }
}
.hm-orange-light {
- background-color: rgba(255, 148, 17, .3) !important;
+ background-color: rgba(255, 196, 0, .3) !important;
}
.card {
diff --git a/yarn.lock b/yarn.lock
@@ -27,9 +27,9 @@
"@ngtools/json-schema" "^1.1.0"
rxjs "^5.5.6"
-"@angular/animations@^5.0.0":
- version "5.2.6"
- resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-5.2.6.tgz#433aace8929ce362762dcccdb5044c3945a194bd"
+"@angular/animations@^5.2.8":
+ version "5.2.8"
+ resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-5.2.8.tgz#31cdb49163881323fa5ded41e89683ec5e9ac8b5"
dependencies:
tslib "^1.7.1"
@@ -248,7 +248,7 @@
version "2.0.0"
resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.0.tgz#5a7306e367c539b9f6543499de8dd519fac37a8b"
-"@types/node@*", "@types/node@^9.4.6":
+"@types/node@*":
version "9.4.6"
resolved "https://registry.yarnpkg.com/@types/node/-/node-9.4.6.tgz#d8176d864ee48753d053783e4e463aec86b8d82e"
@@ -4056,6 +4056,12 @@ ngx-avatar@^2.9.0:
is-retina "^1.0.3"
ts-md5 "^1.2.0"
+ngx-toastr@^8.3.0:
+ version "8.3.0"
+ resolved "https://registry.yarnpkg.com/ngx-toastr/-/ngx-toastr-8.3.0.tgz#4f79df590484de1caa2e29f9bee4cbf2c5aff097"
+ dependencies:
+ tslib "^1.7.1"
+
no-case@^2.2.0:
version "2.3.2"
resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
