diff --git a/src/frontend/sharedComponents/MapView.js b/src/frontend/sharedComponents/MapView.js index efdb47b34..b0d29bfd9 100644 --- a/src/frontend/sharedComponents/MapView.js +++ b/src/frontend/sharedComponents/MapView.js @@ -2,7 +2,6 @@ import React from "react"; import { View, StyleSheet } from "react-native"; import MapboxGL from "@react-native-mapbox-gl/maps"; -import debug from "debug"; // import type { MapStyle } from "../types"; import AddButton from "./AddButton"; @@ -14,8 +13,11 @@ import type { PositionType } from "../context/LocationContext"; import type { ObservationsMap } from "../context/ObservationsContext"; +import bugsnag from "../lib/logger"; -const log = debug("mapeo:MapView"); +MapboxGL.setAccessToken( + "pk.eyJ1IjoiZ21hY2xlbm5hbiIsImEiOiJSaWVtd2lRIn0.ASYMZE2HhwkAw4Vt7SavEg" +); const mapboxStyles = { observation: { @@ -81,8 +83,7 @@ class ObservationMapLayer extends React.PureComponent<{ + shape={featureCollection}> ); @@ -100,7 +101,8 @@ type Props = { type State = { // True if the map is following user location - following: boolean + following: boolean, + hasFinishedLoadingStyle?: boolean }; class MapView extends React.Component { @@ -114,10 +116,6 @@ class MapView extends React.Component { constructor(props: Props) { super(props); - MapboxGL.setAccessToken( - "pk.eyJ1IjoiZ21hY2xlbm5hbiIsImEiOiJSaWVtd2lRIn0.ASYMZE2HhwkAw4Vt7SavEg" - ); - log("accessToken set"); this.initialPosition = props.location.position || props.location.savedPosition; this.state = { @@ -155,16 +153,14 @@ class MapView extends React.Component { if (!pressedFeature || !pressedFeature.properties) return; const observationId = pressedFeature.properties.id; - log("handle obs press", observationId); + bugsnag.leaveBreadcrumb("Press observation", { observationId }); const { observations, onPressObservation } = this.props; if (observations.get(observationId)) { onPressObservation(observationId); } else { - log( - "Warning: pressed feature with id '" + - observationId + - "' but could not find matching observation" - ); + bugsnag.notify(new Error("Could not find pressed observation"), { + observationId + }); } }; @@ -179,6 +175,10 @@ class MapView extends React.Component { this.currentZoom = e.properties.zoomLevel; }; + handleDidFinishLoadingStyle = e => { + this.setState({ hasFinishedLoadingStyle: true }); + }; + getFollowZoomLevel() { // If the user has zoomed the map, we keep to that zoom level when we switch // to "follow mode" @@ -219,26 +219,48 @@ class MapView extends React.Component { pitchEnabled={false} rotateEnabled={false} onPress={this.handleObservationPress} + onDidFailLoadingMap={e => + bugsnag.notify(e, { + severity: "error", + context: "onDidFailLoadingMap" + }) + } + onDidFinishLoadingStyle={this.handleDidFinishLoadingStyle} + onDidFinishRenderingMap={() => + bugsnag.leaveBreadcrumb("onDidFinishRenderingMap") + } + onDidFinishRenderingMapFully={() => + bugsnag.leaveBreadcrumb("onDidFinishRenderingMapFully") + } + onWillStartLoadingMap={() => + bugsnag.leaveBreadcrumb("onWillStartLoadingMap") + } + onDidFinishLoadingMap={() => + bugsnag.leaveBreadcrumb("onDidFinishLoadingMap") + } compassEnabled={false} styleURL={styleURL} - onRegionDidChange={this.handleRegionDidChange} - > - {locationServicesEnabled && ( - + onRegionDidChange={this.handleRegionDidChange}> + {this.state.hasFinishedLoadingStyle && ( + <> + + {locationServicesEnabled && ( + + )} + + )} - -