Скриптовая ошибка это

To fix a script error, make sure your browser isn’t blocking Java or ActiveX, delete temp files, allow pop-ups, and update your software

A script error occurs when the instructions from a script can’t be executed correctly for some reason. Here are some example script error messages:

• Errors on this webpage might cause it to work incorrectly.
• A Runtime Error has occurred. Do you wish to debug?
• An error has occurred in the script on this page.

Script errors occur most often in web browsers when they can’t execute JavaScript or VBScript (or another scripting language) instructions from a web page, but they can happen in desktop applications, too.

Causes of Script Errors

A common reason for scripting errors is that an error has occurred behind the scenes, either on the web server for errors in a web browser or on the programming end of a software program.

Incorrect code implementation or some other bad configuration on the software side isn’t your problem to fix. The best thing to do in that situation is to wait for an update from the developer.

However, scripting errors can also be due to something happening on your end, like with your own software program or operating system that’s unable to load the script correctly. For example, there might be a setting in your web browser that’s blocking scripts, or your security software might be treating a harmless script as if it’s a threat that needs to be deleted.

Script errors were most commonly seen in Internet Explorer or in an application that used it to access the internet or run local scripts. While Microsoft Edge has replaced IE, some of the same problems can crop up. The fixes are also the same or very similar.

How to Fix Script Errors

The quickest way to stop getting script errors is to simply switch browsers. Use something like Edge, Chrome, Firefox, or Opera. However, doing that doesn’t actually solve the script error.

Follow these steps in order, checking after each one to see if you still get the error:

1. Make sure your PC isn’t blocking important scripting features.

   This means checking that you haven’t turned off ActiveX scripting and that your browser isn’t blocking Java or ActiveX. Certain security settings will prevent ActiveX and Java from running properly, which can affect the usability of the web page that’s running the script.

2. Delete temporary internet files.

   Temporary files are cached on your computer so that you can revisit websites quicker, but a cache that’s too large or one that’s storing corrupted data can result in script errors.

3. Allow for pop-ups in your browser.

   A pop-up blocker is extremely useful most of the time, but might actually be causing script errors if the script isn’t given enough time to run because the browser is preventing pop-ups.

   All web browsers let you control the pop-up blocker settings. If you turn off the blocker, then pop-ups will be allowed to run again.

4. Update your software.

   Outdated software might be what’s causing the specific script error that you’re seeing. This might be because the website or program showing the error, has a minimum requirement that your computer doesn’t meet, or because a script error was corrected through an update that you never received.

   You should always keep Windows up to date. Update your third-party programs if they’re getting script errors. A free software updater tool is one easy way to do this.

5. Check your security software.

   It’s possible that your antivirus program or firewall application is blocking scripts or ActiveX controls from running normally. Temporarily turn off both to see if you still get the script error.

   Something else to look for with your antivirus scanner is whether it’s configured to check for viruses in folders that your web browser uses to keep temporary files. If so, the scanner might incorrectly identify scripts as malware, and quarantine or delete them before they can run. Add a folder exclusion if your app allows it.

6. Reset all of your browser’s settings.

   There could be a number of settings or add-ons causing scripting errors in your browser. The easiest way to return all of those settings to their defaults is to reset it.

   How this works is similar between all the major browsers. We have a guide for Chrome [How to Reset Chrome] and Edge [How to Reset Microsoft Edge].

   An alternative method is to see if just a single add-on is causing the script error, which you can do through browser preferences or settings. Disable add-ons one at a time and test for the script error after each one.

How to Turn Off Scripting Errors

The average user doesn’t actually need to see script errors. This is especially true if the error doesn’t prevent you from using the website or program normally.

You can safely turn off script errors like this:

1. Open the Run dialog box by pressing the Windows Key and then the R key.

2. Enter the inetcpl.cpl command to launch Internet Properties.

3. Open the tab called Advanced.

4. Scroll down until you find the Browsing section, and then look for these three settings (what you see will depend on the OS you’re using):

   • Make sure Disable script debugging options have a check next to them.
   • Just below those options, double-check that Display a notification about every script error is not checked (so that you won’t see notifications about script errors.)

   These are the default settings for Windows 11 and Windows 10.

5. Press OK to save the changes.

FAQ

