Skip to main content

How to Setup Custom Umbraco Error Pages per HTTP Status Error Code (e.g: 400, 401, 403, 404, 500, etc.)

In order to create human friendly content editable custom error pages for an Umbraco project, below are the steps that you can follow;

  • In your web.config (system.webServer section), add the following setting to tell the site to pass all of the error handling through you application:
       <httpErrors existingResponse="PassThrough" />
  • Add the httpErrors - this is an IIS level setting rather than an ASP.NET setting, therefore, this needs to go into the system.webServer section in the web.config:

    <httpErrors errorMode="Custom" existingResponse="Replace">

  • Login to umbraco backoffice and create the error pages(if you have different paths than shown above, remember to update your paths - for my case under my home page, I have got an Error Page folder, and under it there is HTTP Errors node and then the error pages)
  • Go to your project's umbracoSettings.config file and add the default 404 page node id there too, by adding this; you make sure if any of the error page urls are wrong, then you return your 404 page.
      <!--live & training-->
  • Finally test that your custom error pages are returned correctly, you can throw exceptions for this.
     #region Http error code custom page tests

        public ActionResult BadRequest()
            throw new HttpException(400, "Bad request");

        public ActionResult Unauthorized()
            // IIS returns 500 for status code 401 - Unauthrorized
            throw new HttpException(401, "Unauthorized");

        public ActionResult Forbidden()
            throw new HttpException(403, "Forbidden");

        public ActionResult NotFound()
            throw new HttpException(404, "Not found");

        public ActionResult ServerError()
            throw new HttpException(500, "Server error");

        #endregion Http error code custom page tests
  • At this point, it is also good practice to return the correct http status codes for different error pages, for this you can add a new "http status code override" property to the error page's document type in Umbraco and based on the value of this setting, you can return the correct http status code(404, 403, 500 etc). This will hopefully help you and some useful resources can be found here, here and here.
@if (ViewBag.HttpStatusCodeOverrideSelectedValue!=null)
        this.Response.StatusCode = Convert.ToInt32(ViewBag.HttpStatusCodeOverrideSelectedValue);
        this.Response.TrySkipIisCustomErrors = true; // disable IIS custom errors


Popular posts from this blog

How to fix Umbraco v9 "Boot Failed : Umbraco failed to boot, if you are the owner of the website please see the log file for more details." error

If you have started working with Umbraco v9 and done your first Azure deployment to one of your testing environments, there is a possibility that you might see the following "Boot Failed" error. Error: Checking the logs In order to understand the problem, you should check the Umbarco log file.  The default location for this file is umbraco/Logs and this file contains the Machine name, along with the date information. You can reach this file via Azure's Kudu Service  or alternatively, you can get download your Azure App Service's publish profile and connect your App Service via an FTP application, i.e. FileZilla. See the FileZilla screen below; Once you get your log file, you can download it to your local machine and open it with a text editor, i.e. Notepad++. When you open it, you will see all logs, including the error message. Please be aware, as most things with Umbraco, logging is also customizable, so you can either use the default Umbraco logging which is Micros

How to use JQuery Ajax Methods for Async ASP.NET MVC Action Methods

Making repeatedly calls to async methods can be a nightmare. In this case, it makes sense to use 2 ajax methods, instead of one. Here is a simple solution to overcome this problem. See that  ajaxcalls   is emptied after the success response for the first ajax call and then the second ajax method is used to make one single call to the async action method. Hope it helps. View: @section Scripts{     < script type ="text/javascript">         var smartDebitObject = new Object();         smartDebitObject.MembershipNumber = $( "#MembershipNumber" ).val();         smartDebitObject.ProfileId = $( "#ProfileId" ).val();         smartDebitObject.FirstName = $( "#FirstName" ).val();         smartDebitObject.LastName = $( "#LastName" ).val();         smartDebitObject.AddressLine1 = $( "#AddressLine1" ).val();         smartDebitObject.Postcode = $( "#Postcode" ).val();         smartDebitObject

Umbraco lifehack: How to setup anchor/jump links in Umbraco without making code changes

Today one of my clients created a ticket asking whether it is possible to set up anchor/jump links for an Umbraco content page so that they could link different sections of the page together. This is a common scenario for most Content editors and it should be super easy with any CMS platform, right? Houston, we got a problem! Now an anchor or page jump link is a special URL that takes you to a specific place on a page and it normally requires a unique HTML element ID to link different parts of a page.  When I investigated my issue, I realised that the page sections of the Umbraco page didn't have unique IDs.  View Source Code comes to the rescue In order to resolve the issue without any code changes, I decided to update the content using the built-in View Source Code feature of Umbraco CMS. This feature is available on built-in property editors, like Rich Text Editor and is super handy for checking the code that Umbraco generates for your Front-end website and making minor adju