Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

7- Custom Error Pages

0 (0 Likes / 0 Dislikes)
let's see how to display custom error pages in homeController in the about action I will manually throw an exception to simulate a situation where we have an unhandled exception now build back to the browser and I will navigate back to Home/About so we get the details about the exception and where it happens this is great for us developer but we don't want to display this in production first of all because this will freak out our users and also it will also add our app a risk in terms of security because the hackers can try various input into our application to get an idea of how we have written the code he can also find the version of .NET that we are using so we are using .NET version 4 and with this he can easily do a Google search to find the vulneribility in this version to solve this issue, in web.config under system.web I am gonna add a new element <customErrors> and set the mode="On" with this we only display friendly Custom error messages instead of the exception details we can also set mode="RemoteOnly" and this means custom or friendly messages will be displayed only on machine that connected remotely but if you are browsing our application locally like in this case as a dev I wanna see the error in details but in this video I will set this to "on" because I want to enforce custom error pages save, refresh, back to the browser so we get this error page more user friendly and hide exception details but where does it come from? let me show you in solution explorer, under Views Shared\Error.cshtml but who is sharing this view? we don't have a controller for that that's where our Global Action Filter comes into the picture in filter.config remember this attribute: HandleErrorAttribute() this fileter is applied to all filter in all actions as I explained before actionFilter can be executed before or after an action so this filter is executed after an action and if there is an unhandled exception in that action we catch it and then render that custom view so this is how we display custom error pages for our internal server error which happens when there is an exception in our application but there is another kind of STTP error that we need to handle explicitly and that's 404 error which indicates a given resource is not found on the server so let's see a few example of the 404 error first I am going to navigate to a non existing action like Home/about2 remember the look and feel of this page this page is coming from ASP.Net Framework and we are getting this because ASP.Net can not find an action that matches this URL pattern now, look at another example in CustomerController this is how we implemented our Edit action so if customer is null we return HttpNotFound this helper method simply set status code of the response to 404 now, let's take a look at the result so go to customers/edit and provide an invalid ID note the look and feel of this error page this is different from the previous one, right? now this one is coming from IRS so when the status code of the response is set to 404 IRS would generate this error page now let's take a look at the 3rd example I want to access a static resource like image.gif again we see the same IRS error page but what happen to our custom error page? the custom error page, as I explained is only rendered when there is an exception so the handleErrorAttribute catch the exception and render the view but when we access a static resource like image.gif there is no exception and this request doesn't even make it to ASP.Net Framework it hits IRS first and IRS can tell from the URL pattern this is a static resource so it will not hand this off to ASP.Net the same thing happen when we return HttpNotFound again there is no exception in our app this method just set the error code to 404 and the rest of the story is handled by IRS so HandleErrorAttribute does not work in this case and for this kind of error we need a bit more configuration back in web.config inside customErrors I am gonna add a child element <error statusCode="404" gonna redirect the user to this file redirect ="~/404.html" ~ represents the root of the site so with this we telling MVC Framework in case we encounter a 404 Error we should redirect the user to this page now you might be curious why we are redirecting to a static page instead of an action like this "~/Error/NotFound" what is the difference? the difference is if something else is happen in our MVC application I am talking about an error trouble shooting that is more complicated so in this situation when there is a 404 error it is best to get out of the ASP.Net zone and start a static file also this makes deployment easier so if you want to change the static file we can deploy individually we don't have to recompile and deploy the entire application so, I am gonna create this file in the project root add Html page 404.html and I am gonna keep it very simple and just add a heading <h1>Not Found<h1> back to the browser I am gonna go to a non existing action so home/about2 so now we see a custom error page what if we hit a static resource image.gif what do you think is gonna happen? well, as I explain before, as this is a static resource this will not make it to ASP.Net runtime so it is served by IRS directly and that's why we get this error page which is again a standard IRS error page now to change it we need to apply a bit more configuration so back in web.config we scrolled down and inside <system.webServer> we can add configuration for IRS so here I am gonna add HttpErrors and set the errormode ="Custom" and that means we want to display custom error pages at all time both for local and remote client if you want to display this only to remote client errorMode="DetailedLocalOnly" but in this video I will set it to custom because I want you to see it now first we need to remove the standard error page <remove statusCode="404"> and then we add another error page <error statusCode="404" path="404.html"> and we set the responseMode="File" this is very important if you use any of the other setting the statusCode will be change from 404 to 200 so from the perspective of the client they don't get the actual 404 error and this is bad for Search Engine Optimization back to the browser open Chrome dev tool, in the Network tab refresh the page look, we get our custom error page and look at the request statusCode of the response is 404 so this is what we want to return to our client

Video Details

Duration: 9 minutes and 10 seconds
Language: English
License: Dotsub - Standard License
Genre: None
Views: 2
Posted by: lpk1234 on Nov 6, 2019

Caption and Translate

    Sign In/Register for Dotsub to translate this video.