Add CORS error detection and convert the TypeError to AJAXError

[jonathanlurie]

Launch Checklist

• Confirm your changes do not include backports from Mapbox projects (unless with a compliant license) - if you are not sure about this, please ask!
• Briefly describe the changes in this PR.
• Link to related issues.
• Include before/after visuals or gifs if this PR includes visual changes.
• Write tests for all new functionality. Read bellow
• Document any changes to public APIs.
• Post benchmark scores.
• Add an entry to CHANGELOG.md under the ## main section.

Description

This PR addresses how failed HTTP requests due to CORS policy are handled. So far, if a request fails because of CORS, it does not return a response, instead, it makes the browser throw a generic TypeError ( see here ). As a result, a map instance subscribing to the "error" event would catch a generic error that does not include the faulty URL. It is better to handle a CORS error with an AJAXError, that contains information about the URL and the cause of the actual problem.

This is especially useful in the context of loading a style.json so that if a given style is not reachable because of CORS, it is possible to catch this error with the same efficiency as if fetching a style.json would yield an HTTP 5xx status code, since in both cases the request would fails due to server configuration.

Before / After

With this minimalist snippet:

const map = new maplibregl.Map({
  container: 'map',
  style: "https://example.com/style.json",
});

map.on("error", (err) => {
  console.log(">>> ", err);
}) 

Here is the console output,

• BEFORE:

• AFTER:

Test

I tried adding another test to src/util/ajax.test.ts but it is impossible to simulate a CORS with the Nise package's FakeServer, since a CORS error is not part of the server response but is due to the browser blocking it.

Other info

• This makes no change to public API.
• this does not affect performance

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 25.00000% with 6 lines in your changes missing coverage. Please review.

Project coverage is 90.69%. Comparing base (9ba25c6) to head (3fc4ca9).
Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
src/util/ajax.ts	0.00%	6 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4822      +/-   ##
==========================================
- Coverage   90.86%   90.69%   -0.17%     
==========================================
  Files         265      265              
  Lines       38098    38103       +5     
  Branches     3163     3166       +3     
==========================================
- Hits        34616    34559      -57     
- Misses       2538     2610      +72     
+ Partials      944      934      -10     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[HarelM]

Thanks for taking the time to report this issue!
Can this be tested using integration tests in browser or unit tests?

[jonathanlurie]

Thanks for taking the time to report this issue! Can this be tested using integration tests in browser or unit tests?

This is quite challenging to test since the fake server (nise) cannot simulate CORS issue or DNS resolution failures. I haven't find a way to test that yet.

[HarelM]

Why do we care if this is a network error then? If the missing information is that we want to get the url for the relevant fetch behavior, why not simply wrap any exception here with AJAXError?

[jonathanlurie]

Yes, that's a good point, we could do that. I am not aware of all the possible scenarios in which fetch would throw, but if it does, that's fair to call it an AJAXError regardless of the reason and to make the faulty URL part of it.

[HarelM]

Yes, all the tests set fetch to null, so this can't be really tested.

[jonathanlurie]

For some weird reason, this PR is now coming with other things from the main branch. Closing it and reopening it clean.

[jonathanlurie]

Clean version here #4931 , sorry for that!