Mapbox-gl-js: iOS Safari Console Error 'Unhandled Promise Rejection: AbortError: Fetch is aborted'

[nbertrand-bh]

mapbox-gl-js version: 1.1.0

browser: iOS Safari on iOS 12.3.1

Steps to Trigger Behavior

1. Load up a map on iOS Safari: https://docs.mapbox.com/mapbox-gl-js/example/simple-map/
2. Start scrolling around, pinch/zoom, etc.
3. Error will pop up on the aborted fetch.

Link to Demonstration

https://docs.mapbox.com/mapbox-gl-js/example/simple-map/

Expected Behavior

We recently upgraded our maps from 0.53.1 to 1.1.0. Prior to our upgrade, these errors were not logging in Bugsnag. I also fired up a branch right before we upgraded and was not able to get the error to log into the console. The map continues to work normally even with these errors.

Expected behavior is for these errors to not be logged to the console.

Actual Behavior

Error is thrown into console.
This is the console from

[ryanhamley]

I'm having trouble recreating this error. Does it happen every time? How long does it usually take to create the error? I'm also using Safari on iOS 12.3.1.

[nbertrand-bh]

It doesn't happen every time. Doing some more testing it seemed to happen more if I zoom out to US level then zoom in quickly to a new part of the map. I was just able to re-create it 7/10 times on the example simple map.

Some possible good news, I went back and checked our bugsnag and saw it was also happening on OSX safari. So I went to test it and it was very easily recreated there.

[hulsizer]

@ryanhamley Any update on this?

[ryanhamley]

Hi @hulsizer and @nbertrand-bh thanks for your patience. ~I took a look at this and my initial diagnosis is that this may be related to a known Safari bug in which Fetch.abortController is implemented in Safari but doesn't actually do anything in certain versions. I'm not sure there's much we can do here but the good news is that this seems to be fairly harmless.~

On second thought, this seems to be caused by fetch tasks piling up in the worker thread due to a heavy workload (rapid zooming) and apparently some of the requests are not getting cancelled correctly. It's still mostly harmless but obviously not ideal. As luck would have it though, I believe this new PR (https://github.com/mapbox/mapbox-gl-js/pull/8633) from a member of our team fixes this issue. I tested the branch out and have so far been unable to reproduce the issue in Safari.

[nbertrand-bh]

Just a heads up. We just updated to the latest version (1.6.0) and it's still showing up. Don't need to re-open it, and we're just going to permanently mute the bugsnag error for this since it does appear harmless.

[malwoodsantoro]

Reopening this issue as I've been able to reproduce it using v1.6.0. I used a simple example (see https://jsfiddle.net/scLqt0o3/) and panned in and out very quickly several times until the error appeared.

Safari v13.0.4
Mapbox v1.6.1

[Plantain]

We are seeing thousands of these in the wild every day, almost all from iOS/Safari.

[jpopham]

Also getting them in Mac/Safari

[katydecorah]

The Docs team's Sentry alerted this issue as well.

You can reproduce by zooming in and out of this map in Safari (Version 13.0.5 (15608.5.11)): https://docs.mapbox.com/studio-manual/examples/hillshade/

[erinmeyers88]

Hello, I am also experiencing this issue.

Browsers: Safari 14 on Catalina 10.15.7 and Safari on iOS 13.7

I encounter the issue when zooming in/out quickly. It seems to occur much more frequently when the hillshade layer is turned on and causes my app to freeze temporarily. Without the hillshade layer, the issue occurs less frequently and it doesn't seem to affect the user experience.

[kcoyner]

I am also seeing this issue.

Mobile Safari 14.0.1 on iOS 14.2 and iOS 14.3.

[asheemmamoowala]

Looks like a bug in Safari/Webkit: https://bugs.webkit.org/show_bug.cgi?id=215771