OPFS file handler error when clearing browser cache and reloading

[JamesAlp]

When connecting to OPFS you can clear your browser cache and then reload your page to get the following file handler error:

Error connecting to OPFS: Error: Failed to execute 'createSyncAccessHandle' on 'FileSystemFileHandle': Access Handles cannot be created if there is another open Access Handle or Writable stream associated with the same file.

My thinking on this is that because the user clears the cache there was no opportunity for duckdb-wasm to do any unmount or beforeunload logic to close the file handler so it stays open and causes an error. I am seeking a resolution for this issue.

I will provide a minimum create react app application with a super basic example attached. I will also copy and paste the relevant code to reproduce here, you can just drop this into a fresh CRA if you wish to instead.

duckdb-wasm-opfs-error.zip

import * as duckdb from '@duckdb/duckdb-wasm';
import { AsyncDuckDB, ConsoleLogger, getJsDelivrBundles, selectBundle } from '@duckdb/duckdb-wasm';

function App() {
  const test = async () => {
    console.log('Initializating database...');

    const logger = new ConsoleLogger();
    const bundles = getJsDelivrBundles();
    const bundle = await selectBundle(bundles);
    const worker = new Worker(
      URL.createObjectURL(
        new Blob([`importScripts("${bundle.mainWorker}")`], { type: "application/javascript" })
      )
    )
    const database = new AsyncDuckDB(logger, worker);

    try {
      await database.instantiate(bundle.mainModule, bundle.pthreadWorker);
      console.log('Opened the database.');
    }
    catch (err) {
      console.error(`Error opening the database: ${err}`);
    }

    // connect to OPFS
    try {
      await database.open({
        path: 'opfs://database.db',
        accessMode: duckdb.DuckDBAccessMode.READ_WRITE
      });
      console.log('Connected to OPFS.');
    }
    catch (err) {
      console.error(`Error connecting to OPFS: ${err}`);
    }

    // connect database
    try {
      await database.connect();
      console.log('Connected to database.');
    }
    catch (err) {
      console.log(`Error connecting to database: ${err}`);
    }
  }

  test();

  return (
    <div>
      test
    </div>
  );
}

export default App;

To Reproduce

cd into project folder

run the following commands:

• npm install
• npm start

Then perform the following steps:

• Let the application finish loading in the browser.
• Clear all browser cache.
• Reload the page to generate the error.

Browser/Environment:

Chrome

Device:

Any

DuckDB-Wasm Version:

1.31.0

DuckDB-Wasm Deployment:

1.31.0

Full Name:

James Alphonse

Affiliation:

n/a