Ошибка проверки браузера

Обновлено: 01.07.2024

На странице пользовательского интерфейса ошибок JS мониторинга браузера показано, где происходят ваши ошибки JavaScript, и предоставлены инструменты, которые помогут вам выяснить основную причину. Вы также можете запрашивать и создавать информационные панели с данными об ошибках JS в конструкторе запросов или использовать API браузера для отслеживания обработанных ошибок.

Просмотр ошибок JavaScript

Чтобы изучить ошибки JavaScript:

В пользовательском интерфейсе доступны следующие параметры:

Поиск в длинных списках ошибок

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

Группировать и фильтровать атрибуты

Чтобы изменить способ группировки данных об ошибках, используйте функцию "Группировать по". (Диаграмму загрузок страниц нельзя изменить с помощью группировки.)
Чтобы отфильтровать данные, показывая только ошибки с определенными атрибутами, используйте раскрывающийся список "Фильтр".

См. заметные аномалии и закономерности

В таблице "Профили ошибок" показаны заметные статистические различия, такие как версии браузера или устройства, на которых ошибки возникают чаще, чем обычно.

Просмотреть сведения об ошибке

Выберите ошибку на главной странице, чтобы просмотреть подробную информацию об этой ошибке, например пять основных браузеров, в которых произошла ошибка, пять основных устройств, на которых она произошла, и связанные URI.
Выберите Экземпляры ошибок, чтобы просмотреть журналы событий и трассировки стека, если они доступны.

Изучите события, приведшие к ошибке

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

Расшифруйте свой уменьшенный код JavaScript

Если ваш JavaScript минимизирован, ошибки на странице ошибок JS могут быть не очень полезными. Чтобы декодировать минимизированный JavaScript и сделать эти трассировки стека ошибок более полезными, вы можете загрузить исходные карты JavaScript в New Relic.

Запрашивать и визуализировать данные JS

New Relic сохраняет ошибки JS как данные о событиях. Это позволяет запрашивать данные об ошибках в построителе запросов. Чтобы выполнять запросы NRQL и создавать информационные панели для просмотра или совместного использования, запросите тип события JavaScriptError в построителе запросов.

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

Чтобы заметить или зарегистрировать обработанные вашим приложением ошибки или другие разные ошибки, используйте вызов API-интерфейса браузераnotificationError.

Просмотреть журналы событий

Важно

В журнале событий отображаются действия браузера, вызовы AJAX и трассировки, которые привели к ошибке JS. Это может помочь вам устранить основную причину ошибок.

Например, если ошибка JS возникает после запроса AJAX, который предоставляет сообщение об ошибке, возможно, ваш запрос AJAX не содержит правильной информации. Это приводит к ошибке JS из-за неудачного вызова AJAX.

Устранение неполадок с отсутствующими журналами событий

Некоторые причины отсутствия событий в журнале событий:

Версия агента. Для сбора данных журнала событий на вашем сайте должен быть включен мониторинг SPA (версия агента браузера 1071 или выше).

Ошибка JS не является частью взаимодействия с браузером. Если ошибка JS возникает вне взаимодействия, соответствующие сведения о взаимодействии с браузером невозможно зафиксировать (например, если в асинхронном файле JS возникает ошибка).

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

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

Просмотр трассировки стека

Устранение неполадок с отсутствующими трассировками стека

Некоторые причины, по которым вы можете не увидеть трассировку стека для ошибки:

Если ошибки не возникают, они не создают трассировку стека.

Сценарий JS размещен в CDN или другом внешнем расположении, и New Relic не может видеть ошибки, возникающие из этих сценариев. В некоторых случаях это можно решить с помощью совместного использования ресурсов из разных источников (CORS).

Это ошибка AngularJS. Дополнительную информацию об этом см. в разделе Отсутствующие ошибки Angular.

Ошибка представляет собой ошибку SyntaxError или Script : они возникают во время загрузки скрипта, поэтому они не создают трассировку стека.

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

Вы зафиксировали ошибку до того, как ее увидит агент New Relic.

Если ошибка возникает во время нескольких циклов сбора данных при одном и том же посещении пользователя, трассировка стека будет записана только для событий ошибок, зарегистрированных во время первого цикла сбора данных.

Некоторые решения для создания отчетов о трассировке стека:

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

Глобальные и общие ошибки