• Why do I see script errors when printing?

  Scripting errors when printing can be caused by bad drivers, so update the drivers for your printer.

• What is a runtime error?

  A runtime error occurs while a program is running or when you first attempt to start the application. The error sometimes goes away on its own by simply reopening the app, but if not, there are a number of things you can try to fix a runtime error.

Thanks for letting us know!

Get the Latest Tech News Delivered Every Day

Subscribe

Если вы хоть раз сталкивались с программированием или созданием веб-сайтов, вероятно, слышали о том, что иногда возникают ошибки скрипта. Но что это значит и какие бывают виды таких ошибок? В этой статье мы разберем основные типы ошибок скрипта и способы их решения.

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

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

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

Что такое ошибка скрипта?

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

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

Ошибки скрипта могут быть разного типа. Некоторые из наиболее распространенных ошибок скрипта:

• SyntaxError — ошибка синтаксиса, возникающая при нарушении правил грамматики языка.
• TypeError — ошибка, возникающая при попытке использования операций или методов для объекта неправильного типа данных.
• ReferenceError — ошибка, возникающая при попытке использования несуществующей переменной или объекта.
• RangeError — ошибка, возникающая при попытке использования числа, выходящего за допустимый диапазон значений.
• InternalError — ошибка, связанная с внутренней ошибкой интерпретатора JavaScript.

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

После идентификации ошибки можно приступать к ее исправлению. Для этого нужно внимательно изучить код, проанализировать его логику, изменить синтаксис, проверить правильность использования функций и объектов.

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

Понятие и причины возникновения

Ошибка скрипта — это сообщение, которое выдается браузером при попытке выполнить несовместимый или неправильно написанный код JavaScript. Как правило, ошибка скрипта приводит к некорректной работе веб-страницы или приложения.

Ошибки скрипта могут возникнуть по разным причинам. Вот некоторые из них:

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

2. Логические ошибки: такие ошибки происходят, когда код JavaScript содержит ошибки в логике своей работы. Это может быть неправильная логика условия, неправильные расчеты или неверная обработка данных.

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

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

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

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

Ошибки скрипта — это ошибки, которые возникают при выполнении компьютерной программы или скрипта. Они могут возникать по разным причинам и могут иметь различные виды. Разберем основные виды ошибок скрипта:

1. Синтаксические ошибки

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

2. Логические ошибки

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

3. Разрешение идентификаторов

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

4. Обработка исключений

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

5. Нестабильная работа программы

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

6. Ошибки ввода-вывода

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

7. Ошибки окружения

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

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

Синтаксические ошибки

Синтаксические ошибки — это ошибки, которые возникают при неверном написании кода. Компьютер не может правильно интерпретировать такие ошибки и выдаёт сообщение о синтаксической ошибке.

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

Часто встречающиеся синтаксические ошибки включают в себя:

• Отсутствие точки с запятой — в некоторых языках программирования необходимо ставить точку с запятой после каждого оператора. При её отсутствии возникает синтаксическая ошибка.
• Неправильное закрытие скобок — при использовании скобок необходимо правильно их открывать и закрывать. Если скобка неправильно закрыта или открывается без пары, то возникает синтаксическая ошибка.
• Неправильное использование кавычек — при использовании кавычек необходимо правильно их открывать и закрывать в соответствующем порядке. Если кавычка неправильно закрыта или открывается без пары, то возникает синтаксическая ошибка.

Для поиска и исправления синтаксических ошибок необходимо внимательно просматривать код и сравнивать его с правильным синтаксисом языка программирования. Здесь очень полезно использовать среду разработки, которая обозначает синтаксические ошибки красным цветом или выдаёт сообщения об ошибках.

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

Логические ошибки

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

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

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

if (x > 10) {
// код, который должен выполняться, если x больше 10
} else {
// код, который должен выполняться, если x меньше или равно 10
}

Если при выполнении этого кода значение переменной x равно 10, то программа выполнит неправильную ветвь условия.

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

Ошибки времени выполнения

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

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

Одна из распространенных ошибок времени выполнения — деление на ноль. Когда программа делит число на ноль, возникает исключение «деление на ноль», и выполнение программы прерывается. Эту проблему можно решить путем добавления проверки перед делением на ноль или с использованием обработки исключений.

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

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

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

