emoji-picker-element: Error: Failed to execute 'transaction' on 'IDBDatabase' while changing routes

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.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 15 (6 by maintainers)

Most upvoted comments

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 on Aug 26, 2021