Course Progress 89%

AngularJS Error Handling

← AngularJS Security AngularJS Performance Optimisation →

AngularJS application में errors आना normal है, लेकिन important यह है कि उन errors को proper तरीके से handle किया जाए। Good error handling से application stable रहती है, debugging आसान होती है और user को better experience मिलता है।

इस chapter में आप सीखेंगे:

  • AngularJS में error handling क्यों जरूरी है
  • JavaScript errors vs AngularJS errors
  • $http error handling
  • Promises error handling
  • $exceptionHandler
  • Global error handling strategies
  • Best practices

AngularJS में Error Handling क्यों जरूरी है

अगर errors handle न किए जाएं तो:

  • Application crash हो सकती है
  • Blank screen या unexpected behavior दिख सकता है
  • User को समझ नहीं आता कि problem क्या है
  • Debugging difficult हो जाती है

Proper error handling से:

  • Errors controlled रहते हैं
  • User-friendly messages दिखाए जा सकते हैं
  • Developers को clear logs मिलते हैं

Types of Errors in AngularJS

AngularJS application में mainly ये errors होते हैं:

  • JavaScript Runtime Errors
  • AngularJS Expression Errors
  • $http / API Errors
  • Promise Rejection Errors

JavaScript Errors in Controller

app.controller("myCtrl", function($scope) {
  $scope.result = a + 10;
});

Explanation

  • Variable a defined नहीं है
  • JavaScript runtime error आएगा
  • Application break हो सकती है

AngularJS console में error दिखा देगा, लेकिन UI unstable हो सकती है।

AngularJS Expression Errors

<p>{{ user.name.first }}</p>

Explanation

  • अगर user undefined है
  • AngularJS error throw नहीं करता
  • Expression silently fail हो जाती है

यह behavior AngularJS को user-friendly बनाता है।

$http Error Handling

Most common errors API calls में आते हैं।

Example: Handling API Error

app.controller("ctrl", function($scope, $http) {
  $http.get("data.json")
    .then(function(response) {
      $scope.data = response.data;
    })
    .catch(function(error) {
      $scope.error = "Data load failed";
    });
});

Code Explanation

  • then() success response handle करता है
  • catch() error response handle करता है
  • User को custom error message दिखाया जा सकता है

$http Error Object Structure

.catch(function(error) {
  console.log(error.status);
  console.log(error.statusText);
});

Explanation

  • status HTTP status code देता है (404, 500)
  • statusText error description देता है
  • Debugging में बहुत useful होता है

Promise Error Handling

AngularJS promises $q use करते हैं।

Example

dataService.getData()
  .then(function(data) {
    $scope.result = data;
  })
  .catch(function(err) {
    $scope.error = err;
  });

Explanation

  • Promise reject होने पर catch() execute होता है
  • Centralized error handling possible होती है

finally() for Cleanup

dataService.getData()
  .finally(function() {
    $scope.loading = false;
  });

Explanation

  • Success या error दोनों case में run होता है
  • Loader hide करने के लिए useful

Custom Error Handling using $exceptionHandler

AngularJS global error handling के लिए $exceptionHandler देता है।

Custom Exception Handler

app.factory("$exceptionHandler", function() {
  return function(exception, cause) {
    console.error("Error:", exception.message);
  };
});

Explanation

  • AngularJS internal errors को capture करता है
  • Logging या server पर error send किया जा सकता है
  • Application crash नहीं होती

Handling Errors in Services

app.service("myService", function($q) {
  this.getData = function() {
    var deferred = $q.defer();
    deferred.reject("Service error");
    return deferred.promise;
  };
});

Explanation

  • Error service level पर handle किया जा सकता है
  • Controller clean रहता है

Form Error Handling

<input ng-model="email" required>
<span ng-show="myForm.email.$error.required">
  Email required
</span>

Explanation

  • AngularJS built-in validation errors देता है
  • User को clear feedback मिलता है

Global HTTP Error Interceptor

app.config(function($httpProvider) {
  $httpProvider.interceptors.push(function($q) {
    return {
      responseError: function(rejection) {
        alert("Server error");
        return $q.reject(rejection);
      }
    };
  });
});

Explanation

  • All HTTP errors centrally handle होते हैं
  • Repeated error handling code avoid होता है

Common Error Handling Mistakes

  • Errors silently ignore करना
  • User को raw error दिखाना
  • Promise reject handle न करना
  • Console logs को production में छोड़ देना

Best Practices

  • Always catch() use करें
  • User-friendly error messages दिखाएं
  • Logs और UI errors अलग रखें
  • Global error handling implement करें
  • API errors properly handle करें

Summary

इस chapter में आपने सीखा:

  • AngularJS में error handling का importance
  • $http और promises error handling
  • $exceptionHandler का use
  • Global HTTP interceptors
  • Best practices for stable AngularJS apps
← AngularJS Security AngularJS Performance Optimisation →
  • Home