Способы решения и предотвращения ошибок скрипта

1. Логирование ошибок

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

2. Использование отладчиков

Отладчики – это инструменты, предназначенные для поиска и исправления ошибок в коде скрипта. Они позволяют отслеживать выполнение программы в реальном времени, останавливать его на определенных строках кода, проверять значения переменных и искать причины возникновения ошибок. Наиболее популярными отладчиками для веб-разработки являются Chrome Developer Tools, Firebug и WebStorm.

3. Проверка доступности ресурсов

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

4. Обработка исключений

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

5. Тестирование и проверка

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

6. Обновление и поддержка

Многие ошибки скрипта могут быть связаны с устаревшими или неподдерживаемыми версиями языка программирования, фреймворка или библиотеки. Поэтому важно своевременно обновлять используемые компоненты, следить за выпуском новых версий и устранять известные ошибки и уязвимости. Регулярное обновление и поддержка помогут снизить риск возникновения ошибок в скрипте.

7. Обучение и самообразование

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

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

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

Этот материал, посвящённый обработке ошибок в JavaScript, разбит на три части. Сначала мы сделаем общий обзор системы обработки ошибок в JavaScript и поговорим об объектах ошибок. После этого мы поищем ответ на вопрос о том, что делать с ошибками, возникающими в серверном коде (в частности, при использовании связки Node.js + Express.js). Далее — обсудим обработку ошибок в React.js. Фреймворки, которые будут здесь рассматриваться, выбраны по причине их огромной популярности. Однако рассматриваемые здесь принципы работы с ошибками универсальны, поэтому вы, даже если не пользуетесь Express и React, без труда сможете применить то, что узнали, к тем инструментам, с которыми работаете.

Код демонстрационного проекта, используемого в данном материале, можно найти в этом репозитории.

1. Ошибки в JavaScript и универсальные способы работы с ними

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

throw new Error('something went wrong')

В ходе выполнения этой команды будет создан экземпляр объекта Error и будет сгенерировано (или, как говорят, «выброшено») исключение с этим объектом. Инструкция throw может генерировать исключения, содержащие произвольные выражения. При этом выполнение скрипта остановится в том случае, если не были предприняты меры по обработке ошибки.

Начинающие JS-программисты обычно не используют инструкцию throw. Они, как правило, сталкиваются с исключениями, выдаваемыми либо средой выполнения языка, либо сторонними библиотеками. Когда это происходит — в консоль попадает нечто вроде ReferenceError: fs is not defined и выполнение программы останавливается.

▍Объект Error

У экземпляров объекта Error есть несколько свойств, которыми мы можем пользоваться. Первое интересующее нас свойство — message. Именно сюда попадает та строка, которую можно передать конструктору ошибки в качестве аргумента. Например, ниже показано создание экземпляра объекта Error и вывод в консоль переданной конструктором строки через обращение к его свойству message.

const myError = new Error('please improve your code')
console.log(myError.message) // please improve your code

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

Error: please improve your code
 at Object.<anonymous> (/Users/gisderdube/Documents/_projects/hacking.nosync/error-handling/src/general.js:1:79)
 at Module._compile (internal/modules/cjs/loader.js:689:30)
 at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
 at Module.load (internal/modules/cjs/loader.js:599:32)
 at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
 at Function.Module._load (internal/modules/cjs/loader.js:530:3)
 at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
 at startup (internal/bootstrap/node.js:266:19)
 at bootstrapNodeJSCore (internal/bootstrap/node.js:596:3)

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

▍Генерирование и обработка ошибок

Создание экземпляра объекта Error, то есть, выполнение команды вида new Error(), ни к каким особым последствиям не приводит. Интересные вещи начинают происходить после применения оператора throw, который генерирует ошибку. Как уже было сказано, если такую ошибку не обработать, выполнение скрипта остановится. При этом нет никакой разницы — был ли оператор throw использован самим программистом, произошла ли ошибка в некоей библиотеке или в среде выполнения языка (в браузере или в Node.js). Поговорим о различных сценариях обработки ошибок.

▍Конструкция try…catch

Блок try...catch представляет собой самый простой способ обработки ошибок, о котором часто забывают. В наши дни, правда, он используется гораздо интенсивнее чем раньше, благодаря тому, что его можно применять для обработки ошибок в конструкциях async/await.

