Playground

Use the playground

Write code in the editor, then select "Run the code". The page compiles the code in your browser with the Babel preset of the library, the same preset as in an application. Then it starts the code with the real library and shows each step in the context debugger.

• Import AsyncLocalStorage or AsyncContext from async-browser-context. The playground cannot import other modules.
• Use log() to write to the console of the debugger. sleep(ms), fetchUser(id) and save(value) wait without a server.
• Select "Copy a link" to get a link that contains your code.

import { AsyncLocalStorage } from "async-browser-context";

const requestId = new AsyncLocalStorage();

async function handle(id, user) {
    await requestId.run(id, async () => {
        log(`[${requestId.getStore()}] load ${user}`);
        const name = await fetchUser(user);
        log(`[${requestId.getStore()}] hello, ${name}`);
        await save(name);
    });
}

async function save(name) {
    await sleep(5);
    log(`[${requestId.getStore()}] saved ${name}`);
}

await Promise.all([
    handle("r-1", "ada"),
    handle("r-2", "grace"),
]);

1import { AsyncLocalStorage } from "async-browser-context";2 3const requestId = new AsyncLocalStorage();4 5async function handle(id, user) {6    await requestId.run(id, async () => {7        log(`[${requestId.getStore()}] load ${user}`);8        const name = await fetchUser(user);9        log(`[${requestId.getStore()}] hello, ${name}`);10        await save(name);11    });12}13 14async function save(name) {15    await sleep(5);16    log(`[${requestId.getStore()}] saved ${name}`);17}18 19await Promise.all([20    handle("r-1", "ada"),21    handle("r-2", "grace"),22]);23 

Limits of the playground

• The code can make at most 4,000 steps, and it must end in 5 seconds. After the run, the playground stops the code that still operates.
• sleep() uses a clock that the page controls, so each run gives the same steps. Real timers, for example setTimeout, use the clock of the browser.
• The debugger shows the frames of run(). It does not show the internal functions of the library.