IDBTransaction: error event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

Theerror event is fired onIDBTransaction when a request returns an error and the event bubbles up to the transaction object.

Note:To handle all the ways a transaction can fail, consider listening for theabort event instead.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("error", (event) => { })onerror = (event) => { }

Event type

A genericEvent.

Bubbling

This event bubbles toIDBDatabase. Theevent.target property refers to theIDBTransaction object that bubbles up.

For more information, seeEvent bubbling.

Examples

This example opens a database and tries to add a record, listening for theerror event for theadd() operation (this will occur if, for example, a record with the giventaskTitle already exists):

// Open the databaseconst dBOpenRequest = window.indexedDB.open("toDoList", 4);dBOpenRequest.onupgradeneeded = (event) => {  const db = event.target.result;  // Create an objectStore for this database  const objectStore = db.createObjectStore("toDoList", {    keyPath: "taskTitle",  });  // define what data items the objectStore will contain  objectStore.createIndex("hours", "hours", { unique: false });  objectStore.createIndex("minutes", "minutes", { unique: false });  objectStore.createIndex("day", "day", { unique: false });  objectStore.createIndex("month", "month", { unique: false });  objectStore.createIndex("year", "year", { unique: false });};dBOpenRequest.onsuccess = (event) => {  const db = dBOpenRequest.result;  // open a read/write db transaction, ready for adding the data  const transaction = db.transaction(["toDoList"], "readwrite");  const objectStore = transaction.objectStore("toDoList");  const newItem = {    taskTitle: "my task",    hours: 10,    minutes: 10,    day: 10,    month: "January",    year: 2020,  };  transaction.addEventListener("error", () => {    console.log(`Error adding new item: ${newItem.taskTitle}`);  });  const objectStoreRequest = objectStore.add(newItem);};

The same example, using theonerror property instead ofaddEventListener():

// Open the databaseconst dBOpenRequest = window.indexedDB.open("toDoList", 4);dBOpenRequest.onupgradeneeded = (event) => {  const db = event.target.result;  // Create an objectStore for this database  const objectStore = db.createObjectStore("toDoList", {    keyPath: "taskTitle",  });  // define what data items the objectStore will contain  objectStore.createIndex("hours", "hours", { unique: false });  objectStore.createIndex("minutes", "minutes", { unique: false });  objectStore.createIndex("day", "day", { unique: false });  objectStore.createIndex("month", "month", { unique: false });  objectStore.createIndex("year", "year", { unique: false });};dBOpenRequest.onsuccess = (event) => {  const db = dBOpenRequest.result;  // open a read/write db transaction, ready for adding the data  const transaction = db.transaction(["toDoList"], "readwrite");  const objectStore = transaction.objectStore("toDoList");  const newItem = {    taskTitle: "my task",    hours: 10,    minutes: 10,    day: 10,    month: "January",    year: 2020,  };  transaction.onerror = () => {    console.log(`Error adding new item: ${newItem.taskTitle}`);  };  const objectStoreRequest = objectStore.add(newItem);};