Этот блок можно использовать для обработки любых ошибок, происходящих в синхронном коде. Рассмотрим пример.

const a = 5

try {
    console.log(b) // переменная b не объявлена - возникает ошибка
} catch (err) {
    console.error(err) // в консоль попадает сообщение об ошибке и стек ошибки
}

console.log(a) // выполнение скрипта не останавливается, данная команда выполняется

Если бы в этом примере мы не заключили бы сбойную команду console.log(b) в блок try...catch, то выполнение скрипта было бы остановлено.

▍Блок finally

Иногда случается так, что некий код нужно выполнить независимо от того, произошла ошибка или нет. Для этого можно, в конструкции try...catch, использовать третий, необязательный, блок — finally. Часто его использование эквивалентно некоему коду, который идёт сразу после try...catch, но в некоторых ситуациях он может пригодиться. Вот пример его использования.

const a = 5

try {
    console.log(b) // переменная b не объявлена - возникает ошибка
} catch (err) {
    console.error(err) // в консоль попадает сообщение об ошибке и стек ошибки
} finally {
    console.log(a) // этот код будет выполнен в любом случае
}

▍Асинхронные механизмы — коллбэки

Программируя на JavaScript всегда стоит обращать внимание на участки кода, выполняющиеся асинхронно. Если у вас имеется асинхронная функция и в ней возникает ошибка, скрипт продолжит выполняться. Когда асинхронные механизмы в JS реализуются с использованием коллбэков (кстати, делать так не рекомендуется), соответствующий коллбэк (функция обратного вызова) обычно получает два параметра. Это нечто вроде параметра err, который может содержать ошибку, и result — с результатами выполнения асинхронной операции. Выглядит это примерно так:

myAsyncFunc(someInput, (err, result) => {
    if(err) return console.error(err) // порядок работы с объектом ошибки мы рассмотрим позже
    console.log(result)
})

Если в коллбэк попадает ошибка, она видна там в виде параметра err. В противном случае в этот параметр попадёт значение undefined или null. Если оказалось, что в err что-то есть, важно отреагировать на это, либо так как в нашем примере, воспользовавшись командой return, либо воспользовавшись конструкцией if...else и поместив в блок else команды для работы с результатом выполнения асинхронной операции. Речь идёт о том, чтобы, в том случае, если произошла ошибка, исключить возможность работы с результатом, параметром result, который в таком случае может иметь значение undefined. Работа с таким значением, если предполагается, например, что оно содержит объект, сама может вызвать ошибку. Скажем, это произойдёт при попытке использовать конструкцию result.data или подобную ей.

▍Асинхронные механизмы — промисы

Для выполнения асинхронных операций в JavaScript лучше использовать не коллбэки а промисы. Тут, в дополнение к улучшенной читабельности кода, имеются и более совершенные механизмы обработки ошибок. А именно, возиться с объектом ошибки, который может попасть в функцию обратного вызова, при использовании промисов не нужно. Здесь для этой цели предусмотрен специальный блок catch. Он перехватывает все ошибки, произошедшие в промисах, которые находятся до него, или все ошибки, которые произошли в коде после предыдущего блока catch. Обратите внимание на то, что если в промисе произошла ошибка, для обработки которой нет блока catch, это не остановит выполнение скрипта, но сообщение об ошибке будет не особенно удобочитаемым.

(node:7741) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: something went wrong
(node:7741) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. */

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

Promise.resolve(1)
    .then(res => {
        console.log(res) // 1

        throw new Error('something went wrong')

        return Promise.resolve(2)
    })
    .then(res => {
        console.log(res) // этот блок выполнен не будет
    })
    .catch(err => {
        console.error(err) // о том, что делать с этой ошибкой, поговорим позже
        return Promise.resolve(3)
    })
    .then(res => {
        console.log(res) // 3
    })
    .catch(err => {
        // этот блок тут на тот случай, если в предыдущем блоке возникнет какая-нибудь ошибка
        console.error(err)
    })

▍Асинхронные механизмы и try…catch

После того, как в JavaScript появилась конструкция async/await, мы вернулись к классическому способу обработки ошибок — к try...catch...finally. Обрабатывать ошибки при таком подходе оказывается очень легко и удобно. Рассмотрим пример.

