На мой взгляд, обработке ошибок на JavaScript уделяется незаслуженно мало внимания. Если при написании серверного кода, конструкцию try-catch можно встретить достаточно часто, то на стороне клиента такой код скорее исключение, чем правило.

Для начала немного теории.  Исключение (exception) - ошибка или нестандартное поведение программы во время её работы. Например, попытка открыть файл, которого не существует, или вызвать метод элемента DOM-модели, которого нет.

В JavaScript существует конструкция try-catch-finaly, которая работает так же, как и в других языках программирования.  Логично предположить, что если есть try-catch, то должен быть и оператор throw. И такой оператор в JavaScript действительно есть. Рассмотрим пример (файл error-0.html):

HTML-код:

<div id="someButton">
</div>

JavaScript-код:

var button = document.getElementById("someButton");
button.click();


При выполнении такого кода мы получаем исключение (ошибку) такого вида:

Uncaught TypeError: Object #<an HTMLDivElement> has no method 'click'

Сразу хочу отметить, что пример немного выдуманный, но в реальном коде подобное встретить можно, особенно в случаях использования Ajax: кода html-код нам приходит с сервера.

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

Добавляем в наш код конструкцию try-catch (файл error-1.html):

var button = document.getElementById("someButton");
try {
    button.click();
}
catch (e) {
document.write(e.name + ':' + e.message);
}

Что тут происходит:

  • находим элемент с id=”someButton”;
  • у найденного элемента пытаемся вызвать метод click();
  • так как такого метода у div’а нет, мы попадаем в тело блока catch;


В блоке catch у нас есть переменная e с типом Error, которая содержит два интересующих нас свойства:

  • name - тип ошибки;
  • message - текст сообщения об ошибке.

На самом деле свойств больше, но сейчас нас они не интересуют.

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

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

  • SyntaxError - одна из наиболее распространённых ошибок, возникающая при неверном синтаксисе JavaScript’а;
  • TypeError - возникает когда интерпритарор JavaScript’а ожидает получить объект другого типа;
  • EvalError - ошибка при исполнении функции eval();
  • RangeError - возникает при обращении к несуществующему элементу массива;
  • URIError - возникает при выполнении decode/encode URL.


Кроме стандартных типов ошибок(исключений) можно создавать свои. Для того, чтобы бросить исключение (rise exception) необходимо использовать одну из следующих конструкций (пример смотрите в файле error-2.html):

  • throw "Error!";
  • throw new Error("Some Error");
  • throw {name:"Custom Error", message:"Custom error message"};

Ещё одна важная заметка. Так как в JavaScript в отличии от многих других языков используется объект Error вместо Exception, то в тексте значение слов “исключение” и “ошибка” имеют одинаковое значение.

Ссылка на примеры: https://github.com/e0ne/BlogSamples/tree/master/JavaScriptErrors/


Comments

Andrey Legayev Ukraine

Tuesday, November 30, 2010 2:02 PM

Andrey Legayev

Хороший обзор, было бы неплохо еще и глобальный обработчик исключений упомянуть: window.onerror
С его помощью можно обработать все неперехваченные исключения и предотвратить индикации об ошибке в странице браузером.
P.S. Приятно видеть интеграцию с coComment-ом! Пару лет назад я занимался разработкой этого самого cocoBar-а Smile

e0ne Ukraine

Tuesday, November 30, 2010 5:54 PM

e0ne

Отличное замечание о window.onerror. Когда писал пост о нём даже не подумал.

P.S. За интеграцию с coComment'ом спасибо разработчикам BlogEngine.NET

Comments are closed