DOMException: Failed to execute 'transaction' on 'IDBDatabase': The database connection is closing.

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

DataStore

Amplify Categories

Not applicable

Environment information

# Put output below this line
 System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
    Memory: 7.05 GB / 15.84 GB
  Binaries:
    Node: 14.18.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.34)
  npmPackages:
    @aws-amplify/core: ^4.3.8 => 4.3.8
    @aws-amplify/datastore: ^3.7.0 => 3.7.0
    @babel/helper-call-delegate: ^7.12.1 => 7.12.13
    @capacitor-community/electron: ^4.0.3 => 4.0.3
    @capacitor/android: ^3.3.1 => 3.3.1
    @capacitor/app: ^1.0.5 => 1.0.6
    @capacitor/core: ^3.3.1 => 3.3.1
    @capacitor/device: ^1.0.5 => 1.0.6
    @material-ui/core: ^4.11.3 => 4.12.3
    @material-ui/icons: ^4.11.2 => 4.11.2
    @testing-library/jest-dom: ^5.11.9 => 5.15.0
    @testing-library/react: 12.1.2 => 12.1.2
    @testing-library/user-event: ^13.5.0 => 13.5.0
    @types/crypto-js: ^4.0.2 => 4.0.2
    @types/intl-tel-input: ^17.0.3 => 17.0.4
    @types/jest: ^27.0.2 => 27.0.2
    @types/node: 16.11.6 => 16.11.6
    @types/qrcode.react: ^1.0.1 => 1.0.2
    @types/react: ^17.0.30 => 17.0.34
    @types/react-dom: ^17.0.0 => 17.0.11
    @types/uuid: ^8.3.0 => 8.3.1
    @typescript-eslint/eslint-plugin: 5.3.0 => 5.3.0 (4.33.0)
    @typescript-eslint/parser: 5.3.0 => 5.3.0 (4.33.0)
    array-move: ^4.0.0 => 4.0.0
    clsx: ^1.1.1 => 1.1.1
    crypto-js: ^4.1.1 => 4.1.1
    eslint-plugin-prettier: ^4.0.0 => 4.0.0
    eslint-plugin-react: ^7.26.1 => 7.26.1
    eslint-plugin-react-hooks: ^4.2.0 => 4.2.0
    graphql: ^16.0.1 => 16.0.1 (14.5.0, 14.0.0)
    graphql-tag: ^2.12.6 => 2.12.6
    i18next: ^21.3.2 => 21.4.0
    intl-tel-input: ^17.0.13 => 17.0.13
    jwt-decode: ^3.1.2 => 3.1.2
    ksuid: ^3.0.0 => 3.0.0
    prettier: ^2.4.1 => 2.4.1
    qrcode.react: ^1.0.1 => 1.0.1
    react: ^17.0.1 => 17.0.2
    react-dnd: ^14.0.4 => 14.0.4
    react-dnd-html5-backend: ^14.0.2 => 14.0.2
    react-dom: ^17.0.1 => 17.0.2
    react-i18next: ^11.12.0 => 11.13.0
    react-indiana-drag-scroll: ^2.1.0 => 2.1.0
    react-loader-spinner: ^4.0.0 => 4.0.0
    react-scripts: 4.0.3 => 4.0.3
    react-simple-keyboard: ^3.3.7 => 3.3.26
    shelljs: ^0.8.4 => 0.8.4
    typescript: 4.4.4 => 4.4.4
    universal-cookie: ^4.0.4 => 4.0.4
  npmGlobalPackages:
    @aws-amplify/cli: 7.5.2
    cross-env: 7.0.3
    npm: 6.14.15
    yarn: 1.22.17

Describe the bug

Trying to clear datastore after a mutation causes this error: DOMException: Failed to execute ‘transaction’ on ‘IDBDatabase’: The database connection is closing.

Expected behavior

Should be able to wait for mutations to complete before disconnecting.

Reproduction steps

1. Make a mutation.
2. Clear datastore

Code Snippet

// Put your code below this line.

        //logout
        try {
          await DataStore.save(new DataTable(unsavedData));
          await DataStore.clear();
        } catch (e) {
          console.error('logout err', e);
        }

