Отвратительный лог ошибок в nuxt?

Question

[WebDev]

Кто работает с Nuxt'ом? Объясните, пожалуйста, как вы справляетесь с ошибками? Это же кошмар какой-то. Ошибка не содержит никакой полезной информации.
Вот, например:

Где ошибка? В каком компоненте? В каком методе?
Может что-то где-то можно включить для нормального стектрейса, а я не знаю?

Answer 1

[Максим Тимофеев]

Ошибка не содержит никакой полезной информации.

В целом эта проблема имеется во всем js. Это отвратительный язык. Но пока нет ничего лучше. Как напишите - дайте ссылку я первый спрыгну.

Answer 2

[Дима Паутов]

Гуглить их, если они не понятны. Не всегда дело в компоненте!!!
Например, ошибка может быть из за директивы v-html, внутрь которой вставляют кривой html
Либо из за скрытой логики v-if или не понимания логики работы этой директивы, иногда помогает поменять на v-showпруф

Иногда бывает, что DOM не успел измениться, а уже применились изменения на основе реактивных данных, где, как я выше написал v-if может не отработать, как вам кажется! Иногда это можно исправить функцией this.$nextTick

Ещё может такая ошибка быть, когда много v-if вложены друг в друга, когда вложенный v-if уже отработал, а родительский нет, от чего он не может использовать метод appendChild для вставки в дом, т.к. используя v-if, в DOM вставляется комментарий, у которого нет метода appendChild. Нужно следить за очерёдностью выполнения v-if

Возможно, проблема может быть из за SSR, т.к. бывают модули, которые в силу своей логики не должны рендериться и выполняться на сервере

Вариаций много, у всех она всегда по разному происходит. Ищите страницу, на которой это появляется и уже там ищите проблему.

Comments

[WebDev]

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

[Дима Паутов]

WebDev, Ну значит ваш код плохой и вы не особо следите за правильностью его работы, либо, не знаете особенности реактивности в vue. Реактивность на начальных этапах может сильно запутать своей магией. Изменил значение свойства, бац, всё само поменялось. А когда таких моментов, когда реактивность работает с DOM, благодаря тому же v-if, а у вас очерёдность срабатывания v-if не правильная, то будут такие проблемы. Я тоже с этим мучился в начале, т.к. не понимал всю магию работы реактивности. Со временем, я научился писать код правильно, следить за свойствами, следить, за изменениями в DOM, от чего больше не вижу таких ошибок.

[WebDev]

Дима Турков, Нашел ошибку, которая не поддается объяснению. У меня есть метод t(), который принимает две строки: русскую и английскую и возвращает в зависимости от выбранного языка. Этот метод у меня описан в миксине, который я подключаю глобально. Он работает во всех компонентах. А тут я создал новый компонент, в котором вот такая разметка вызывает вышеописанную ошибку:

<span>{{ t('Введите название тега', 'Enter a tag name') }}</span>

Таким образом я использую этот метод в разметке во всех компонентах.
При этом, если вызывать метод из js, то все работает, например:

created() {
    console.log(this.t('rus', 'eng'));
}

То все работает.
Что тут не так, я ума не приложу.

[WebDev]

WebDev, Дальнейший показал, что ошибку выдает любая перменная в {{}}, например

<span>{{ name }}</span>

<script>
...
data() {
    return {
        name: ''
    }
}
</script>

[Дима Паутов]

WebDev, как я сказал, именно природу этой ошибки сложно объяснить. Что такое ваше t() я понял, но не знаю, как она реализована. Ошибка может быть в любом месте на сайте. Если у вас стоит интернационализация, то лучше этого пакета, вам врятли найти. И не нужны какие либо миксины. Да и что у вас в миксине тоже не понятно, может потому что он глобальный и потому, что в нём есть не правильно реализованная логика, вылазит ошибка.

Answer 3

[Interface]

Вам нужно настроить source-maps, почитайте как это сделать в вашей среде.
Для webpack можно тут, например, почитать https://survivejs.com/webpack/building/source-maps/

Source-map как раз и позволяет получать адекватные stack-trace'ы и вообще крайне полезная вещь для отладки

Answer 4

[profesor08]

https://ru.nuxtjs.org/guide/installation
Если ты создавал свой проект так, то сурсмапы у тебя должны работать, если нет, то ищи способ их добавить, тогда ты будешь получать более подробную информацию об ошибках, и где они случились.

А еще у тебя какой-то $options не определен, может это от него ноги растут.

А может ты пытаешься внедрить стороннюю библиотеку или код, который работает с dom, после перерендера компонента, естественно все ссылки на элементы у него дохнут.

Так что чтоб тебе реально помогли, скриншота ошибки недостаточно, нужен рабочий пример кода, который это все демонстрирует.

Answer 5

[Игорь]

Стоп, это call stack

Этого достаточно, что бы понять, что сделал js когда, пытался выполнить код.

Используйте дополнительные средства.

Comments

[Игорь]

При чём, JS даже указал в каких строчках произошла ошибка