Устранение неполадок

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

Советы по отладке

Отладка с помощью console.log()

Это самый простой и популярный метод. Место, где вы напишете console.log(), определяет, куда будет выведен результат:

---
console.log('Я — сервер. Этот текст появится в терминале.');
---

<script>
console.log('Я — клиент. Этот текст появится в консоли браузера.');
</script>

• Код внутри блока метаданных (---) выполняется на сервере, поэтому логи будут видны только в терминале.
• Код внутри тега <script> выполняется в браузере, поэтому логи будут видны в консоли разработчика в браузере.

Компонент <Debug />

Astro включает встроенный компонент <Debug />, который рендерит любое значение прямо в HTML-шаблон компонента. Это удобно для быстрой проверки данных без необходимости переключаться между браузером и терминалом.

---
import { Debug } from 'astro:components';
const user = { name: 'Astro', version: 5 };
---
<Debug {user} />

Типичные ошибки

document (или window) is not defined

Эта ошибка возникает при попытке обратиться к объектам браузера на сервере.

Решение:

• Если код находится в компоненте Astro, перенесите его в тег <script>.
• Если код в компоненте фреймворка (React, Vue), используйте хуки жизненного цикла (например, useEffect или onMounted) и убедитесь, что компонент гидрируется на клиенте с помощью директивы client:load.

Компонент не рендерится

Проверьте следующее:

• Импортировали ли вы компонент в блоке метаданных?
• Правильно ли указан путь к файлу (включая расширение)?
• Совпадает ли имя в импорте с именем в шаблоне?

Компонент не интерактивен (не реагирует на клики)

По умолчанию компоненты фреймворков рендерятся в статический HTML. Чтобы добавить JavaScript на сторону клиента, необходимо использовать директиву гидратации, например client:load или client:visible.

Создание минимальных примеров для воспроизведения

Если вы столкнулись с ошибкой, которую не можете решить самостоятельно, полезно создать минимальный пример (repro). Это упрощенный проект, в котором воспроизводится ваша проблема.

Вы можете создать такой проект за один клик на astro.new/repro, используя StackBlitz. Это позволит другим разработчикам увидеть ваш код в идентичной среде и быстрее помочь с решением.

Нужна дополнительная помощь?

Заходите в наш Discord в канал #support. Мы всегда рады помочь! Также вы можете проверить существующие проблемы (Issues) на GitHub.