;(async function() {
    try {
        await someFuncThatThrowsAnError()
    } catch (err) {
        console.error(err) // об этом поговорим позже
    }

    console.log('Easy!') // будет выполнено
})()

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

2. Генерирование и обработка ошибок в серверном коде

Теперь, когда у нас есть инструменты для работы с ошибками, посмотрим на то, что мы можем с ними делать в реальных ситуациях. Генерирование и правильная обработка ошибок — это важнейший аспект серверного программирования. Существуют разные подходы к работе с ошибками. Здесь будет продемонстрирован подход с использованием собственного конструктора для экземпляров объекта Error и кодов ошибок, которые удобно передавать во фронтенд или любым механизмам, использующим серверные API. Как структурирован бэкенд конкретного проекта — особого значения не имеет, так как при любом подходе можно использовать одни и те же идеи, касающиеся работы с ошибками.

В качестве серверного фреймворка, отвечающего за маршрутизацию, мы будем использовать Express.js. Подумаем о том, какая структура нам нужна для организации эффективной системы обработки ошибок. Итак, вот что нам нужно:

1. Универсальная обработка ошибок — некий базовый механизм, подходящий для обработки любых ошибок, в ходе работы которого просто выдаётся сообщение наподобие Something went wrong, please try again or contact us, предлагающее пользователю попробовать выполнить операцию, давшую сбой, ещё раз или связаться с владельцем сервера. Эта система не отличается особой интеллектуальностью, но она, по крайней мере, способна сообщить пользователю о том, что что-то пошло не так. Подобное сообщение гораздо лучше, чем «бесконечная загрузка» или нечто подобное.
2. Обработка конкретных ошибок — механизм, позволяющий сообщить пользователю подробные сведения о причинах неправильного поведения системы и дать ему конкретные советы по борьбе с неполадкой. Например, это может касаться отсутствия неких важных данных в запросе, который пользователь отправляет на сервер, или в том, что в базе данных уже существует некая запись, которую он пытается добавить ещё раз, и так далее.

▍Разработка собственного конструктора объектов ошибок

Здесь мы воспользуемся стандартным классом Error и расширим его. Пользоваться механизмами наследования в JavaScript — дело рискованное, но в данном случае эти механизмы оказываются весьма полезными. Зачем нам наследование? Дело в том, что нам, для того, чтобы код удобно было бы отлаживать, нужны сведения о трассировке стека ошибки. Расширяя стандартный класс Error, мы, без дополнительных усилий, получаем возможности по трассировке стека. Мы добавляем в наш собственный объект ошибки два свойства. Первое — это свойство code, доступ к которому можно будет получить с помощью конструкции вида err.code. Второе — свойство status. В него будет записываться код состояния HTTP, который планируется передавать клиентской части приложения.

Вот как выглядит класс CustomError, код которого оформлен в виде модуля.

class CustomError extends Error {
    constructor(code = 'GENERIC', status = 500, ...params) {
        super(...params)

        if (Error.captureStackTrace) {
            Error.captureStackTrace(this, CustomError)
        }

        this.code = code
        this.status = status
    }
}

module.exports = CustomError

▍Маршрутизация

Теперь, когда наш объект ошибки готов к использованию, нужно настроить структуру маршрутов. Как было сказано выше, нам требуется реализовать унифицированный подход к обработке ошибок, позволяющий одинаково обрабатывать ошибки для всех маршрутов. По умолчанию фреймворк Express.js не вполне поддерживает такую схему работы. Дело в том, что все его маршруты инкапсулированы.

Для того чтобы справиться с этой проблемой, мы можем реализовать собственный обработчик маршрутов и определять логику маршрутов в виде обычных функций. Благодаря такому подходу, если функция маршрута (или любая другая функция) выбрасывает ошибку, она попадёт в обработчик маршрутов, который затем может передать её клиентской части приложения. При возникновении ошибки на сервере мы планируем передавать её во фронтенд в следующем формате, полагая, что для этого будет применяться JSON-API:

{
    error: 'SOME_ERROR_CODE',
    description: 'Something bad happened. Please try again or contact support.'
}

