error handling setup with NgRx

Author: Andrew Evans

src/app/actions/location.actions.ts

@@ -9,23 +9,24 @@ export enum LocationActionTypes {
 export class LocationAction implements Action {
   type: string;
   payload: {
-    locationData: LocationData
+    locationData: LocationData,
+    error: string
   };
 }
 
 export class LoadLocations implements Action {
   readonly type = LocationActionTypes.LoadLocations;
 
-  constructor(readonly payload: {locationData: LocationData}) {
+  constructor(readonly payload: {locationData: LocationData, error: null}) {
 
   }
 }
 
 export class LocationsError implements Action {
   readonly type = LocationActionTypes.LocationsError;
 
-  constructor(errorMessage: string) {
-    alert(errorMessage);
+  constructor(readonly payload: {locationData: null, error: string}) {
+
   }
 }
 

src/app/cards/about-desktop/about-desktop.component.html

@@ -10,7 +10,6 @@
     <li>Goose Picture was made at <a href="https://www.flaticon.com/authors/smalllikeart" title="smalllikeart">smalllikeart</a> from
         <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by
           <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
-    <li>Time displayed is Eastern Standard Format</li>
     <li>Temperature displayed is in Fahrenheit</li>
     <li>Speed displayed is in Miles Per Hour</li>
   </ul>

src/app/cards/about-mobile/about-mobile.component.html

@@ -12,7 +12,6 @@
           <li>Goose Picture was made at <a href="https://www.flaticon.com/authors/smalllikeart" title="smalllikeart">smalllikeart</a> from
               <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by
                 <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
-          <li>Time displayed is Eastern Standard Format</li>
           <li>Temperature displayed is in Fahrenheit</li>
           <li>Speed displayed is in Miles Per Hour</li>
         </ul>

src/app/effects/weather.effects.ts

@@ -6,7 +6,7 @@ import { AppState } from '../reducers';
 import { Store } from '@ngrx/store';
 import { WeatherService } from '../services/weather.service';
 import { LocationActionTypes, LocationsError, LoadLocations } from '../actions/location.actions';
-import { of } from 'rxjs';
+import { of, throwError } from 'rxjs';
 
 @Injectable()
 export class WeatherEffects {
@@ -20,7 +20,7 @@ export class WeatherEffects {
           map(weather => {
             this.store.dispatch(new LoadWeather({weatherData: weather}));
           }),
-          catchError((error) => of(new LocationsError(error)))
+          catchError((errorMessage) => throwError(this.store.dispatch(new LocationsError({locationData: null, error: errorMessage}))))
         ))
   );
 

src/app/reducers/index.ts

@@ -4,6 +4,7 @@ import { WeatherData } from '../models/weather-data/weather-data';
 import { WeatherActionTypes, WeatherAction } from '../actions/weather.actions';
 import { LocationActionTypes, LocationAction } from '../actions/location.actions';
 import { LocationData } from '../models/location-data/location-data';
+import { state } from '@angular/animations';
 
 export interface WeatherState {
   weatherData: WeatherData| null;
@@ -15,10 +16,12 @@ const initialWeatherState: WeatherState = {
 
 export interface LocationState {
   location: LocationData| null;
+  error: string| null;
 }
 
 const initialLocationState: LocationState = {
-  location: null
+  location: null,
+  error: null
 };
 
 export interface AppState {
@@ -42,7 +45,14 @@ export function locationReducer(state: LocationState = initialLocationState, act
   switch (action.type) {
     case LocationActionTypes.LoadLocations:
       return {
-        location: action.payload.locationData
+        location: action.payload.locationData,
+        error: null
+      };
+
+    case LocationActionTypes.LocationsError:
+      return {
+        location: null,
+        error: action.payload.error
       };
 
     default:
@@ -58,4 +68,6 @@ export const reducers: ActionReducerMap<AppState> = {
 
 export const selectWeather = (state: AppState) => state.weather.weatherData;
 
+export const selectError = (state: AppState) => state.location.error;
+
 export const metaReducers: MetaReducer<any>[] = !environment.production ? [] : [];

src/app/weather/weather.component.html

@@ -18,6 +18,9 @@
     </mat-toolbar-row>
   </mat-toolbar>
   <div class="page">
+    <div *ngIf="error != undefined">
+      <h1 class="alert alert-danger">Error: {{ error }}</h1>
+    </div>
     <mat-grid-list cols="3" rowHeight="29em">
       <mat-grid-tile *ngFor="let card of cards | async"  [colspan]="card.cols" [rowspan]="card.rows">
         <mat-card class="dashboard-card">

src/app/weather/weather.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { map, startWith } from 'rxjs/operators';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { map, startWith, takeUntil } from 'rxjs/operators';
 import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
 import { WeatherService } from '../services/weather.service';
 import { CurrentConditionsComponent } from '../cards/current-conditions/current-conditions.component';
@@ -9,11 +9,11 @@ import { HourlyForecastComponent } from '../cards/hourly-forecast/hourly-forecas
 import { AboutDesktopComponent } from '../cards/about-desktop/about-desktop.component';
 import { AboutMobileComponent } from '../cards/about-mobile/about-mobile.component';
 import { Store } from '@ngrx/store';
-import { AppState } from '../reducers';
+import { AppState, selectError } from '../reducers';
 import { LoadLocations } from '../actions/location.actions';
 import { LocationData } from '../models/location-data/location-data';
 import { FormControl } from '@angular/forms';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import * as USCities from '../../assets/us_cities.json';
 import { City } from '../models/city/city';
 import { MatAutocompleteSelectedEvent } from '@angular/material';
@@ -24,7 +24,7 @@ import { LoadWeather } from '../actions/weather.actions';
   templateUrl: './weather.component.html',
   styleUrls: ['./weather.component.css']
 })
-export class WeatherComponent implements OnInit {
+export class WeatherComponent implements OnInit, OnDestroy {
 
   lat: string;
   long: string;
@@ -38,6 +38,8 @@ export class WeatherComponent implements OnInit {
   filteredCities: Observable<City[]>;
   cities = [];
   mobileView = false;
+  error: string;
+  private unsubscribeError: Subject<void> = new Subject<void>();
 
   cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
     map(({ matches }) => {
@@ -159,6 +161,11 @@ export class WeatherComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.store
+      .select(selectError)
+      .pipe(takeUntil(this.unsubscribeError))
+      .subscribe((error) => this.error = error);
+
     try {
       navigator.geolocation.getCurrentPosition((position) => {
         this.savePosition(position);
@@ -178,7 +185,7 @@ export class WeatherComponent implements OnInit {
       }
     }
 
-    this.store.dispatch(new LoadLocations({locationData: this.locationData}));
+    this.store.dispatch(new LoadLocations({locationData: this.locationData, error: null}));
   }
 
   onSelectionChanged(event: MatAutocompleteSelectedEvent) {
@@ -187,10 +194,14 @@ export class WeatherComponent implements OnInit {
         this.locationData.latitude = city.latitude;
         this.locationData.longitude = city.longitude;
         this.store.dispatch(new LoadWeather({weatherData: null}));
-        this.store.dispatch(new LoadLocations({locationData: this.locationData}));
+        this.store.dispatch(new LoadLocations({locationData: this.locationData, error: null}));
         break;
       }
     }
   }
 
+  ngOnDestroy() {
+    this.unsubscribeError.next();
+  }
+
 }

src/environments/environment.prod.ts

@@ -1,5 +1,5 @@
 export const environment = {
   production: true,
-  openWeatherMapAPIKey: 'f415e81f4b5b26584ae0621649972862',
+  openWeatherMapAPIKey: 'OPEN_WEATHER_MAP_API_KEY',
   noaaMetaDataEndpoint: 'https://api.weather.gov/points/'
 };

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  openWeatherMapAPIKey: 'f415e81f4b5b26584ae0621649972862',
+  openWeatherMapAPIKey: 'OPEN_WEATHER_MAP_API_KEY',
   noaaMetaDataEndpoint: 'https://api.weather.gov/points/'
 };