Error 'Failed to execute 'transaction' on 'IDBDatabase': The database connection is closing.' after Clear site data

[pavel-nitka]

Checks before posting an issue

• [x] I have read all the library's documentation:
  • README
  • CHANGELOG
  • MIGRATION
  • /docs
• [x] I have checked in already:
  • opened issues
  • closed issues
  • questions answered in the new "Discussions" tab
• [x] I understand I am writing to a human being, doing this project unpaid
• [x] I will be involved in my own issue, by answering questions and informing if the issue is resolved

Configuration

• @ngx-pwa/local-storage version:
• Angular version (ng version):

  "@ngx-pwa/local-storage": "^16.3.0",
  "@angular/core": "~16.2.12",

Description of the issue

After use 'Clear site data' button in Chrome (126.0.6478.127) storage becomes completely unusable and throws error 'Failed to execute 'transaction' on 'IDBDatabase': The database connection is closing.' for any operation until page will be refreshed.

How to reproduce the issue

1.Put something into storage

2. Open Dev tools, Application tab and press 'Clear site data' button

3. Try to read something from storage

[cyrilletuzi]

Hello,

This is the intended behavior.

indexedDb is not like localStorage, it is not a direct and simple read/write storage, it is a real database, which needs to be created first. The library does that for you, but if you delete the database itself, then it is normal that the following operations fail. The database will be recreated at the next initialization.

If you want to debug without having to refresh the page, delete the content of the indexedDb but not the database itself (nor using "clear site data" which delete the database itself too).

[pavel-nitka]

@cyrilletuzi Thank you for clarification. However we cannot prevent users from using "clear site data". I think great workaround for this issue could be recreate DB without refresh page. Does @ngx-pwa/local-storage has ability to manually re-initialize it? Something like: storage.close(); storage.initialize(); I didn't find anything in docs.

[cyrilletuzi]

However we cannot prevent users from using "clear site data"

"Clear site data" is a developer tool, so a real user does not do that. What a real user can do is "Clear history", and in Chromium-based browsers (and in other browsers too I think) it does not include indexedDb data by default. A user has to explicitly force a full clear history for that to happen, and when doing such a thing, it is usually in a process of either refresh the page or to close the browser. So in real world scenarios, the current behavior (recreating the database on next reload) is fine.

Does @ngx-pwa/local-storage has ability to manually re-initialize it?

Even if we decided to implement that, I am quite sure it is not possible. As you can see in the error message you shared, "The database connection is closing" (not "closed"), which means the browser will probably not allow to recreate the same database yet.

Also, the purpose of this library is to keep a simple API, similar to localStorage. For advanced and/or heavy use of indexedDb, the native API may/should be used directly.