Если на данном этапе происходящие кажется вам непонятным — не беспокойтесь — просто продолжайте читать, пробуйте работать с тем, о чём идёт речь, и постепенно вы во всём разберётесь. На самом деле, если говорить о компьютерном обучении, здесь применяется подход «сверху-вниз», когда сначала обсуждаются общие идеи, а потом осуществляется переход к частностям.

Вот как выглядит код обработчика маршрутов.

const express = require('express')
const router = express.Router()
const CustomError = require('../CustomError')

router.use(async (req, res) => {
    try {
        const route = require(`.${req.path}`)[req.method]

        try {
            const result = route(req) // Передаём запрос функции route
            res.send(result) // Передаём клиенту то, что получено от функции route
        } catch (err) {
            /*
            Сюда мы попадаем в том случае, если в функции route произойдёт ошибка
            */
            if (err instanceof CustomError) {
                /* 
                Если ошибка уже обработана - трансформируем её в 
                возвращаемый объект
                */

                return res.status(err.status).send({
                    error: err.code,
                    description: err.message,
                })
            } else {
                console.error(err) // Для отладочных целей

                // Общая ошибка - вернём универсальный объект ошибки
                return res.status(500).send({
                    error: 'GENERIC',
                    description: 'Something went wrong. Please try again or contact support.',
                })
            }
        }
    } catch (err) {
        /* 
         Сюда мы попадём, если запрос окажется неудачным, то есть,
         либо не будет найдено файла, соответствующего пути, переданному
         в запросе, либо не будет экспортированной функции с заданным
         методом запроса
        */
        res.status(404).send({
            error: 'NOT_FOUND',
            description: 'The resource you tried to access does not exist.',
        })
    }
})

module.exports = router

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

Теперь взглянем на файл маршрутов.

const CustomError = require('../CustomError')

const GET = req => {
    // пример успешного выполнения запроса
    return { name: 'Rio de Janeiro' }
}

const POST = req => {
    // пример ошибки общего характера
    throw new Error('Some unexpected error, may also be thrown by a library or the runtime.')
}

const DELETE = req => {
    // пример ошибки, обрабатываемой особым образом
    throw new CustomError('CITY_NOT_FOUND', 404, 'The city you are trying to delete could not be found.')
}

const PATCH = req => {
    // пример перехвата ошибок и использования CustomError
    try {
        // тут случилось что-то нехорошее
        throw new Error('Some internal error')
    } catch (err) {
        console.error(err) // принимаем решение о том, что нам тут делать

        throw new CustomError(
            'CITY_NOT_EDITABLE',
            400,
            'The city you are trying to edit is not editable.'
        )
    }
}

module.exports = {
    GET,
    POST,
    DELETE,
    PATCH,
}

В этих примерах с самими запросами ничего не делается. Тут просто рассматриваются разные сценарии возникновения ошибок. Итак, например, запрос GET /city попадёт в функцию const GET = req =>..., запрос POST /city попадёт в функцию const POST = req =>... и так далее. Эта схема работает и при использовании параметров запросов. Например — для запроса вида GET /city?startsWith=R. В целом, здесь продемонстрировано, что при обработке ошибок, во фронтенд может попасть либо общая ошибка, содержащая лишь предложение попробовать снова или связаться с владельцем сервера, либо ошибка, сформированная с использованием конструктора CustomError, которая содержит подробные сведения о проблеме.
Данные общей ошибки придут в клиентскую часть приложения в таком виде:

{
    error: 'GENERIC',
    description: 'Something went wrong. Please try again or contact support.'
}

Конструктор CustomError используется так:

throw new CustomError('MY_CODE', 400, 'Error description')

Это даёт следующий JSON-код, передаваемый во фронтенд:

{
    error: 'MY_CODE',
    description: 'Error description'
}

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

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

3. Работа с ошибками на клиенте

Теперь пришла пора описать третью часть нашей системы обработки ошибок, касающуюся фронтенда. Тут нужно будет, во-первых, обрабатывать ошибки, возникающие в клиентской части приложения, а во-вторых, понадобится оповещать пользователя об ошибках, возникающих на сервере. Разберёмся сначала с показом сведений о серверных ошибках. Как уже было сказано, в этом примере будет использована библиотека React.

▍Сохранение сведений об ошибках в состоянии приложения

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

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

