feat: add clearer error messages (#61)

* Add error text * Add a couple of console.logs
shootismoke · Mar 21, 2019 · 70fbe70 · 70fbe70
1 parent bd3f65b
commit 70fbe70
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 39 deletions.
diff --git a/App/App.js b/App/App.js
@@ -11,7 +11,11 @@ import { Background as LoadingBackground } from './Screens/Loading/Background';
 import { Screens } from './Screens';
 
 // Set up global MST stores
-const stores = RootStore.create({ api: undefined, error: false, location: {} });
+const stores = RootStore.create({
+  api: undefined,
+  error: undefined,
+  location: {}
+});
 
 // Add sentry if available
 if (Constants.manifest.extra.sentryPublicDsn) {

diff --git a/App/Screens/ErrorScreen/ErrorScreen.js b/App/Screens/ErrorScreen/ErrorScreen.js
@@ -1,43 +1,43 @@
 // Copyright (c) 2018-2019, Amaury Martiny
 // SPDX-License-Identifier: GPL-3.0
 
+import { inject, observer } from 'mobx-react';
 import React, { Component } from 'react';
 import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import error from '../../../assets/images/error.png';
 import * as theme from '../../utils/theme';
 
+@inject('stores')
+@observer
 export class ErrorScreen extends Component {
   goToSearch = () => this.props.navigation.navigate('Search');
 
   render () {
+    const { error: errorText } = this.props.stores;
+
     return (
       <View style={styles.container}>
-        <View />
+        <Image source={error} />
         <View>
-          <Image source={error} />
-          <View>
-            <Text style={styles.errorText}>
-              <Text style={styles.sorry}>Sorry!</Text>
-              {'\n'}
-              We cannot
-              {'\n'}
-              load your cigarettes.
-            </Text>
-          </View>
-        </View>
-
-        <View>
-          <TouchableOpacity onPress={this.goToSearch}>
-            <View style={styles.chooseOther}>
-              <Text style={theme.bigButtonText}>CHOOSE OTHER LOCATION</Text>
-            </View>
-          </TouchableOpacity>
-          <Text style={styles.errorDescription}>
-            There's either a problem with our databases, or you don't have any
-            Air Monitoring Stations near you. Try again later!
+          <Text style={styles.errorText}>
+            <Text style={styles.sorry}>Sorry!</Text>
+            {'\n'}
+            We cannot
+            {'\n'}
+            load your cigarettes.
           </Text>
         </View>
+        <TouchableOpacity onPress={this.goToSearch}>
+          <View style={styles.chooseOther}>
+            <Text style={theme.bigButtonText}>CHOOSE OTHER LOCATION</Text>
+          </View>
+        </TouchableOpacity>
+        <Text style={theme.text}>
+          There's either a problem with our databases, or you don't have any Air
+          Monitoring Stations near you. Try again later!
+        </Text>
+        <Text style={styles.errorMessage}>Error: {errorText}</Text>
       </View>
     );
   }
@@ -52,22 +52,19 @@ const styles = StyleSheet.create({
     ...theme.fullScreen,
     ...theme.withPadding,
     flexGrow: 1,
-    flexDirection: 'column',
-    justifyContent: 'space-around'
+    flexDirection: 'column'
   },
-  errorDescription: {
-    ...theme.text
+  errorMessage: {
+    ...theme.text,
+    fontFamily: 'Courier',
+    fontSize: 10,
+    marginTop: theme.spacing.small
   },
   errorText: {
     ...theme.shitText,
-    marginTop: 31
+    marginTop: theme.spacing.big
   },
   sorry: {
     color: theme.primaryColor
-  },
-  text: {
-    ...theme.title,
-    fontSize: 18,
-    textAlign: 'center'
   }
 });
diff --git a/App/Screens/Loading/Loading.js b/App/Screens/Loading/Loading.js
@@ -41,12 +41,17 @@ export class Loading extends Component {
       // If the currentLocation has been set by the user, then we don't refetch
       // the user's GPS
       if (!currentPosition) {
+        console.log('<Loading> - fetchData - Asking for location permission');
         const { status } = await Permissions.askAsync(Permissions.LOCATION);
+
         if (status !== 'granted') {
-          throw new Error('Permission to access location was denied.');
+          throw new Error('Permission to access location was denied');
         }
 
-        const { coords } = await Location.getCurrentPositionAsync({});
+        console.log('<Loading> - fetchData - Fetching location');
+        const { coords } = await Location.getCurrentPositionAsync({
+          timeout: 5000
+        });
         // Uncomment to get other locations
         // const coords = {
         //   latitude: Math.random() * 90,
@@ -58,6 +63,7 @@ export class Loading extends Component {
         // };
 
         currentPosition = coords;
+        console.log('<Loading> - fetchData - Got location', currentPosition);
 
         location.setCurrent(coords);
         location.setGps(coords);
@@ -77,15 +83,23 @@ export class Loading extends Component {
       const api = await retry(
         async (_, attempt) => {
           // Attempt starts at 1
+          console.log(
+            `<Loading> - fetchData - Attempt #${attempt}: ${
+              sources[(attempt - 1) % 2].name
+            }`
+          );
           const result = await sources[(attempt - 1) % 2](currentPosition);
+          console.log('<Loading> - fetchData - Got result', result);
+
           return result;
         },
         { retries: 3 } // 2 attemps per source
       );
 
       stores.setApi(api);
     } catch (error) {
-      stores.setError(error);
+      console.log('<Loading> - fetchData - Error', error);
+      stores.setError(error.message);
     }
   }
 

diff --git a/App/Screens/Screens.js b/App/Screens/Screens.js
@@ -73,8 +73,9 @@ export class Screens extends Component {
   };
 
   componentDidCatch (error) {
-    this.props.stores.setError(error);
+    this.props.stores.setError(error.message);
   }
+
   render () {
     return <View style={theme.fullScreen}>{this.renderScreen()}</View>;
   }

diff --git a/App/Screens/Search/Search.js b/App/Screens/Search/Search.js
@@ -50,6 +50,11 @@ export class Search extends Component {
       this.setState({ loading: true });
       await retry(
         async (_, attempt) => {
+          console.log(
+            `<Search> - fetchResults - Attempt #${attempt}: ${
+              algoliaUrls[attempt - 1]
+            }/1/places/query`
+          );
           const {
             data: { hits }
           } = await axios.post(
@@ -77,6 +82,8 @@ export class Search extends Component {
               timeout: 3000
             }
           );
+
+          console.log('<Search> - fetchResults - Got', hits.length, 'results');
           this.setState({ hits });
         },
         {

diff --git a/App/components/CurrentLocation/CurrentLocation.js b/App/components/CurrentLocation/CurrentLocation.js
@@ -29,6 +29,9 @@ export class CurrentLocation extends Component {
     }
 
     try {
+      console.log(
+        '<CurrentLocation> - componentDidMount - Fetching reverse geocoding'
+      );
       const { data } = await axios.get(
         `https://us1.locationiq.com/v1/reverse.php?key=${
           Constants.manifest.extra.locationIqKey
@@ -42,6 +45,8 @@ export class CurrentLocation extends Component {
         throw new Error('No data from LocationIQ.');
       }
 
+      console.log('<CurrentLocation> - componentDidMount - Got result');
+
       // We format the formatted_address to remove postal code and street number for privacy reasons
       const postalCode = data.address.postcode;
       const streetNumber = data.address.house_number;
@@ -58,6 +63,8 @@ export class CurrentLocation extends Component {
           .toUpperCase()
       });
     } catch (error) {
+      console.log('<CurrentLocation> - componentDidMount - Error', error);
+
       // Show AQI station name if we don't have reverse geocoding data
       this.setState({
         locationName:

diff --git a/App/stores/error.js b/App/stores/error.js
@@ -3,4 +3,4 @@
 
 import { types } from 'mobx-state-tree';
 
-export const ErrorStore = types.boolean;
+export const ErrorStore = types.union(types.string, types.undefined);
diff --git a/App/stores/index.js b/App/stores/index.js
@@ -54,6 +54,6 @@ export const RootStore = types
     setError (newError) {
       // TODO Add sentry
       // https://github.com/amaurymartiny/shoot-i-smoke/issues/22
-      self.error = !!newError;
+      self.error = newError;
     }
   }));