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.
The error event is fired on IDBTransaction 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 the abort event instead.
Syntax
Use the event name in addEventListener():
addEventListener("error", (event) => { })
Alternatively, assign to the event handler property of the interface:
onerror = (event) => { }
Event type
A generic Event.
Bubbling
This event bubbles to IDBDatabase. The event.target property refers to the IDBTransaction object that bubbles up.
For more information, see Event bubbling.
Examples
This example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given taskTitle already exists):
// Open the database
const 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 the onerror property instead of addEventListener() (but note that this replaces other event listeners added using onerror, if any):
// Open the database
const 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);
};
Specifications
| Specification |
|---|
| Indexed Database API 3.0 # eventdef-idbrequest-error |