Error: Failed to execute 'transaction' on 'IDBDatabase' while changing routes

[fayeed]

While changing routes I get this error DOMException: Failed to execute 'transaction' on 'IDBDatabase': The database connection is closing.

I am using this inside web component which is then imported inside a Vue app, app/ component is not crashing or anything just seeing this as an error log.

[nolanlawson]

What browser/OS are you seeing this in? When you say "changing routes," what do you mean exactly? Are you changing routes in a multi-page app or single-page app – i.e. are these actual page navigations, or in-app pseudo-navigations?

I'm not sure it helps, but you may want to look into the Page Lifecycle API. In particular, in the section on the "frozen" event, note that it recommends "Close all open IndexedDB connections." In emoji-picker-element this can be accomplished with:

document.querySelector('emoji-picker').database.close()

[nolanlawson]

Related discussion: jensarps/IDBWrapper#80

[fayeed]

Hi Nolan, We have a web component library where we use this package and then use it inside an electron app which has a Vue app, it's a SPA. So what happens is that when we change the route I see the error in the logs.

[nolanlawson]

I see, so it's Chromium and this is an in-SPA pseudo-navigation. So I imagine the <emoji-picker> is getting unmounted from the DOM and closing the database connection.

Do you have a stacktrace? Or is it just the single warning message in the console?

Also I found a Chrome bug: https://crbug.com/1085724

[fayeed]

I see, so it's Chromium and this is an in-SPA pseudo-navigation. So I imagine the is getting unmounted from the DOM and closing the database connection.

Yeah I think so

Do you have a stacktrace? Or is it just the single warning message in the console?

Unfortunately no, it's just a single warning

[fayeed]

Thanks for the help though I will try out some suggestions that you made and get back to you.

[fayeed]

@nolanlawson Manually closing the database before changing the route fixed the issue. Thanks for all the help.

[nolanlawson]

Sounds good! Thanks.

[vmartinBT]

What browser/OS are you seeing this in? When you say "changing routes," what do you mean exactly? Are you changing routes in a multi-page app or single-page app – i.e. are these actual page navigations, or in-app pseudo-navigations?

I'm not sure it helps, but you may want to look into the Page Lifecycle API. In particular, in the section on the "frozen" event, note that it recommends "Close all open IndexedDB connections." In emoji-picker-element this can be accomplished with:

document.querySelector('emoji-picker').database.close()

This worked for me. Thanks!

[ekimber]

This does not work for me. Looks like the component gets unmounted by react before the database close function completes. Any suggestions?

[nolanlawson]

@ekimber Can you call database.close() (as described above) before the component unmounts?

[ekimber]

@ekimber Can you call database.close() (as described above) before the component unmounts?

I can call it before it unmounts, however, it is of course async, and from what I can observe, the unmount is occurring before the close promise completes

[ekimber]

Actually that may be wrong. I tried pausing execution there but it doesn't help.
Here is the stack trace:

    at eval (http://localhost:8280/_js/compiled/cljs-runtime/module$node_modules$emoji_picker_element$database.js:4:118)
    at new Promise (<anonymous>)
    at dbPromise (http://localhost:8280/_js/compiled/cljs-runtime/module$node_modules$emoji_picker_element$database.js:4:74)
    at get (http://localhost:8280/_js/compiled/cljs-runtime/module$node_modules$emoji_picker_element$database.js:14:68)
    at eval (http://localhost:8280/_js/compiled/cljs-runtime/module$node_modules$emoji_picker_element$database.js:9:76)
    at Array.map (<anonymous>)
    at hasData (http://localhost:8280/_js/compiled/cljs-runtime/module$node_modules$emoji_picker_element$database.js:9:67)
    at checkForUpdates (http://localhost:8280/_js/compiled/cljs-runtime/module$node_modules$emoji_picker_element$database.js:23:421)```

[nolanlawson]

You might need to do an unhandled rejection event listener or something.

database.close().catch(() => {}) may also work. This is a good blog post on the subject: https://jakearchibald.com/2023/unhandled-rejections/

[ekimber]

Thanks, I managed to get rid of the warning by doing this database.close().catch(() => {})
I have to do it as soon as the component is mounted. Odd, but it still seems to function ok.