Angular decorator, interceptor and error handler
Télécharger en tant que PPTX, PDF2 j'aime2,210 vues
Le document traite de la gestion des erreurs dans une application Angular, en présentant un service 'globalerrorhandler' pour centraliser le traitement des erreurs. Il explique la création d'un interceptor HTTP et de décorateurs pour intercepter les erreurs à différents niveaux, notamment les erreurs de requêtes et les exceptions runtime. Des références et un exemple de code sont fournis pour illustrer la mise en œuvre.
![POUR LES APPELS HTTP
● Création d’un service Interceptor: objet implémentant 4 méthodes:
○ request
○ requestError
○ response
○ responseError
● Enregistrer notre interceptor dans le $httpProvider.interceptors
.factory('errorHttpInterceptor', function ($q, GlobalErrorHandler) {
return {
responseError: function responseError(rejection) {
GlobalErrorHandler.ajaxError(rejection);
return $q.reject(rejection);
}
};
})
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('errorHttpInterceptor');
}])](https://image.slidesharecdn.com/angular-error-140623155658-phpapp01/85/Angular-decorator-interceptor-and-error-handler-5-320.jpg)
Angular decorator, interceptor and error handler
- 4. GLOBALERRORHANDLER Un service GlobalErrorHandler pour centraliser la stratégie ● message dans l’application ● trace local ● envoi au serveur ... .factory('GlobalErrorHandler', function ($window) { var service = { error: function (error) { }, ajaxError: function (rejection) {. }, }; return service; });
- 5. POUR LES APPELS HTTP ● Création d’un service Interceptor: objet implémentant 4 méthodes: ○ request ○ requestError ○ response ○ responseError ● Enregistrer notre interceptor dans le $httpProvider.interceptors .factory('errorHttpInterceptor', function ($q, GlobalErrorHandler) { return { responseError: function responseError(rejection) { GlobalErrorHandler.ajaxError(rejection); return $q.reject(rejection); } }; }) .config(['$httpProvider', function ($httpProvider) { $httpProvider.interceptors.push('errorHttpInterceptor'); }])
- 6. UN DECORATOR “Surcharge un service tout en gardant la main sur l’ancienne implémentation” ❏ $provide.decorator ❏ dans un bloc config ❏ Ok pour l’injection de dépendances ❏ yo angular:decorator MyService .config(function ($provide) { $provide.decorator('MyService', function ($delegate) { // decorate the $delegate return $delegate; }); });
- 7. POUR LE RUNTIME On doit être notifier de toutes les erreurs pouvant se produire ● window.onerror $provide.decorator('$window', function ($delegate,GlobalErrorHandler) { $delegate.onerror = function (errorMsg, url, lineNumber) { var error = new Error(errorMsg, url, lineNumber); GlobalErrorHandler.error(error); }; return $delegate; });
- 8. POUR LE RUNTIME On doit être notifier de toutes les erreurs pouvant se produire ● $exceptionHandler $provide.decorator('$exceptionHandler', function (GlobalErrorHandler,$delegate) { return function (exception, cause) { GlobalErrorHandler.error(exception); $delegate(exception, cause); }; });
- 9. DÉMO
- 10. RÉFÉRENCES ● https://github.com/cbalit/angular-error ● https://docs.angularjs.org/api/auto/object/$provide ● https://docs.angularjs.org/api/ng/service/$http ● http://bahmutov.calepin.co/catch-all-errors-in-angular-app.html