Runtime errors

В процессе разработки веб-компонентов на Stencil ошибки выполнения (runtime errors) являются одной из ключевых проблем, которые могут нарушить работу приложения. Понимание их природы, способов обнаружения и предотвращения критически важно для создания стабильного кода.

Типы ошибок выполнения

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

  1. Ошибки при рендеринге компонента Основная часть рендеринга в Stencil выполняется через функцию render. Если внутри этой функции происходит вызов метода или доступ к свойству, которого не существует, браузер выбрасывает исключение.

    render() {
  return <div>{this.undefinedProperty.toString()}</div>; // Runtime error
}

  2. Ошибки жизненного цикла Методы жизненного цикла (componentWillLoad, componentDidLoad, componentShouldUpdate, componentDidUpdate) выполняются автоматически при изменении состояния компонента. Ошибки внутри этих методов также приводят к runtime exceptions.

    async componentWillLoad() {
  await this.fetchData(); // если fetchData выбрасывает ошибку
}

  3. Ошибки при работе с DOM Stencil позволяет напрямую манипулировать DOM через @Element() и ref. Некорректное использование этих API часто становится источником ошибок. Например, попытка доступа к элементу, который ещё не отрендерился:

    this.myDiv.innerHTML = 'Test'; // myDiv может быть undefined

  4. Ошибки реактивного состояния Использование декораторов @State(), @Prop() и @Watch() накладывает ограничения на изменение данных. Неправильная мутация объектов или массивов без создания нового экземпляра может вызвать непредсказуемое поведение и runtime ошибки:

    @State() items: string[] = [];

addItem(item: string) {
  this.items.push(item); // Ошибка: Stencil не отследит мутацию
}

Отладка ошибок

Stencil интегрируется с современными браузерными инструментами для отладки:

  • Консоль браузера: все runtime errors выводятся с указанием компонента и метода, где произошла ошибка.
  • Source maps: при сборке проекта Stencil создаёт source maps, что позволяет видеть исходный TypeScript код вместо скомпилированного JavaScript.
  • DevTools breakpoints: установка точек останова в методах жизненного цикла и рендере позволяет отследить момент возникновения исключения.

Обработка ошибок в компонентах

  1. Использование try/catch Ключевой способ локализовать ошибку и предотвратить падение всего приложения:

    render() {
  try {
    return <div>{this.data.value.toUpperCase()}</div>;
  } catch (e) {
    console.error('Ошибка рендеринга:', e);
    return <div>Произошла ошибка</div>;
  }
}

  2. Валидация данных Проверка входных @Prop() и состояния @State() до использования предотвращает ошибки:

    @Prop() user?: { name: string };

render() {
  if (!this.user) {
    return <div>Пользователь не задан</div>;
  }
  return <div>{this.user.name}</div>;
}

  3. Глобальная обработка ошибок Stencil позволяет использовать window.onerror или подписываться на unhandledrejection для отслеживания непойманных исключений:

    window.addEventListener('error', (event) => {
  console.error('Global error:', event.error);
});

window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled promise rejection:', event.reason);
});

Профилактика ошибок выполнения

  • Строгая типизация с TypeScript уменьшает вероятность обращений к несуществующим свойствам.
  • Избегание прямых мутаций @State() и @Prop() объектов; вместо этого использовать копирование и методы, возвращающие новый объект.
  • Ленивая загрузка данных через async/await с обработкой ошибок предотвращает падение компонента при сбое сети.
  • Использование вспомогательных функций для безопасного доступа к вложенным объектам (?., ??) минимизирует ошибки типа Cannot read property of undefined.

Отслеживание ошибок в продакшене

Stencil предоставляет интеграцию с различными системами логирования и мониторинга (Sentry, LogRocket, Datadog). Для продакшен-приложений важно:

  • Логировать все runtime errors с контекстом компонента и состояния.
  • Соблюдать единый формат ошибок для последующего анализа.
  • Разделять ошибки пользовательского ввода и системные ошибки для приоритизации исправлений.

Особенности ошибок в Shadow DOM

Использование Shadow DOM в Stencil добавляет нюансы:

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

Заключение по техническим аспектам

Ошибки выполнения в Stencil — это не только падение кода, но и источник скрытых багов, влияющих на пользовательский интерфейс. Систематическая проверка данных, безопасный доступ к свойствам и корректная обработка исключений делают компоненты стабильными и предсказуемыми.

Оглавление