JS властивість Event.error

Загальний опис

Подія error виникає, коли елемент не може завантажити ресурс, такий як зображення, скрипт, стиль або медіафайл, або при виникненні інших помилок під час виконання цих елементів. Наприклад, якщо файл зображення не завантажується через неправильний шлях, відсутність ресурсу або помилку на сервері, подія error спрацює і можна обробити її відповідно до потреб.

Подію error можна використовувати з різними HTML-елементами, наприклад, зображеннями, відео або аудіо. Також вона корисна для динамічно завантажених елементів або запитів до серверів, щоб дати змогу розробнику відповідно реагувати на виникнення помилок, наприклад, показувати резервне зображення або повідомлення користувачу.

Для обробки помилок необхідно додати обробник події за допомогою методу addEventListener. Наприклад, для обробки помилок завантаження зображення можна зробити наступне:

const img = document.querySelector('img');
img.addEventListener('error', function() {
  img.src = 'fallback.jpg'; // Завантажує резервне зображення
});

У цьому прикладі, якщо зображення не завантажується, воно автоматично замінюється на резервне зображення. Подібним чином можна реагувати на помилки під час завантаження аудіо або відео, або навіть виконання скриптів.

Важливо, що для деяких елементів, таких як window, подія error надає доступ до інформації про помилку, зокрема до повідомлення, URL файлу та номера рядка, де виникла помилка. Це допомагає більш точно діагностувати проблеми і реагувати на них.

Подію error також можна використовувати для відстеження помилок виконання запитів, таких як помилки HTTP-запитів або несправності у взаємодії з API. В такому випадку ви можете відправляти сповіщення або реєструвати інформацію для подальшого аналізу помилок.

правити

Порада

При роботі з подією error для зображень можна автоматично замінювати пошкоджені ресурси на резервні або альтернативні. Це особливо корисно для вебсайтів, що завантажують зображення з зовнішніх джерел, таких як CDN.

автор: Bond правити

Порада

Для відео- або аудіофайлів можна використовувати подію error для обробки помилок при відтворенні. Наприклад, якщо відео не може бути відтворене, можна запропонувати користувачу альтернативний формат файлу або інше рішення.

автор: Bond правити

Порада

Оскільки подія error спрацьовує не лише для зображень, а й для скриптів, стилів, відео та інших медіафайлів, її можна використовувати для більш широкого моніторингу ресурсів. Наприклад, можна відстежувати всі зовнішні файли і створювати звіти про те, які з них не завантажилися.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('error', function(event) {
  // Обробка помилки
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

window.addEventListener('error', function(event) {
  console.error('Помилка в JavaScript:', event.message);
  console.log('Файл:', event.filename, 'Рядок:', event.lineno);
});

<img>демо</img>

const img = document.querySelector('img');
img.addEventListener('error', function() {
  img.src = 'https://via.placeholder.com/150'; // Завантажуємо резервне зображення
  console.log('Помилка завантаження зображення, показано резервне');
});