How to manage a handling angularjs HTTP error with MVC custom page error?

user_1833968 0
Viewed 292

• I need to manage page not found and server problem errors by redirect to my own custom error pages, so I done this by following, and its working fine.

web.config 

<customErrors mode="On">  
<error statusCode="400" redirect="~/Error/Error400"/>  
<error statusCode="404" redirect="~/Errors/Error404" />  
<error statusCode="403" redirect="~/Error/Error403" />  
<error statusCode="500" redirect="~/Errors/Error500" />  
</customErrors>

• so now when I need to get the angularjs http errors like 404 by following code in which passing wrong method (GetDetai) which is not available in controller (actual is 'GetDetails').

$http({  
        method: 'GET',  
        url: '/Admin/Dashboard/GetDetai',  
        headers: { "Content-Type": "application/json" }  
     }).then(function (result) {  
        console.log(result);  
        $scope.GetCustomer = result.data;  
        }, function (reason) {  
                console.log(reason);  
            if (reason.status == '404') {  
                console.log('Invalid Method/URL.');  
            }  
            else if (reason.status == '505') {  
                console.log('Internal server error.');  
            }  
        });

• then its not catching the 404 error in error function, its going into then function and displaying below

First Console log Output

{data: "
↵
↵
↵<!DOCTYPE html>
↵<html>
↵<head>
↵    <meta c…white;">Go Back To Home</a>
↵</body>
↵</html>
↵
↵", status: 200, config: {…}, statusText: "OK", headers: ƒ, …}
data: "
↵
↵
↵<!DOCTYPE html>
↵<html>
↵<head>
↵    <meta charset="utf-8" />
↵    <title></title>
↵    <style>
↵        body {
↵            display: inline-block;
↵            background: #00AFF9 url(https://cbwconline.com/IMG/Codepen/Unplugged.png) center/cover no-repeat;
↵            height: 100vh;
↵            margin: 0;
↵            color: white;
↵        }
↵
↵        h1 {
↵            margin: .8em 3rem;
↵            font: 4em Roboto;
↵        }
↵
↵        p {
↵            display: inline-block;
↵            margin: .2em 3rem;
↵            font: 2em Roboto;
↵        }
↵    </style>
↵</head>
↵<body>
↵    <h1>Whoops!</h1>
↵    <p>Something went wrong</p><br /><br />
↵    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
↵    <a href="/Home/Index" style="color:white;">Go Back To Home</a>
↵</body>
↵</html>
↵
↵"
status: 200
headers: ƒ (name)
config: {method: "GET", transformRequest: Array(1), transformResponse: Array(1), jsonpCallbackParam: "callback", paramSerializer: ƒ, …}
statusText: "OK"
xhrStatus: "complete"
__proto__: Object

• But when I commented/removed that web.config custom error code then this angularjs http call error function working properly, getting expected 404 error.

So How to manage these both kind of errors properly with non dependencies and non effect on other codes?

angularjs model-view-controller visual-studio c#
2 Answers

Your HTTP call returned status "200" which is "OK" so you cannot see HTTP ERRORS Error raised in processing retrieved data:

$http({
  ... 
})
.then(
  function (result) {
    console.log(result);
    //Line below is not invoked as result.data != "Exception"
    if (result.data == "Exception") {
        ... 
    }
    else {
        ...
        //This assignes result.data to GetCustomer in scope 
        //and at late stage of processing retrieved data rose exception... 
        $scope.GetCustomer = result.data;
    }
  }, 
  function (reason) { //This code is not invoking as http.resultCode="200" ("OK")
    ...
  }
);
user_131659070

@ShashankVivek is 100% right, your server should return a HTTP_NOT_FOUND (404) error when calling an invalid endpoint.

Until the problem is fixed on the server side, you can verify that the returned result does not contain a pattern indicating that it is an HTML document and not a JSON document, for example <DOCTYPE html>

$http({
  method: "GET",
  url: "/Admin/Dashboard/GetDetai",
  headers: { "Content-Type": "application/json" },
}).then(
  function (result) {
    // hack to check if an error occurred on server-side
    if(/<!DOCTYPE html>/.test(result)) {
      throw new Error({status: 500});
    } // end of hack
    ...
  },
  function (reason) {
    if (reason.status == "404") {
      growl.warning("Connection lost.", { title: "Warning!" });
    } else if (reason.status == "505") {
      growl.warning("Invalid Methode/Url.", { title: "Warning!" });
    }
  }
);
user_75575380
Related