1. Глобальные ошибки — в эту категорию попадают сообщения об ошибках общего характера, приходящие с сервера, или ошибки, которые, например, возникают в том случае, если пользователь не вошёл в систему и в других подобных ситуациях.
2. Специфические ошибки, выдаваемые серверной частью приложения — сюда относятся ошибки, сведения о которых приходят с сервера. Например, подобная ошибка возникает, если пользователь попытался войти в систему и отправил на сервер имя и пароль, а сервер сообщил ему о том, что пароль неправильный. Подобные вещи в клиентской части приложения не проверяются, поэтому сообщения о таких ошибках должны приходить с сервера.
3. Специфические ошибки, выдаваемые клиентской частью приложения. Пример такой ошибки — сообщение о некорректном адресе электронной почты, введённом в соответствующее поле.

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

Здесь будет использоваться встроенная в React система управления состоянием приложения, но, при необходимости, вы можете воспользоваться и специализированными решениями для управления состоянием — такими, как MobX или Redux.

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

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

Сообщение о глобальной ошибке

Теперь взглянем на код, который хранится в файле Application.js.

import React, { Component } from 'react'

import GlobalError from './GlobalError'

class Application extends Component {
    constructor(props) {
        super(props)

        this.state = {
            error: '',
        }

        this._resetError = this._resetError.bind(this)
        this._setError = this._setError.bind(this)
    }

    render() {
        return (
            <div className="container">
                <GlobalError error={this.state.error} resetError={this._resetError} />
                <h1>Handling Errors</h1>
            </div>
        )
    }

    _resetError() {
        this.setState({ error: '' })
    }

    _setError(newError) {
        this.setState({ error: newError })
    }
}

export default Application

Как видно, в состоянии, в Application.js, имеется место для хранения данных ошибки. Кроме того, тут предусмотрены методы для сброса этих данных и для их изменения.

Ошибка и метод для сброса ошибки передаётся компоненту GlobalError, который отвечает за вывод сообщения об ошибке на экран и за сброс ошибки после нажатия на значок x в поле, где выводится сообщение. Вот код компонента GlobalError (файл GlobalError.js).

import React, { Component } from 'react'

class GlobalError extends Component {
    render() {
        if (!this.props.error) return null

        return (
            <div
                style={{
                    position: 'fixed',
                    top: 0,
                    left: '50%',
                    transform: 'translateX(-50%)',
                    padding: 10,
                    backgroundColor: '#ffcccc',
                    boxShadow: '0 3px 25px -10px rgba(0,0,0,0.5)',
                    display: 'flex',
                    alignItems: 'center',
                }}
            >
                {this.props.error}
                 
                <i
                    className="material-icons"
                    style={{ cursor: 'pointer' }}
                    onClick={this.props.resetError}
                >
                    close
                </font></i>
            </div>
        )
    }
}

export default GlobalError

Обратите внимание на строку if (!this.props.error) return null. Она указывает на то, что при отсутствии ошибки компонент ничего не выводит. Это предотвращает постоянный показ красного прямоугольника на странице. Конечно, вы, при желании, можете поменять внешний вид и поведение этого компонента. Например, вместо того, чтобы сбрасывать ошибку по нажатию на x, можно задать тайм-аут в пару секунд, по истечении которого состояние ошибки сбрасывается автоматически.

Теперь, когда всё готово для работы с глобальными ошибками, для задания глобальной ошибки достаточно воспользоваться _setError из Application.js. Например, это можно сделать в том случае, если сервер, после обращения к нему, вернул сообщение об общей ошибке (error: 'GENERIC'). Рассмотрим пример (файл GenericErrorReq.js).

import React, { Component } from 'react'
import axios from 'axios'

class GenericErrorReq extends Component {
    constructor(props) {
        super(props)

        this._callBackend = this._callBackend.bind(this)
    }

    render() {
        return (
            <div>
                <button onClick={this._callBackend}>Click me to call the backend</button>
            </div>
        )
    }

    _callBackend() {
        axios
            .post('/api/city')
            .then(result => {
                // сделать что-нибудь с результатом в том случае, если запрос оказался успешным
            })
            .catch(err => {
                if (err.response.data.error === 'GENERIC') {
                    this.props.setError(err.response.data.description)
                }
            })
    }
}

