Why Does My Synchronous SharedArrayBuffer Protocol Yield Occasional Corruption?

I’m implementing a system in which several web workers send postMessage requests to the main thread and then synchronously block for a response using a SharedArrayBuffer. Each worker waits via Atomics.wait until the main thread processes the request and updates the buffer. However, after thousands of messages, the SharedArrayBuffer occasionally contains corrupted JSON data. I’ve managed to force this error to occur frequently using an 80-line reproducible example.

Below is the code for the worker:

JAVASCRIPTCopied
//////////////////// WORKER
function workerFn() {
    const sab = new SharedArrayBuffer(1024 * 1024) // [0:4 Atomics.wait signal][4:8 data length][8:8+data length JSON data]
    const vi32 = new Int32Array(sab); // View needed for Atomics.wait
    const vui8 = new Uint8Array(sab); // View needed for TextDecoder
    const sbuf = { sab, vi32, vui8 };
    postMessage({ type: "sab", sab });

    let pl = 0;
    while (true) {
        postMessage({ type: "sync", payload: pl++ });
        
        // This ostensibly synchronously blocks until the first int32 of the SharedArrayBuffer changes
        // The main thread is responsible for changing this value and calling Atomics.notify()
        Atomics.wait(sbuf.vi32, 0, 0); // Wait for expected value to change
        Atomics.store(sbuf.vi32, 0, 0); // Reset expected value to 0 for next iteration
        
        // The data is JSON as utf-8 encoded uint8
        let data_length = sbuf.vi32[1];
        let data = new TextDecoder().decode(sbuf.vui8.slice(8, 8 + data_length)); // 8 byte offset for header

        let m;
        try {
            m = JSON.parse(data);
        } catch (e) {
            // This should never happen, yet it does
            throw new Error("How is this possible? Bad JSON:" + data);
        }

        if (m.cooldown > 0) {
            // Since this should never change until the next postMessage, we should be able to wait on it
            Atomics.wait(sbuf.vi32, 0, 0, m.cooldown); // Sometimes this returns something other than "timed-out" which should be impossible!
        }
    }
}

//////////////////// MAIN THREAD
let processedMessages = 0;
function onWorkerMessage(workerName, data) {
    if (data.type === 'sab') {
        console.log('Received SAB from', workerName)
        workers[workerName].sbuf = {
            sab: data.sab,
            vi32: new Int32Array(data.sab), // View needed for Atomics.store
            vui8: new Uint8Array(data.sab), // View needed for TextEncoder
        };
    } else if (data.type === 'sync') {
        processedMessages++;
        if (processedMessages % 10000 === 0) {
            console.log('Processed', processedMessages, 'messages')
        }

        // Do a little fake work
        for (let i = 0; i < 100; i++)
            Math.random();

        // Send a message back to the worker
        let m = { rv: data.payload % 2 === 0, cooldown: data.payload % 2 === 0 ? 0 : 0.5 };
        const rui8 = new TextEncoder().encode(JSON.stringify(m));
        const sbuf = workers[workerName].sbuf;

        Atomics.store(sbuf.vi32, 1, rui8.length);
        sbuf.vui8.set(rui8, 8);

        // Signal the worker that the data is ready
        Atomics.store(sbuf.vi32, 0, 1);
        Atomics.notify(sbuf.vi32, 0);
    }
}

//////////////////// INIT
let workers = {}
for (let i = 0; i < 20; i++) {
    console.log('Starting worker', i)
    let wf = workerFn.toString();
    wf = wf.substring(wf.indexOf('{') + 1, wf.lastIndexOf('}')) 
    const blob = new Blob([wf], { type: 'application/javascript' })
    const worker = new Worker(URL.createObjectURL(blob), { name: `worker${i}` })
    worker.onmessage = e => onWorkerMessage(`worker${i}`, e.data)
    workers[`worker${i}`] = worker
}

To run this code, it must be served via a web server that sets specific headers to enable SharedArrayBuffer. The following Python script sets the required headers:

PYTHONCopied
#!/usr/bin/env python
from http import server

class MyHTTPRequestHandler(server.SimpleHTTPRequestHandler):
    def end_headers(self):
        self.send_my_headers()
        server.SimpleHTTPRequestHandler.end_headers(self)

    def send_my_headers(self):
        self.send_header("Cross-Origin-Opener-Policy", "same-origin")
        self.send_header("Cross-Origin-Embedder-Policy", "require-corp")

if __name__ == "__main__":
    server.test(HandlerClass=MyHTTPRequestHandler)

Sample HTML file:

HTMLCopied
<!DOCTYPE html>
<html><script src="./atomics_bug.js"></script></html>

When running this example, the console output shows occasional errors indicating corrupted JSON responses:

This problem occurs in both Firefox and Chrome. Notably, if I alter the code so that the cooldown block explicitly checks the return value of Atomics.wait, I see many errors where the wait doesn’t time out as expected:

JAVASCRIPTCopied
        if (m.cooldown > 0) {
            // Since this should never change until the next postMessage, we should be able to wait on it
            let rv = Atomics.wait(sbuf.vi32, 0, 0, m.cooldown);
            if (rv !== 'timed-out') {
                // !!! This should never happen, yet it does
                throw new Error("How is this possible? Atomics.wait returned: " + rv);
            }
        }

Removing the entire if (m.cooldown > 0) block stops the issue from being reproducible, which makes this segment the likely source of the problem. I’m left wondering whether there’s a gotcha with Atomics.wait (such as spurious wake-ups or other subtle behaviors) or even a bug in its implementation.

Please share your insights on whether this discrepancy stems from a misunderstanding or an issue with JavaScript’s handling of atomic operations.