Closed SethArchambault closed 3 years ago
Could you post the JSX of the map that results in this error? My users are experiencing a similar crash sometimes, although I'm not 100% sure mine is caused by Mapbox. I'd like to see if there are any similarities between the ways we're using the component.
@zholmes1 Sure! This is a deeply complex map, so I've inlined all the components, which strips out a lot of the stuff that makes it work (Added some comments to help out a bit), but should give you and idea for the overall structure:
<MapboxGL.MapView
onLayout={...}
attributionPosition={...}
logoEnabled={...}
onPress={...}
onLongPress={...}
onRegionDidChange={...}
regionDidChangeDebounceTime={...}
pitchEnabled={...}
ref={...}
rotateEnabled={...}
compassEnabled={...}
style={{ flex: 1, }}
styleURL={...}
testID="map"
>
<MapboxGL.Camera
ref={...}
defaultSettings={{
centerCoordinate: defaultCameraCenter,
heading: 0,
zoomLevel: DEFAULT_ZOOM,
}}
animationDuration={0}
onUserTrackingModeChange={...}
/>
{this.state.locationPermission && (
<MapboxGL.UserLocation
showsUserHeadingIndicator={true}
renderMode={IS_IOS ? 'native' : 'normal'}
/>
)}
<ErrorBoundary>
<MapboxGL.VectorSource
id={this.props.layer.id}
url={tileUrl}
onPress={this.props.onPress}
>
/* could be a lot of layers! */
<ErrorBoundary>
<MapboxGL.FillLayer {...this.props} id={id} />
</ErrorBoundary>
<ErrorBoundary>
<MapboxGL.FillLayer {...this.props} id={id} />
</ErrorBoundary>
<ErrorBoundary>
<MapboxGL.FillLayer {...this.props} id={id} />
</ErrorBoundary>
</MapboxGL.VectorSource>
</ErrorBoundary>
<ErrorBoundary>
<MapboxGL.VectorSource
id={this.props.layer.id}
url={tileUrl}
onPress={this.props.onPress}
>
/* could be a lot of layers! */
<ErrorBoundary>
<MapboxGL.FillLayer {...this.props} id={id} />
</ErrorBoundary>
<ErrorBoundary>
<MapboxGL.FillLayer {...this.props} id={id} />
</ErrorBoundary>
<ErrorBoundary>
<MapboxGL.FillLayer {...this.props} id={id} />
</ErrorBoundary>
</MapboxGL.VectorSource>
</ErrorBoundary>
<VectorWrapper id={id} url={url}>
<MapboxGL.LineLayer
id=""
sourceLayerID={id}
style={{
visibility: visibility,
lineColor: ...,
lineOpacity: [
'interpolate',
['exponential', 1.5,],
['zoom',],
...[13, 0,],
...[15, 0.2,],
...[20, 1.0,],
],
lineWidth: 2,
}}
minZoomLevel={13}
/>
</VectorWrapper>
<MapboxGL.ShapeSource
id="..."
shape={...}
>
/* could be a lot of layers! */
<ErrorBoundary>
<MapboxGL.FillLayer {...this.props} id={id} />
</ErrorBoundary>
<ErrorBoundary>
<MapboxGL.FillLayer {...this.props} id={id} />
</ErrorBoundary>
<ErrorBoundary>
<MapboxGL.FillLayer {...this.props} id={id} />
</ErrorBoundary>
</MapboxGL.ShapeSource>
/* not always visible */
<ErrorBoundary>
<MapboxGL.VectorSource id={id} url={url}>
<MapboxGL.SymbolLayer
id="..."
sourceLayerID="contour"
style={{
visibility: visibleToString(visible),
textField: ['concat', ['to-string', ['get', 'ele',],], 'm',],
textSize: 12,
textColor: '#e96749',
textHaloColor: '#ffffff',
textHaloWidth: 3,
textAllowOverlap: true,
}}
/>
<MapboxGL.LineLayer
id="..."
sourceLayerID={id}
style={{
visibility: visibleToString(visible),
lineColor: '#e96749',
lineWidth: 1,
}}
/>
</MapboxGL.SymbolLayer>
</MapboxGL.VectorSource>
</ErrorBoundary>
<MapboxGL.ShapeSource
id="..."
shape={...}
>
/* could be a lot of layers! */
<ErrorBoundary>
<MapboxGL.FillLayer {...this.props} id={id} />
</ErrorBoundary>
<ErrorBoundary>
<MapboxGL.FillLayer {...this.props} id={id} />
</ErrorBoundary>
<ErrorBoundary>
<MapboxGL.FillLayer {...this.props} id={id} />
</ErrorBoundary>
</MapboxGL.ShapeSource>
/* only shown if shape1 has features */
<ErrorBoundary>
<MapboxGL.ShapeSource id="..." shape={shape1}>
<MapboxGL.LineLayer
id="shape1Outlines"
style={...}
/>
</MapboxGL.ShapeSource>
</ErrorBoundary>
{this.props.outline && (
<ErrorBoundary>
<MapboxGL.ShapeSource
id="outlineLayer"
shape={this.props.outline}
>
<MapboxGL.LineLayer
id="outlineLayerOutlines"
style={mapStyles.outline}
/>
</MapboxGL.ShapeSource>
</ErrorBoundary>
)}
/* only shown if featureCollection is array and has items */
<ErrorBoundary>
<MapboxGL.ShapeSource id="..." shape={...}>
<MapboxGL.LineLayer
id="..."
style={{
lineColor: '#e91e63',
lineWidth: 2,
circleOpacity: 0,
circleRadius: circleRadius,
circleStrokeColor: '#e91e63',
circleStrokeWidth: circleStrokeRadius,
}}
/>
</MapboxGL.ShapeSource>
</ErrorBoundary>
/* only shown if markerCenter exists */
<ErrorBoundary>
<MapboxGL.PointAnnotation
id="markerLayer"
coordinate={markerCenter}
title="Point"
anchor={{ x: 0.5, y: 0.85, }}
/>
</ErrorBoundary>
</MapboxGL.MapView>
There's probably room to simplify this beast!
@SethArchambault, at this point, I don't think that there is much we can do from our side with this.
As you mentioned in your initial description, this seems to be deeply embedded in the native parts of the SDK and as there are no longer any meaningful updates on mapbox/mapbox-gl-native-android
I think your best bet would be to check if they're tracking this same issue on the MapLibre side and open an issue over there for it.
@ferdicus Can you say more about how mapbox/mapbox-gl-native-android
ties into this? I had just mentioned that as an example of where I was able to find the same issue occurring online, but react-native-mapbox-gl/maps
doesn't rely on that right?
Also, I did a search for MapLibre in the react-native-mapbox-gl/maps
repo and found this:
https://github.com/react-native-mapbox-gl/maps/blob/66343aa37505098b652617b432a897c278ee0135/android/install.md
Looks like it's saying I can manually override what mapbox uses on a low level for android.. Are you suggesting I do that?
I looked around at the maplibre repos and couldn't find anything relating to my issue, so doubt it's fixed there.. Also it freaks me out to customize mapbox in this way, since I imagine I'll run into new issues and then I'll have to try and debug mapbox with a non-standard setup, which sounds even harder..
Thanks for the help on this, appreciate you!
Maybe this helps as a mental model:
react-native-mapbox-gl/maps
\ wraps /
\ /
mapbox/mapbox-gl-native-ios
mapbox/mapbox-gl-native-android
\ wraps /
\ /
mapbox/mapbox-gl-native
So underneath, this lib uses native mobile mapbox SDKs for iOS (mapbox/mapbox-gl-native-ios) and Android (mapbox/mapbox-gl-native-android), which in turn use an even "nativer" core library for all the fancy 3d stuff (mapbox/mapbox-gl-native). The modern world of programming is a world of abstractions....
After some drama with licensing and such, mapbox chose to close source some of their offerings.
MapLibre people took that opportunity to fork off from the then last open snapshot of Mapbox.
Therefore MapLibre is in the end a drop-in replacement for the previous mapbox SDKs.
Looks like it's saying I can manually override what mapbox uses on a low level for android.. Are you suggesting I do that?
Yes, that's the suggestion - no worries, it shouldn't be that hard, basically just pointing your androids dependency management to another source.
I looked around at the maplibre repos and couldn't find anything relating to my issue, so doubt it's fixed there.. Also it freaks me out to customize mapbox in this way, since I imagine I'll run into new issues and then I'll have to try and debug mapbox with a non-standard setup, which sounds even harder..
True, they might not have a fix for your current problem at hand. However, having said that, you can have a look at this ticket in our repo (https://github.com/react-native-mapbox-gl/maps/issues/1350) where someone is asking about an iOS crash which was not fixed in the mapbox repo, but fixed in the maplibre repo.
So your best chances of having a native issue/ bug/ crash fixed upstream are with maplibre, as mapbox is not really maintaining their mobile SDK that aren't the new v10 version.
Cheers
Wow, awesome thanks so much! I'll at least do some testing around this..
The modern world of programming is a world of abstractions....
I'll add, "...to our peril"
@SethArchambault, any update on this?
@ferdicus So we didn't yet have a chance to switch this over to maplibre yet, but we did have something happen in this area: On June 17th 2021, Google Play Console ceased to record any more of these errors, or count them as a part of our crash rate.
So our crash rate graph took a dive, and is now under the bad behavior level:
We use Sentry for bug tracking though, so we can see that the issue has not been solved, the exact same issue continues to be reported, via Sentry, it's just no longer showing up on Google Play Store.
I have no idea what the reason is for Google no longer showing this error... My best guess is that Google has determined it's impossible for app developers to address this low level gpu segfault, and so decided not to penalize us for it in the app store.
That's all I got there...
I'll also say, given that mapbox is about to get a major version update with Mapbox Mobile Maps SDK v10.0.0 on the horizon, switching to MapLibre may not be the move we choose, since it could be a deadend, assuming v10 features / performance are not able to be reproduced in the MapLibre version? Not sure how real that concern is..
But anyways! This isn't fixed for me yet but Google has reduced my incentive to address it has gone down a bit..
That's good to hear?!?! Let's say it's good :)
Concerning:
I'll also say, given that mapbox is about to get a major version update with Mapbox Mobile Maps SDK v10.0.0 on the horizon, switching to MapLibre may not be the move we choose, since it could be a deadend, assuming v10 features / performance are not able to be reproduced in the MapLibre version? Not sure how real that concern is..
v10 is a departure from the currently used API (that we are wrapping with this repo).
On top of that comes the dilemma of either supporting a commercial product (mapbox) or open-source (maplibre).
We're already spread too thin as is and I'm not sure we can support two SDKs of two projects that will get increasingly get dissimilar?!
That's good to hear?!?! Let's say it's good :)
🤣 Yeah, I'll take it!
We're already spread too thin as is and I'm not sure we can support two SDKs of two projects that will get increasingly get dissimilar?!
Good to know and makes sense to me - thanks!
Closing this as "fixed" 😅
So we're seeing this Segfault crash showing up in Google Play Console.
The crash happens inside libGLESv2_adreno which is a lib that does OpenGL for Embedded Systems running on an Adreno GPU which is a Qualcomm-only GPU.. It primarily affects Android 9 Devices with the Adreno GPU.
I don't know for certain that it's a mapbox issue, but our app primarily deals with mapping, and I also found this issue in mapbox library, which is nearly the same (except I can't find a repro): https://github.com/mapbox/mapbox-gl-native-android/issues/264
I was hoping upgrading packages and react native would solve the problem, but the crash remains, undisturbed by our upgrades.
Here's an example from a bug report on Sentry:
Reproducible?
I've never experienced it personally, and haven't found a way to reproduce this because the only way we can tell this is an issue is because of Google Play Console and Sentry.. We haven't had a user report that the app is crashing in a reproducible way, but this bug is putting us over the Bad Behavior threshold with Google. We've got hundreds of users a month with this crash.
Screenshots
Versions:
Platform: Andoid Platform OS: Android 9 Devices:
Emulator/ Simulator: no react-native-mapbox-gl: 8.1.0 (But has existed since we used ~7.0.0 and possibly lower) React Native Version: 0.63.4 (But has existed since we used 0.61.5 and possibly lower)
Additional context
Breakdown of android versions affected:
Device + how many times it's occurred recently:
Here's a full backtrace of an error from Google Play Console:
Here's some links to some similar issues: https://github.com/mapbox/mapbox-gl-native-android/issues/264 https://developer.qualcomm.com/forum/qdn-forums/maximize-hardware/mobile-gaming-graphics-adreno/28489 https://developer.qualcomm.com/forum/qdn-forums/software/adreno-gpu-sdk/67924
And I've posted on stack overflow, but no help so far: https://stackoverflow.com/questions/66793213/esxframebufferobjectdetachallesxcontext-segfault-crash-in-react-native-proj
Thanks!