ajaxerror not serialized properly

CHANGELOG.md

@@ -14,6 +14,7 @@
 
 - ⚠️ Allow breaking lines in labels before a left parenthesis ([#4138](https://github.com/maplibre/maplibre-gl-js/pull/4138))
 - ⚠️ Fix ignoring embedded line breaks when `symbol-placement` is `line` or `line-center` ([#4124](https://github.com/maplibre/maplibre-gl-js/pull/4124))
+- Fix AjaxError not properly serialized ([#4024](https://github.com/maplibre/maplibre-gl-js/pull/4211))
 - _...Add new stuff here..._
 
 ## 4.3.2

jest.config.ts

@@ -35,7 +35,7 @@ const config: Config = {
     projects: [
         {
             displayName: 'unit',
-            testEnvironment: 'jsdom',
+            testEnvironment: './jest.jsdom.environment.ts',
             setupFiles: [
                 'jest-webgl-canvas-mock',
                 './test/unit/lib/web_worker_mock.ts'

jest.jsdom.environment.ts

@@ -0,0 +1,10 @@
+import JSDOMEnvironment from 'jest-environment-jsdom';
+
+export default class FixJSDOMEnvironment extends JSDOMEnvironment {
+    constructor(...args: ConstructorParameters<typeof JSDOMEnvironment>) {
+        super(...args);
+
+        // https://github.com/jsdom/jsdom/issues/3363
+        this.global.structuredClone = structuredClone;
+    }
+}

src/util/web_worker_transfer.test.ts

@@ -1,5 +1,11 @@
+import {AJAXError} from './ajax';
 import {register, serialize, deserialize} from './web_worker_transfer';
 
+const mockTransfer = (input, transferables?) => {
+    const serialized = serialize(input, transferables);
+    return deserialize(structuredClone(serialized, {transfer: transferables}));
+};
+
 describe('web worker transfer', () => {
     test('round trip', () => {
         class SerializableMock {
@@ -11,7 +17,7 @@ describe('web worker transfer', () => {
             constructor(n) {
                 this.n = n;
                 this.buffer = new ArrayBuffer(100);
-                this.blob = new Blob();
+                this.blob = new Blob(['Test'], {type: 'application/text'});
                 this.squared();
             }
 
@@ -28,15 +34,20 @@ describe('web worker transfer', () => {
 
         const serializableMock = new SerializableMock(10);
         const transferables = [];
-        const deserialized = deserialize(serialize(serializableMock, transferables)) as SerializableMock;
-        expect(deserialize(serialize(serializableMock, transferables)) instanceof SerializableMock).toBeTruthy();
-
+        const deserialized = mockTransfer(serializableMock, transferables) as SerializableMock;
+        expect(deserialized instanceof SerializableMock).toBeTruthy();
+        expect(transferables[0] === serializableMock.buffer).toBeTruthy();
+        expect(serializableMock.buffer.byteLength).toBe(0);
+        expect(deserialized.buffer.byteLength).toBe(100);
         expect(serializableMock !== deserialized).toBeTruthy();
         expect(deserialized.constructor === SerializableMock).toBeTruthy();
         expect(deserialized.n === 10).toBeTruthy();
-        expect(deserialized.buffer === serializableMock.buffer).toBeTruthy();
-        expect(deserialized.blob === serializableMock.blob).toBeTruthy();
-        expect(transferables[0] === serializableMock.buffer).toBeTruthy();
+        expect(serializableMock.blob.size).toBe(4);
+        // seems to be a problem with jsdom + node. it works in
+        // node and it works in browsers
+        // expect(structuredClone(new Blob())).toBeInstanceOf(Blob);
+        // expect(deserialized.blob.size).toBe(4);
+
         expect(deserialized._cached === undefined).toBeTruthy();
         expect(deserialized.squared() === 100).toBeTruthy();
     });
@@ -46,7 +57,7 @@ describe('web worker transfer', () => {
         expect(!Klass.name).toBeTruthy();
         register('Anon', Klass);
         const x = new Klass();
-        const deserialized = deserialize(serialize(x));
+        const deserialized = mockTransfer(x);
         expect(deserialized instanceof Klass).toBeTruthy();
     });
 
@@ -75,9 +86,21 @@ describe('web worker transfer', () => {
         const customSerialization = new CustomSerialization('a');
         expect(!customSerialization._deserialized).toBeTruthy();
 
-        const deserialized = deserialize(serialize(customSerialization)) as CustomSerialization;
-        expect(deserialize(serialize(customSerialization)) instanceof CustomSerialization).toBeTruthy();
+        const deserialized = mockTransfer(customSerialization) as CustomSerialization;
+        expect(mockTransfer(customSerialization) instanceof CustomSerialization).toBeTruthy();
         expect(deserialized.id).toBe(customSerialization.id);
         expect(deserialized._deserialized).toBeTruthy();
     });
+
+    test('AjaxError serialization', () => {
+        const status = 404;
+        const statusText = 'not found';
+        const url = 'https://example.com';
+
+        const ajaxError = new AJAXError(status, statusText, url, new Blob());
+        const deserialized = mockTransfer(ajaxError) as AJAXError;
+        expect(deserialized.status).toBe(404);
+        expect(deserialized.statusText).toBe(statusText);
+        expect(deserialized.url).toBe(url);
+    });
 });

src/util/web_worker_transfer.ts

@@ -91,6 +91,20 @@ function isArrayBuffer(value: any): value is ArrayBuffer {
            (value instanceof ArrayBuffer || (value.constructor && value.constructor.name === 'ArrayBuffer'));
 }
 
+function isRegistered(input: unknown) {
+    if (input === null || typeof input !== 'object') {
+        return false;
+    }
+    const klass = (input.constructor as any);
+    if (klass._classRegistryKey && klass._classRegistryKey !== 'Object') {
+        return true;
+    }
+    if ((<SerializedObject>input).$name) {
+        return true;
+    }
+    return false;
+}
+
 /**
  * Serialize the given object for transfer to or from a web worker.
  *
@@ -104,7 +118,8 @@ function isArrayBuffer(value: any): value is ArrayBuffer {
  * this should happen in the client code, before using serialize().)
  */
 export function serialize(input: unknown, transferables?: Array<Transferable> | null): Serialized {
-    if (input === null ||
+    if (!isRegistered(input) && (
+        input === null ||
         input === undefined ||
         typeof input === 'boolean' ||
         typeof input === 'number' ||
@@ -115,7 +130,8 @@ export function serialize(input: unknown, transferables?: Array<Transferable> |
         input instanceof Date ||
         input instanceof RegExp ||
         input instanceof Blob ||
-        input instanceof Error) {
+        input instanceof Error)
+    ) {
         return input;
     }
 
@@ -206,7 +222,8 @@ export function serialize(input: unknown, transferables?: Array<Transferable> |
 }
 
 export function deserialize(input: Serialized): unknown {
-    if (input === null ||
+    if (!isRegistered(input) && (
+        input === null ||
         input === undefined ||
         typeof input === 'boolean' ||
         typeof input === 'number' ||
@@ -217,11 +234,12 @@ export function deserialize(input: Serialized): unknown {
         input instanceof Date ||
         input instanceof RegExp ||
         input instanceof Blob ||
-        input instanceof Error ||
         isArrayBuffer(input) ||
         isImageBitmap(input) ||
         ArrayBuffer.isView(input) ||
-        input instanceof ImageData) {
+        input instanceof ImageData ||
+        input instanceof Error
+    )) {
         return input;
     }
 
@@ -230,7 +248,7 @@ export function deserialize(input: Serialized): unknown {
     }
 
     if (typeof input === 'object') {
-        const name = input.$name || 'Object';
+        const name = (<SerializedObject>input).$name || 'Object';
         if (!registry[name]) {
             throw new Error(`can't deserialize unregistered class ${name}`);
         }