From 70fbe7011d1fd20f71efad493a77ff81e66bb4bb Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Thu, 21 Mar 2019 22:40:59 +0100 Subject: [PATCH] feat: add clearer error messages (#61) * Add error text * Add a couple of console.logs --- App/App.js | 6 +- App/Screens/ErrorScreen/ErrorScreen.js | 61 +++++++++---------- App/Screens/Loading/Loading.js | 20 +++++- App/Screens/Screens.js | 3 +- App/Screens/Search/Search.js | 7 +++ .../CurrentLocation/CurrentLocation.js | 7 +++ App/stores/error.js | 2 +- App/stores/index.js | 2 +- 8 files changed, 69 insertions(+), 39 deletions(-) diff --git a/App/App.js b/App/App.js index ebec6962..87ad219d 100644 --- 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 index edff775c..8e2a222b 100644 --- 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 ( - + - - - - Sorry! - {'\n'} - We cannot - {'\n'} - load your cigarettes. - - - - - - - - CHOOSE OTHER LOCATION - - - - There's either a problem with our databases, or you don't have any - Air Monitoring Stations near you. Try again later! + + Sorry! + {'\n'} + We cannot + {'\n'} + load your cigarettes. + + + CHOOSE OTHER LOCATION + + + + There's either a problem with our databases, or you don't have any Air + Monitoring Stations near you. Try again later! + + Error: {errorText} ); } @@ -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 index 3519ee96..934232d9 100644 --- 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(' - 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(' - 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(' - fetchData - Got location', currentPosition); location.setCurrent(coords); location.setGps(coords); @@ -77,7 +83,14 @@ export class Loading extends Component { const api = await retry( async (_, attempt) => { // Attempt starts at 1 + console.log( + ` - fetchData - Attempt #${attempt}: ${ + sources[(attempt - 1) % 2].name + }` + ); const result = await sources[(attempt - 1) % 2](currentPosition); + console.log(' - fetchData - Got result', result); + return result; }, { retries: 3 } // 2 attemps per source @@ -85,7 +98,8 @@ export class Loading extends Component { stores.setApi(api); } catch (error) { - stores.setError(error); + console.log(' - fetchData - Error', error); + stores.setError(error.message); } } diff --git a/App/Screens/Screens.js b/App/Screens/Screens.js index 7ff9db43..02e65d9d 100644 --- 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 {this.renderScreen()}; } diff --git a/App/Screens/Search/Search.js b/App/Screens/Search/Search.js index 3b9af20f..721e8b4a 100644 --- 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( + ` - 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(' - fetchResults - Got', hits.length, 'results'); this.setState({ hits }); }, { diff --git a/App/components/CurrentLocation/CurrentLocation.js b/App/components/CurrentLocation/CurrentLocation.js index 636935f0..e975eead 100644 --- a/App/components/CurrentLocation/CurrentLocation.js +++ b/App/components/CurrentLocation/CurrentLocation.js @@ -29,6 +29,9 @@ export class CurrentLocation extends Component { } try { + console.log( + ' - 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(' - 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(' - 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 index 06423ae6..923d55c0 100644 --- 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 index 80c36fd2..b23fe694 100644 --- 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; } }));