New Relic оборачивает функции JavaScript, чтобы получать информацию о возникающих ошибках через трассировку стека. Если ошибки не выдаются, они не будут доступны. Например, если у вас есть приложение AngularJS, следуйте процедурам устранения неполадок, если ошибки AngularJS не отображаются в пользовательском интерфейсе.

Для некоторых старых браузеров могут быть недоступны следующие ошибки:

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

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

Yoast SEO все больше и больше полагается на JavaScript. Это позволяет плагину взаимодействовать с вашим администратором WordPress в режиме реального времени, например, для редактора сниппетов, SEO-анализа и анализа читабельности. Наличие отзывов о вашем контенте в режиме реального времени обеспечивает гораздо более плавную работу в Интернете. Итак, вы действительно хотите, чтобы это было на JavaScript!

Не знаете, почему вам следует перейти на Yoast SEO Premium? Просмотрите эту таблицу функций, чтобы быстро сравнить обе версии.

Ошибки JavaScript

К сожалению, не все в саду радужно. У JavaScript есть небольшой недостаток. Недостатком JavaScript является то, что одна ошибка может остановить работу всех скриптов на странице. Да, это означает, что другой плагин может сломать JavaScript Yoast SEO, и наоборот.

Как проверить общие ошибки JavaScript?

Если вы подозреваете, что проблема на вашем веб-сайте вызвана ошибкой JavaScript, есть простой способ это проверить. И он встроен в ваш браузер!

В зависимости от вашего браузера его название немного отличается, но вслед за Chrome и FireFox мы будем называть его «Консоль». У каждого браузера свой способ доступа к консоли, поэтому для получения подробных инструкций выберите свой браузер.

Как распознать ошибки JavaScript?

Хорошо, вы открыли консоль. Здорово! Теперь давайте посмотрим, есть ли ошибки JavaScript.

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

Если ошибок нет, вы должны увидеть что-то вроде этого:

Если на странице есть ошибки, вы увидите красную линию. Например так:

Вы можете развернуть сообщение об ошибке в консоли, нажав черную стрелку. Затем он покажет что-то вроде этого:

Если вы обнаружили ошибку JavaScript, сделайте скриншот расширенной версии ошибки, чтобы приложить ее к отчету об ошибке.

В этом совете объясняется, как использовать веб-браузеры для диагностики проблем с опубликованными объектами и/или панорамами.

Содержание

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

Сафари

Чтобы получить доступ к консоли ошибок в Safari, сначала необходимо активировать Режим разработчика.

Mac OS X

Откройте Safari и выберите «Safari» > «Настройки» > «Дополнительно». Затем выберите Показать меню «Разработка» в строке меню.
Выберите «Разработка» > «Показать консоль ошибок».
Закройте консоль, нажав кнопку закрытия в левой части строки меню консоли ошибок.

Окна

Откройте Safari и нажмите «Настройки» (выделено ниже) > «Настройки…» > «Дополнительно». Затем выберите Показать меню "Разработка" в строке меню..
Чтобы отобразить строку меню, нажмите «Настройки» > «Показать строку меню». Строку меню можно удалить в любой момент, нажав «Настройки» > «Скрыть строку меню».
Чтобы использовать консоль, откройте Safari и в строке меню выберите «Разработка» > «Показать консоль ошибок».
Закройте консоль, нажав кнопку закрытия в правой части строки меню консоли ошибок.

Файрфокс

Firefox поставляется со встроенной веб-консолью.

Mac OS X

Откройте Firefox и выберите "Инструменты" > "Веб-разработчик" > "Веб-консоль".
Обновите веб-страницу.
Закройте консоль, нажав кнопку "Закрыть" в левой части строки меню консоли ошибок.

Окна

Откройте Firefox, затем щелкните раскрывающееся меню Firefox.
Выберите «Веб-разработчик» > «Веб-консоль».
Чтобы закрыть консоль, нажмите кнопку "Закрыть" в правой части строки меню консоли.

◊ СОВЕТ: Для Firefox существует мощное дополнение под названием Firebug, которое расширяет возможности консоли и упрощает поиск неисправностей. В приведенном выше видео во втором примере ошибки, в котором используется обратная косая черта, Firebug фактически показывает обратную косую черту, а также кодировку ее URL-адреса.

Хром

Google Chrome называет консоль ошибок инструментами разработчика.

Mac OS X

Есть несколько способов получить доступ к инструментам разработчика.

