There was a DOMException in Angular because the transaction is not active when trying to execute 'getAll' on 'IDBObjectStore'

private get ctxMessage() {
    const messageTransaction = this.db.transaction('messages', 'readwrite');
    const messageStore = messageTransaction.objectStore('messages');
    return { messageTransaction, messageStore };
}


private async getAllMessage(message: Message) {
    const { messageStore ,messageTransaction } = this.ctxMessage;
    const result =  await messageStore.getAll();
    return result
}

Encountering an issue where the transaction is not active when attempting to invoke the getAllMessage method.

Utilizing the idb npm package in my implementation.

Answer №1

It is essential that the call to getAll takes place within the same event loop iteration as db.transaction(...). This is because a transaction is considered complete when there are no pending requests detected at the end of the current event loop iteration. The reason for this error is attempting to initiate an IDBRequest on a transaction that has already finished and is no longer active. To resolve this issue, adjust the code so that getAll is invoked immediately after creating the transaction. One straightforward solution is to generate a new transaction each time you need to use getAll.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Get the image resolution at the same time

I need a function that can take a URL pointing to an image as a parameter and synchronously provide the resolution of that image. The function should pause execution until the image is fully retrieved. Here is an example of what I'm looking for: func ...

Making an HTTP request from Angular 6 to a Node.js server

While attempting to send an HTTP request from Angular to a Node.js server, I encountered the following error on the Angular side: "Access to XMLHttpRequest at 'http://localhost:5030/employees/save' from origin 'http://localhost:4200' h ...

Inquiry about JavaScript Arrow Function syntax issue

At the outset, I apologize for the vague title. It's challenging to explain without a direct demonstration. As a newcomer to JavaScript, I've been diving into arrow functions. However, there's a syntax of arrow function that I'm unfamil ...

Is there a way to simulate the parameters of a method callback from an external dependency in Nodejs

Imagine a scenario where I have the following structure: lib/modules/module1.js var m2 = require('module2'); module.exports = function(){ return { // ... get: function(cb){ m2.someMethod(params, function(error, ...

TypeScript does not automatically determine the type of a passed generic parameter

I am currently working on defining flexible types for my api responses, but I am struggling to find the right approach for type conversion using TypeScript 4.5.4. My goal is to parse the response and determine the type that will be used later in the code. ...

Is it possible to return a promise after utilizing .then() in AngularJS?

As someone who is still getting the hang of Angular and promises, I want to make sure I'm on the right track. Right now, my data layer service uses Restangular to fetch data and returns a promise. Here's how it looks... dataStore.getUsers = fun ...

How to automatically insert a comma into numbers as you type in Vue.js

I am trying to insert separators in my numbers as I type, but for some reason it is not working. Sample Code <el-input-number v-model="form.qty" style="width: 100%;" id="test" placeholder="Quantity" controls-position="right" v-on:keyup="handleChange" ...

What is causing the dysfunction of angular2 form when used with the HTML <form> tag?

Can someone explain the strange behavior of the <form> element in ng2 to me? I have noticed something odd and need some clarification :) To demonstrate, I have created a simple Plunker example at this link: https://plnkr.co/edit/vdrHJBNdd26y6YhPXTHD ...

Navigating through Next.js for slug URLs such as site.com/username

Can someone help me figure out how to create a profile page for each username, like site.com/jack or site.com/jill? I'll be pulling the username info from an API that also contains the user ID and email. I'm new to Next.js and would really appre ...

Having trouble customizing the Material UI button in React?

For a recent project, I utilized the older version (v1) of Material UI to ensure compatibility with Node 10.8. In order to implement a round button, I referred to this demo. The round mini button functioned perfectly without any applied themes. <Button ...

Is there a way to automatically remove a video using JavaScript once it has completed playing?

This is my HTML section: <section id ="information"> <video id ="videoName" width="800" height="400" controls onplay="myAnimationPicture()""> <source src="video/videoName.mp4" ; type="video/mp4"> Your browser does not support the ...

Ways to troubleshoot issues that arise when updating the node version

After upgrading my version, I encountered a serious error. I developed a program a few years ago using version 18.x. Now that I have upgraded node.js, I am facing some errors. Below are the error messages: ERROR in ./app/assets/scss/styles.scss (./node_mo ...

Most effective method to avoid updating a node_modules package

tag: After downloading and installing a node_module (npm package)... I have customized the internal files within the node_modules folder to better fit my requirements. Although using it as a node_module is most convenient for me, I am concerned that futur ...

What is the best way to initiate a collapsed jQuery toggle?

Is there a way to make a jQuery toggle collapsed by default? I've looked at some examples, but none of them seemed to fit my specific setup and I couldn't quite figure them out. Here's the HTML code: <table border="0" width="100%" alig ...

Instructions for activating the routerLink feature within a mat-tab

I recently implemented lazy loading for a feature module in my Angular app by configuring the routing in Routing.module.ts from app-routing.module.ts. The default route in the featured routing module loads the LccpTrackerComponent, which contains 3 child r ...

"What is the best way to manipulate arrays in vue.js using the map function

I'm currently dealing with a Vue code that incorporates anime.js. My code has grown substantially to over 1500 lines. In order for Stack Overflow to accept my question, I have only included 5 items of my sampleText, even though it actually consists of ...

I attempted to log the elements of my submit button form, but unfortunately nothing is appearing in the browser console

I am attempting to capture the data from my submit button form, but for some reason, nothing is showing up in the console of my browser. $("#signupform").submit(function(event){ // Stopped default PHP processing event.preve ...

Switching from the `async` pipe to `ngrxPush` for handling state updates in Angular

While utilizing Angular schematics for generating my Angular code, I came across the following line ngrx-push-migration - Migration to replace async pipe with ngrxPush This piqued my interest, so I decided to do some research and discovered The ngrxPu ...

"Learn how to utilize array values in TypeScript to easily display them using NgFor in HTML

Looking for a solution: <select (change)="getYear(year)"> <option value="year" *ngFor="let var of array; let i = index" {{year.year}} </option> </select> Is there a way to configure the typescript code so that I can dynamica ...

What are some solutions for troubleshooting setInterval issues?

I have a h1 element with a v-for loop that displays items from my array in the following format: <h1 v-for="(record, index) of filteredRecords" :key="index" :record="record" :class="get ...