throwIfAborted not supported in older browsers

[magnusdr]

maplibre-gl-js version: 5.18.0

browser: Just tested on Google Chrome 87. Caniuse.com states it's not supported before Google Chrome 100

Steps to Trigger Behavior

1. Visit any of the examples on maplibre.org in a browser older than Google Chrome 100
2. Open console, see an error like .signal.throwIfAborted is not a function (ajax.ts:186)

Seems to originate from here:

maplibre-gl-js/src/util/ajax.ts

Line 186 in 5102ccb

abortController.signal.throwIfAborted();

Expected Behavior

Support for older browsers. As of today, caniuse.com reports that around 5% of browsers do not support throwIfAborted

Actual Behavior

Not compatible with older browsers

[HarelM]

You can use older versions of the library, but we don't aim to support browsers that old, sorry...

[sven-meyer-wetter-com]

We've discovered the same thing a couple of days ago. This is very unfortunate because Safari until version 15.3 is also affected by this change. This browser is not sooo old imho. The throwIfAborted method was introduced in maplibre 5.14. And currently there's only one single use of it. It would have been nice to have at lease some warning in the release notes about that minimal browser requirements where tightened.

[HarelM]

I don't think we need to polyfill, this was just a "better looking code", and I might have missed that in the review.
If this is the only thing that's stopping from Chrome 100 or safari 15.3 to work I don't mind a PR to revert this specific code change.
It's hard to really know what code changes will break each browser so we don't write it in the changelog or release notes, and you can always pin the relevant version if you need to support olds browsers and only upgrade when tested.

The relevant PR that changed it was the following:

• Gracefully handle AbortErrors #6747

CC: @andrewda who made the PR.

[andrewda]

It looks like the two specific capabilities in this PR that would need modification to support Chrome 99 and 15.3 are throwIfAborted and AbortSignal.reason. It’s not unreasonable to modify the code to not make use of either, but it does require some re-work. I would suggest against reverting the PR since it was effectively a bug fix for 95.1% of browsers.

I am curious for a more definitive stance on what browser age or global usage percent we do want to support, though. All browsers released in the last 4 years support these features. By making these changes, we’re at best only bringing compatibility back to Chrome 66 and Safari 15.1, which according to caniuse is only a 0.7% improvement. I’m somewhat hesitant to explicitly decide against using widely-accepted “new” web standards simply to support 4-year-old browsers, particularly without a way to automatically detect future breakages like this in CI.

[HarelM]

I think that some code changes can be done and we can support ad-hoc cases like this one.
If someone needs this support they can also invest the time to fix these issues and open PRs. We can support the needs of the community if someone will open the relevant PRs but I don't expect all contributors to think about it when opening a PR for new features.
I don't think the PR needs to be reverted, just adjusted a bit...

[sven-meyer-wetter-com]

Here's a small polyfill for throwIfAborted that at least improves the situation for older Chrome browsers. I tested with Chrome >= 77 in our project and got no errors anymore. Should help in some other older browsers as well.

The Function statement (implied eval()) can be replaced by just adding the throwIfAbortedPolyfillCode code as "real" code again.

import { importScriptInWorkers } from "maplibre-gl";

const throwIfAbortedPolyfillCode = `
  if (!AbortSignal.prototype.throwIfAborted) {
    AbortSignal.prototype.throwIfAborted = function() {
      if (this.aborted) {
        throw (this.reason !== undefined ? this.reason : new DOMException('Aborted', 'AbortError'));
      }
    };
  }
`;

// polyfill throwIfAborted in main thread
Function(throwIfAbortedPolyfillCode)();

// polyfill throwIfAborted in web workers
void importScriptInWorkers(
    URL.createObjectURL(
        new Blob([throwIfAbortedPolyfillCode], {
            type: "application/javascript",
        }),
    ),
);

[HarelM]

Thanks for sharing this workaround!!