Log output

// Put your logs below this line

[DEBUG] 46:14.36 Hub - Dispatching to datastore with  {event: 'outboxMutationEnqueued', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.36 Hub - Dispatching to datastore with  {event: 'outboxMutationEnqueued', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.36 Hub - Dispatching to datastore with  {event: 'outboxMutationEnqueued', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.37 Hub - Dispatching to datastore with  {event: 'outboxMutationEnqueued', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.37 Hub - Dispatching to datastore with  {event: 'outboxMutationEnqueued', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.37 Hub - Dispatching to datastore with  {event: 'outboxStatus', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.37 Hub - Dispatching to datastore with  {event: 'outboxStatus', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.37 Hub - Dispatching to datastore with  {event: 'outboxStatus', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.38 Hub - Dispatching to datastore with  {event: 'outboxStatus', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.38 Hub - Dispatching to datastore with  {event: 'outboxStatus', data: {…}}
ConsoleLogger.ts:115 [DEBUG] 46:14.56 DataStore - Attempting mutation with authMode: API_KEY
ConsoleLogger.ts:115 [DEBUG] 46:14.56 Util -  attempt #1 with this vars: ["DataTable","Create","{\"test\":\"test\",\"id\":\"8ed1246f-6dfa-4b54-92d2-a3ae353d0d4a\"}","modelId":"8ed1246f-6dfa-4b54-92d2-a3ae353d0d4a","model":"DataTable","operation":"Create","condition":"{}","id":"01FNDT3TP0P2KJSKFTG7T43NWF"}]
ConsoleLogger.ts:125 [DEBUG] 46:14.58 RestClient - POST https://****.appsync-api.eu-west-1.amazonaws.com/graphql
ConsoleLogger.ts:125 [DEBUG] 46:14.96 Hub - Dispatching to datastore with  {event: 'outboxMutationEnqueued', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.96 Hub - Dispatching to datastore with  {event: 'outboxMutationEnqueued', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.96 Hub - Dispatching to datastore with  {event: 'outboxMutationEnqueued', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.96 Hub - Dispatching to datastore with  {event: 'outboxMutationEnqueued', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.97 Hub - Dispatching to datastore with  {event: 'outboxMutationEnqueued', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.97 Hub - Dispatching to datastore with  {event: 'outboxStatus', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.97 Hub - Dispatching to datastore with  {event: 'outboxStatus', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.97 Hub - Dispatching to datastore with  {event: 'outboxStatus', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.97 Hub - Dispatching to datastore with  {event: 'outboxStatus', data: {…}}
ConsoleLogger.ts:125 [DEBUG] 46:14.97 Hub - Dispatching to datastore with  {event: 'outboxStatus', data: {…}}
ConsoleLogger.ts:115 [DEBUG] 46:14.154 DataStore - Starting Storage

wrap-idb-value.js:150 Uncaught (in promise) DOMException: Failed to execute 'transaction' on 'IDBDatabase': The database connection is closing.
    at Proxy.<anonymous> (http://localhost:3000/static/js/vendors~main.chunk.js:342317:22)
    at IndexedDBAdapter.<anonymous> (http://localhost:3000/static/js/vendors~main.chunk.js:38191:26)
    at step (http://localhost:3000/static/js/vendors~main.chunk.js:37730:17)
    at Object.next (http://localhost:3000/static/js/vendors~main.chunk.js:37661:14)
    at fulfilled (http://localhost:3000/static/js/vendors~main.chunk.js:37615:24)

aws-exports.js

const awsmobile = {
    "aws_project_region": "eu-west-1",
    "aws_appsync_graphqlEndpoint": "https://.appsync-api.eu-west-1.amazonaws.com/graphql",
    "aws_appsync_region": "eu-west-1",
    "aws_appsync_authenticationType": "API_KEY",
    "aws_appsync_apiKey": "da2-"
};

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[chrisbonifacio]

No problem 😄 Let me know if that works for you!

[laclance]

Just got the same error now after running DataStore.clear() and I’ve had a stable internet connection and have not done a mutation.