export default GenericErrorReq

На самом деле, на этом наш разговор об обработке ошибок можно было бы и закончить. Даже если в проекте нужно оповещать пользователя о специфических ошибках, никто не мешает просто поменять глобальное состояние, хранящее ошибку и вывести соответствующее сообщение поверх страницы. Однако тут мы не остановимся и поговорим о специфических ошибках. Во-первых, это руководство по обработке ошибок иначе было бы неполным, а во-вторых, с точки зрения UX-специалистов, неправильно будет показывать сообщения обо всех ошибках так, будто все они — глобальные.

▍Обработка специфических ошибок, возникающих при выполнении запросов

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

Сообщение о специфической ошибке

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

import React, { Component } from 'react'
import axios from 'axios'

import InlineError from './InlineError'

class SpecificErrorRequest extends Component {
    constructor(props) {
        super(props)

        this.state = {
            error: '',
        }

        this._callBackend = this._callBackend.bind(this)
    }

    render() {
        return (
            <div>
                <button onClick={this._callBackend}>Delete your city</button>
                <InlineError error={this.state.error} />
            </div>
        )
    }

    _callBackend() {
        this.setState({
            error: '',
        })

        axios
            .delete('/api/city')
            .then(result => {
                // сделать что-нибудь с результатом в том случае, если запрос оказался успешным
            })
            .catch(err => {
                if (err.response.data.error === 'GENERIC') {
                    this.props.setError(err.response.data.description)
                } else {
                    this.setState({
                        error: err.response.data.description,
                    })
                }
            })
    }
}

export default SpecificErrorRequest

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

▍Ошибки, возникающие в клиентской части приложения

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

В поле ничего нет, мы сообщаем об этом пользователю

Вот код файла SpecificErrorFrontend.js, реализующий вышеописанный функционал.

import React, { Component } from 'react'
import axios from 'axios'

import InlineError from './InlineError'

class SpecificErrorRequest extends Component {
    constructor(props) {
        super(props)

        this.state = {
            error: '',
            city: '',
        }

        this._callBackend = this._callBackend.bind(this)
        this._changeCity = this._changeCity.bind(this)
    }

    render() {
        return (
            <div>
                <input
                    type="text"
                    value={this.state.city}
                    style={{ marginRight: 15 }}
                    onChange={this._changeCity}
                />
                <button onClick={this._callBackend}>Delete your city</button>
                <InlineError error={this.state.error} />
            </div>
        )
    }

    _changeCity(e) {
        this.setState({
            error: '',
            city: e.target.value,
        })
    }

    _validate() {
        if (!this.state.city.length) throw new Error('Please provide a city name.')
    }

    _callBackend() {
        this.setState({
            error: '',
        })

        try {
            this._validate()
        } catch (err) {
            return this.setState({ error: err.message })
        }

        axios
            .delete('/api/city')
            .then(result => {
                // сделать что-нибудь с результатом в том случае, если запрос оказался успешным
            })
            .catch(err => {
                if (err.response.data.error === 'GENERIC') {
                    this.props.setError(err.response.data.description)
                } else {
                    this.setState({
                        error: err.response.data.description,
                    })
                }
            })
    }
}

export default SpecificErrorRequest

▍Интернационализация сообщений об ошибках с использованием кодов ошибок

Возможно, сейчас вы задаётесь вопросом о том, зачем нам нужны коды ошибок (наподобие GENERIC), если мы показываем пользователю только сообщения об ошибках, полученных с сервера. Дело в том, что, по мере роста и развития приложения, оно, вполне возможно, выйдет на мировой рынок, а это означает, что настанет время, когда создателям приложения нужно будет задуматься о поддержке им нескольких языков. Коды ошибок позволяют отличать их друг от друга и выводить сообщения о них на языке пользователя сайта.

Итоги

Надеемся, теперь у вас сформировалось понимание того, как можно работать с ошибками в веб-приложениях. Нечто вроде console.error(err) следует использовать только в отладочных целях, в продакшн подобные вещи, забытые программистом, проникать не должны. Упрощает решение задачи логирования использование какой-нибудь подходящей библиотеки наподобие loglevel.

Уважаемые читатели! Как вы обрабатываете ошибки в своих проектах?