IDBRequest: error イベント

error ハンドラーは、エラーによって要求が失敗したとき実行されます。

このイベントはキャンセルできず、バブリングしません。

構文

addEventListener() のようなメソッドでイベント名を使うか、イベントハンドラープロパティを設定します。

addEventListener('error', (event) => { });

onerror = (event) => { };

イベント型

汎用の Event です。

例

この例では、データベースを開き、add() 操作での error イベントを監視しながら、レコードを追加しようとします。(例えば、指定の taskTitle を持つレコードが既に存在する場合エラーが発生します)

// データベースを開きます
const DBOpenRequest = window.indexedDB.open('toDoList', 4);

DBOpenRequest.addEventListener('upgradeneeded', (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log('データベースの作成中にエラーが発生しました');
  };

  // このデータベース用の objectStore を作成します
  const objectStore = db.createObjectStore('toDoList', { keyPath: 'taskTitle' });

  // objectStore に保存するデータアイテムを定義します
  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.addEventListener('success', (event) => {
  const db = DBOpenRequest.result;

  // 読み書き用のデータベーストランザクションを開き、データを追加する準備をします
  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 };

  const objectStoreRequest = objectStore.add(newItem);
  objectStoreRequest.addEventListener('error', () => {
    console.log(`新規アイテムの追加中にエラーが発生しました: ${newItem.taskTitle}`);
  });
});

同じ例で、addEventListener() のかわりに onerror プロパティを使用します。

// データベースを開きます
const DBOpenRequest = window.indexedDB.open('toDoList', 4);

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log('データベースの作成中にエラーが発生しました');
  };

  // このデータベース用の objectStore を作成します
  const objectStore = db.createObjectStore('toDoList', { keyPath: 'taskTitle' });

  // objectStore に保存するデータアイテムを定義します
  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;

  // 読み書き用のデータベーストランザクションを開き､データを追加する準備をします
  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 };

  const objectStoreRequest = objectStore.add(newItem);
  objectStoreRequest.onerror = () => {
    console.log(`新規アイテムの追加中にエラーが発生しました: ${newItem.taskTitle}`);
  };
};

ブラウザーの互換性

BCD tables only load in the browser

関連情報