[BUG] Can't load tiles: ClientException with SocketException: Connection attempt cancelled

[DEGoodmanWilson]

What is the bug?

I have implemented a very basic map view in an app—for several months, the map has operated as expected. But with 6.1.0, I am receiving a large number of "ClientException with SocketException" errors whenever I load the map, and no map tiles show. Panning the map doesn't help, but zooming the map often does trigger the tiles to load. I have attempted several tile providers, including OSM's open service and Lima Labs, so I know the problem isn't the tile provider. It has happened with my beta testers, so I know it's not my own network.

I tried using CancellableNetworkTileProvider, but the same problem persists…although the exceptions stop being thrown.

I suspect the issue may be related to #1698 but I can't be entirely sure.

How can we reproduce it?

FlutterMap(
  options: MapOptions(
    interactionOptions: const InteractionOptions(
      flags: InteractiveFlag.pinchZoom | InteractiveFlag.drag,
    ),
  ),
  children: [
    TileLayer(
      // tileProvider: CancellableNetworkTileProvider(),
      urlTemplate:
          'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
      userAgentPackageName: 'FOOBAR',
    ),
  ],
),

Yes, just this simple…

Do you have a potential solution?

No response

Platforms

iOS 17

Severity

Erroneous: Prevents normal functioning and causes errors in the console

[JaffaKetchup]

Hi @DEGoodmanWilson,
Thanks for the info.
Could you please try depending on the 'improve-image-provider' branch from git, and let me know if that solves the issue? Follow https://docs.fleaflet.dev/getting-started/installation#from-github.com, and use the commented out ref line.

[JaffaKetchup]

I'm going to group this as closeable by #1742. If it isn't resolved by it, then we can reopen this!

[pento]

@JaffaKetchup: #1742 certainly improved this issue, I see it a lot less frequently when building my app against master (as of this comment, 24ceb32). Unfortunately, I still do encounter it. It's not as easy to reproduce, but I find that the following steps will usually reproduce it after a few tries:

1. Have a map that's scrolled out of view.
2. Scroll the map into view, change zoom levels a few times.
3. Scroll the map out of view again.
4. Repeat until you start seeing errors.

Sample Error Stack

======== Exception caught by image resource service ================================================
The following _ClientSocketException was thrown resolving an image codec:
ClientException with SocketException: Failed host lookup: 'api.mapbox.com' (OS Error: nodename nor servname provided, or not known, errno = 8), uri=https://api.mapbox.com/styles/v1/<me>/<a-map-style>/tiles/x/y/z@2x?access_token=<my-token>

When the exception was thrown, this was the stack: 
#0      IOClient.send (package:http/src/io_client.dart:122:7)
<asynchronous suspension>
#1      RetryClient.send (package:http/retry.dart:115:20)
<asynchronous suspension>
#2      BaseClient._sendUnstreamed (package:http/src/base_client.dart:93:32)
<asynchronous suspension>
#3      BaseClient.readBytes (package:http/src/base_client.dart:58:22)
<asynchronous suspension>
#4      NetworkTileProvider.getImage.<anonymous closure> (package:flutter_map/src/layer/tile_layer/tile_provider/network_tile_provider.dart:70:31)
<asynchronous suspension>
#5      ImmutableBuffer.fromUint8List (dart:ui/painting.dart:6634:3)
<asynchronous suspension>
#6      PaintingBinding.instantiateImageCodecWithSize (package:flutter/src/painting/binding.dart:137:3)
<asynchronous suspension>
#7      MultiFrameImageStreamCompleter._handleCodecReady (package:flutter/src/painting/image_stream.dart:985:3)
<asynchronous suspension>
URL: https://api.mapbox.com/styles/v1/<me>/<a-map-style>/tiles/8/232/155@2x?access_token=<my-token>
Fallback URL: null
Current provider: MapNetworkImageProvider()
====================================================================================================

Interestingly, if I trigger the error, but then continue repeating the steps above, I'll start to see this error in the mix:

flutter: ClientException with SocketException: Connection failed (OS Error: Too many open files, errno = 24), address = api.mapbox.com, port = 443, uri=https://api.mapbox.com/styles/v1/<me>/<a-map-style>/tiles/x/y/z@2x?access_token=<my-token>

Suggesting that perhaps there's an issue with freeing file handles for network images that fail to load, too?

[JaffaKetchup]

That's likely a slightly different issue. Mapbox starts rate limiting after a while and gets very slow. If you're zooming in and out, the HTTP connections will stack up and stack up waiting for their turn to get a response.
It could also be possible that we're not closing something properly.
Have you tried the cancelling tile provider?

[pento]

Thanks for the suggestion! Adding CancellableNetworkTileProvider() fixes that issue. 🙂