Обработка ошибок внутри стратегий

Workbox предоставляет мощный механизм для управления кэшированием ресурсов в сервис-воркерах, и одной из ключевых задач при работе с ним является надежная обработка ошибок. Ошибки могут возникать на разных этапах: при сетевых запросах, доступе к кэшу или при комбинировании этих операций в стратегиях. Глубокое понимание обработки ошибок позволяет строить устойчивые приложения, которые корректно работают даже при сбоях сети.

Стратегии и их обработка ошибок

В Workbox стратегии (CacheFirst, NetworkFirst, StaleWhileRevalidate, NetworkOnly, CacheOnly) определяют порядок взаимодействия с сетью и кэшем. Каждая стратегия предоставляет возможность реагировать на ошибки через стандартный метод handler и через встроенные хуки.

Пример использования handler с обработкой ошибок:
import { CacheFirst } from 'workbox-strategies';

const cacheFirstStrategy = new CacheFirst({
  cacheName: 'example-cache',
  plugins: [
    {
      fetchDidFail: async ({ request }) => {
        console.error('Ошибка запроса:', request.url);
      }
    }
  ]
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    cacheFirstStrategy.handle({ request: event.request }).catch((error) => {
      return caches.match('/offline.html');
    })
  );
});

В этом примере стратегия CacheFirst пытается получить ресурс из кэша, а при ошибке сети используется резервная страница offline.html. Метод catch позволяет перехватывать любые исключения, возникшие внутри стратегии.

Плагины для расширенной обработки ошибок

Workbox предоставляет систему плагинов, которые расширяют возможности стратегий. Среди наиболее важных для обработки ошибок можно выделить:

  • fetchDidFail – вызывается при неудачном сетевом запросе.
  • cacheDidFail – вызывается при ошибках чтения или записи в кэш.
  • handlerDidError – вызывается при любой ошибке, возникшей внутри стратегии.
Пример комбинированного плагина:
import { NetworkFirst } from 'workbox-strategies';

const networkFirstWithErrorHandling = new NetworkFirst({
  cacheName: 'dynamic-cache',
  plugins: [
    {
      fetchDidFail: async ({ request }) => {
        console.warn('Сетевая ошибка для:', request.url);
      },
      cacheDidFail: async ({ error, request }) => {
        console.error('Ошибка кэша для:', request.url, 'Ошибка:', error);
      },
      handlerDidError: async ({ error, request }) => {
        console.error('Общая ошибка стратегии для:', request.url, error);
      }
    }
  ]
});

Использование всех трех хуков одновременно обеспечивает детальную диагностику и позволяет создавать резервные механизмы, например, показывать заглушку или альтернативный ресурс.

Принципы построения отказоустойчивых стратегий

  1. Всегда предусматривать fallback. Независимо от стратегии, ошибки сети или кэша должны обрабатываться через резервный ресурс, чтобы пользовательский интерфейс оставался интерактивным.
  2. Логирование ошибок. Плагины Workbox позволяют централизованно логировать сбои, что облегчает диагностику и мониторинг.
  3. Асинхронная обработка ошибок. Хуки плагинов могут быть асинхронными, что важно для сложных операций, например, отправки уведомлений об ошибках на сервер.
  4. Комбинирование стратегий. Для сложных ресурсов можно комбинировать стратегии: например, NetworkFirst для данных с возможностью обновления и CacheFirst для статических файлов.

Практика использования handlerDidError для глобальной обработки

handlerDidError позволяет перехватывать все исключения стратегии без необходимости оборачивать каждый вызов в try/catch. Это особенно полезно для централизованной обработки ошибок:

import { StaleWhileRevalidate } from 'workbox-strategies';

const staleWhileRevalidateStrategy = new StaleWhileRevalidate({
  cacheName: 'assets-cache',
  plugins: [
    {
      handlerDidError: async ({ error, request }) => {
        console.error(`Ошибка при обработке ${request.url}:`, error);
        // Можно вернуть резервный ресурс или уведомить сервер
      }
    }
  ]
});

Ошибки при чтении и записи кэша

Иногда ошибки происходят не из-за сети, а из-за ограничений кэша браузера или поврежденных данных. В таких случаях ключевым инструментом становится плагин с хуком cacheDidFail:

{
  cacheDidFail: async ({ request, error }) => {
    console.error(`Ошибка при доступе к кэшу для ${request.url}:`, error);
    // Можно очистить кэш или повторить запись
  }
}

Такой подход позволяет автоматически восстанавливать кэш и предотвращать накопление “битых” ресурсов.

Резюме ключевых моментов

  • Стратегии Workbox позволяют централизованно управлять сетевыми и кэшированными ресурсами.
  • Все стратегии поддерживают асинхронные плагины для обработки ошибок: fetchDidFail, cacheDidFail, handlerDidError.
  • Для повышения надежности необходимо предусматривать fallback-ресурсы и логировать ошибки.
  • Асинхронная обработка ошибок позволяет интегрировать уведомления и мониторинг без блокировки основного потока.
  • Комбинирование стратегий и плагинов обеспечивает максимальную отказоустойчивость.

Эти инструменты делают Workbox гибким и мощным инструментом для построения стабильных прогрессивных веб-приложений.

Оглавление