В строке меню выберите «Вид» > «Разработчик» > «Инструменты разработчика». Убедитесь, что консоль выделена, затем обновите веб-страницу.
Откройте Chrome и нажмите «Настроить» > «Инструменты» > «Инструменты разработчика». (Чтобы закрыть Инструменты разработчика, нажмите кнопку "Закрыть" в левой части меню "Инструменты разработчика".)

Окна

Откройте Google Chrome и выберите «Настроить» > «Инструменты» > «Инструменты разработчика».
Чтобы закрыть Инструменты разработчика, нажмите кнопку "Закрыть" в правой части меню "Инструменты разработчика".

Интернет-обозреватель

Internet Explorer вызывает свою консоль ошибок, Инструменты разработчика. В отличие от других веб-браузеров, Internet Explorer не может определить, что происходит в проигрывателе Flash, поэтому вы не получите никаких ошибок. Для поиска ошибок рекомендуется использовать один из других браузеров. Однако он по-прежнему полезен для других диагностических целей.

Нажмите Инструменты > Инструменты разработчика F12. Кнопка «Инструменты» расположена справа от адресной строки.
Чтобы закрыть инструменты разработчика, нажмите кнопку "Закрыть" справа в меню инструментов разработчика.

Чтобы показать, как работают консоли, здесь есть три ссылки, каждая из которых содержит ошибку.

файл javascript (swfobject.js) не загружен на сервер, поэтому SWF не может быть отображен. имеет подпапку pano, содержащую SWF. В пути к файлу используется обратная косая черта вместо косой черты. имеет простую ошибку капитализации.

Ошибка_1 открыта в Safari на Mac

При первом открытии консоли ошибок убедитесь, что в строке меню консоли выбраны Консоль и Все. Также рекомендуется обновить страницу.

Похоже, Adobe Flash не установлен, но консоль показывает, что не может найти файл swfobject.js на сервере.

Ошибка_2 открыта в Firefox на ПК

Страница откроется без ошибок, поэтому щелкните активную точку, и консоль отобразит ошибку при попытке открыть следующую панораму.

На приведенном выше изображении показано, что вместо косой черты (/) между именами файлов используется %5C, что является кодировкой URL для обратной косой черты (). Значит, в Редакторе горячих точек использована неправильная косая черта.

Ошибка_3 открыта в Google Chrome на Mac

Эта панорама работала до загрузки на сервер.

На приведенном выше изображении показано, что при нажатии точки доступа панорамы не менялись, и отображалась ошибка. При нажатии точка доступа искала Pano_02.swf . Однако на сервере это файл pano_02.swf .При локальном тестировании точки доступа не чувствительны к регистру, даже при работе через веб-сервер, но после загрузки они учитываются.

Если на вашем сайте возникают ошибки JavaScript, они будут отображаться в консоли Javascript вашего браузера. Чтобы проверить наличие ошибок javascript, просто откройте консоль и найдите ошибки. Это будет выглядеть примерно так:

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

Красный текст описывает ошибку (в приведенном выше примере сценарий вызывает несуществующую функцию examplefunc()).

Ссылка справа показывает сценарий и номер строки, в которой произошла ошибка. Обратите внимание, что это не обязательно означает, что это проблемный код. Например, эта строка часто показывает, что ошибка возникает в jquery.js, но ошибки в ядре jQuery исключительно редки и вряд ли могут быть причиной вашей проблемы. Щелкните стрелку слева, чтобы открыть трассировку стека, которая покажет все функции, вызываемые по пути, с их сценариями и номерами строк. Как правило, проблемы возникают из-за скриптов тем или плагинов.

Вот как открыть консоль в различных браузерах:

Хром

Чтобы открыть консоль в Chrome, вы можете:

Используйте сочетание клавиш Command – Option – J (Mac) или Control-Shift-J (Windows/Linux).
Выберите Вид > Разработчик > Консоль JavaScript.

Файрфокс

Чтобы открыть консоль в Firefox, выполните одно из следующих действий:

Выберите «Веб-консоль» в подменю «Веб-разработчик» в меню Firefox (или в меню «Инструменты», если у вас отображается строка меню или вы используете Mac OS X)
Нажав сочетание клавиш Control-Shift-K (Command-Option-K на Mac).

Сафари

В Safari необходимо сначала включить веб-инспектор. Пожалуйста, следуйте этим инструкциям.

Читайте также: