mapbox / mapbox/mapbox-gl-js

Canceled vector tile requests show "failed to fetch" information in the console

Open
#13,123 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

Hello there!

I have a vector tile server (https, on Azure) that serves vector tiles data (application/x-protobuf) to the frontend, and the frontend is using mapbox-gl-js and angular.

In Google Chrome, the connection would fail occasionally with the error as "Err_connection_closed". It normally fires when there are zoom level changes with other canceled tile fetches. The annoying part is that it leaves hundreds of ambiguous "failed to fetch" error in the console.
image
image

The failed connections if I call again specifically, will all return 200 or 204 normal responses. That's why I believe it is not a real failure from the server, but something in the middle is playing up.

Other interesting bits:
* It seems not happening with the same server but http endpoint
* It seems the error in the console mostly happens in Firefox and Chrome but not Safari on MacOS
* It happens on localhost and remote
* It happens in mapbox-gl-js version 1, 2, and 3

While I can't guarantee this must be a mapbox issue, it would be helpful to point out something we could test out from the mapbox side.

**mapbox-gl-js version**: 3.2, 2.5, 1.13 (multiple versions)

**browser**: Google Chrome, Firefox

### Steps to Trigger Behavior

1. Start with a mapbox basemap and a the vector tile layer (e.g. points). The map is set at low zoom level (5.5).
2. Click on one of the features (i.e. a point), and the map will zoom to that location by calling `map.flyTo({center: coords, zoom: 16})`
3. When the map is flying to that particular location, there are a lot of cancelled tile requests from the zoom levels in between. While these are normal and handled by internally, some of the requests, which I believe should also be canceled requests, are shown as `(failed) net::ERR_CONNECTION_CLOSED`. (see the screenshot above) If these endpoints are called specifically for a second time, they all return success responses (either 200 or 204).

### Link to Demonstration

Sorry it is not a public application, but happy to provide further information.

### Expected Behavior
The cancelled tile requests should not log fetch error in the console.
### Actual Behavior
Significant number of fetch errors in the console.

Thank you!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No source file, test, or public demonstration is named. Start by reproducing the issue with a vector-tile layer, a low-zoom map, and map.flyTo while observing canceled requests in Chrome or Firefox; done means canceled tile requests no longer produce fetch errors in the console.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.