Обработка ошибок в JavaScript

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

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

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

HTML-код:

JavaScript-код:

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

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

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

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

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

  • находим элемент с 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/

Tags

.net .net-framework .net-framework-3.5 agile ajax ajax-control-toolkit ampq ansible apache asp.net asp.net-mvc automation axum babel bash benchmark blog blog-engine bootstrap buildout c# cache centos chrome ci cinder ckan cli cloud code-review codeplex community config debugger deface dependencies development-environment devices devstack devtime disks django dlr dns docker dockerimage dos easy_install elmah encoding environment-variables error event events everything-as-a-code exception exceptions fabrik firefox flask foreach forms fstab gae gcc gerrit git github go google google-app-engine grep hack hacked hardware headless horizon hound html hugo iaas ienumerable iis internet iptables iron-python ironic iscsi java-script javascript jenkins jquery js jsx k8s kharkivpy kiss kombu kubernetes kvm kyiv lettuce libvirt linux lio loci logging loopback losetup lvm mac-os macos mercurial microsoft microsoft-sync-framework mobile mono ms-office msbuild networking news nginx npm npx offtopic oop open-source open-xml opensource openstack openvswitch os packages paraller-development patterns-practices performance php pika pip plugins pnp podcast popup postgresql profiler project protocols proxy pycamp pycharm pycon pykyiv pylint pypi python python-3 qcow quantum qumy rabbitmq rar react reactjs refactoring rfc rhel search-engine security selenium server shell silverlight socket software-engineering source-control sourcegear-vault sources sql sql-server sql-server-express sqlalchemy ssh static-site sublimetext svg tests tgt tipfy todo tornado typescript uapycon ui uneta unit-tests upgrades usability vim virtualenv visual-studio vitrage vm vue.js vuejs web-development web-server web-service web_root webpack webroot windows windows-live word-press x32 x64 xcode xml xss xvfb интернет-магазин книги

Recent posts

Go 1.18: new features

Всё будет Kubernetes

2022 Relaunch

Everyday Blogging

I don't want this CI


Archives

2022 (3)
2019 (73)
2018 (2)
2017 (3)
2016 (2)
2015 (3)
2014 (5)
2013 (17)
2012 (22)
2011 (36)
2010 (25)
2009 (35)
2008 (32)
2007 (2)