How to catch Angular ui-router resolve errors

It’s more than annoying to have just a blank page and no errors in console when your issue is inside ui-router resolve. Finally I found a pretty nice solution, don’t know why it’s not provided “from the box”. In case of error ui-router sends specific event $stateChangeError that we could listen for:

[javascript]
$rootScope.$on(‘$stateChangeError’, function(event, toState, toParams, fromState, fromParams, error){
console.error(error);
});
[/javascript]

and now wow! we have an exact error in console and no need to guess what’s wrong with your code anymore.

ui-router debug snippet

found nice code snippet that could help you to debug ui-router issues by loggin router events in console:

[javascript]
// Credits: Adam`s answer in http://stackoverflow.com/a/20786262/69362
var $rootScope = angular.element(document.querySelectorAll(‘[ui-view]’)[0]).injector().get(‘$rootScope’);

$rootScope.$on(‘$stateChangeStart’,function(event, toState, toParams, fromState, fromParams){
console.log(‘$stateChangeStart to ‘+toState.to+’- fired when the transition begins. toState,toParams : \n’,toState, toParams);
});

$rootScope.$on(‘$stateChangeError’,function(event, toState, toParams, fromState, fromParams){
console.log(‘$stateChangeError – fired when an error occurs during transition.’);
console.log(arguments);
});

$rootScope.$on(‘$stateChangeSuccess’,function(event, toState, toParams, fromState, fromParams){
console.log(‘$stateChangeSuccess to ‘+toState.name+’- fired once the state transition is complete.’);
});

$rootScope.$on(‘$viewContentLoaded’,function(event){
console.log(‘$viewContentLoaded – fired after dom rendered’,event);
});

$rootScope.$on(‘$stateNotFound’,function(event, unfoundState, fromState, fromParams){
console.log(‘$stateNotFound ‘+unfoundState.to+’ – fired when a state cannot be found by its name.’);
console.log(unfoundState, fromState, fromParams);
});
[/javascript]

if you have you Angular app root on html element you can simply use:

[javascript]
var $rootScope = angular.element(document).scope();
[/javascript]

code is placed here.

Все для обработки JavaScript error в проекте

Решил сделать что-то типа TODO списка “Что необходимо сделать для красивой обработки ошибок JavaScript в проекте”.

  • своя обертка-заглушка на объект console
  • отправка ошибок на сервер
  • переопределение обработчика window.onerror
  • создание своих классов ошибок
  • классификация ошибок
  • красивый вывод
  • режим отладки

Более подробно о каждом под катом.

Continue reading

Отправка логов php на почту.

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

Continue reading

Debug ON. Кнопка в FireFox для разработчика.

В дополнение к статье http://habrahabr.ru/post/140369/ о том, как можно выводить для себя ошибки в консоль, расскажу как можно еще сделать этот переключатель не “путем клика например, на значке копирайта“, а кнопкой в браузере.

Continue reading