Подія error в JavaScript — картинка чи скрипт не вантажиться

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

Подія 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

Приклади

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

<header>
  <h2 class="title">HTML Events: error</h2>
  <p class="description">Подія спрацьовує при виникненні помилки під час завантаження ресурсу.</p>
</header>
<main>
  <div class="result">
    <img id="image" src="invalid-url.jpg" alt="Неправильний URL" width="300">
    <p id="status">Натисніть на кнопку для спроби завантажити зображення.</p>
    <button id="retryBtn">Завантажити зображення знову</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#status {
  margin-top: 15px;
  font-weight: bold;
  color: #ff0000;
}

const image = document.getElementById('image');
const statusText = document.getElementById('status');
const retryBtn = document.getElementById('retryBtn');

// Резервне зображення зібране просто тут — по мережу приклад не ходить
const FALLBACK = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='200'>"
  + "<rect width='300' height='200' fill='%23ffd400'/>"
  + "<text x='150' y='110' font-size='24' text-anchor='middle' fill='%23222'>резервне</text></svg>";

// Обробка помилки завантаження зображення
image.addEventListener('error', function () {
  image.src = FALLBACK; // Завантажуємо резервне зображення
  statusText.textContent = 'Помилка завантаження зображення, показано резервне.';
});

// Спроба повторного завантаження зображення
retryBtn.addEventListener('click', function () {
  image.src = 'invalid-url.jpg'; // Знову пробуємо завантажити з неправильного URL
  statusText.textContent = 'Натисніть на кнопку для спроби завантажити зображення.';
});
//# sourceURL=pen.js

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

<img>демо</img>

const img = document.querySelector('img');

// Резервне зображення зібране просто тут — по мережу приклад не ходить
const FALLBACK = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'>"
  + "<rect width='150' height='150' fill='%23ffd400'/>"
  + "<text x='75' y='85' font-size='18' text-anchor='middle' fill='%23222'>резервне</text></svg>";

img.addEventListener('error', function() {
  img.src = FALLBACK; // Завантажуємо резервне зображення
  console.log('Помилка завантаження зображення, показано резервне');
});

// навмисно зіпсоване джерело: браузер не зможе його прочитати і кине error
img.src = 'data:image/png;base64,-';