404 Error Sample

By default, a standard (vanilla) installation of Umbraco does not automatically provide a 404 error page.

Having a correctly wired up 404 error page is important for your website, because it will catch page requests that are caused by bad links and typos. Normally, when a web server is asked to display a non-existent page, it produces an unfriendly error message similar to the image above.

Catching 404’s

Normally the webserver catches all page not found errors before the website even knows about the missing page request. Follow the steps below to wire up your Umbraco 404 page.

PART 1

This is the hardest part of getting your 404 page to work because it requires a change to you IIS web.config file.

Steps:

1. Open your web.config file in a text editor (either via FTP or a remote server session)
2. Find the system.webServer section in the file
3. Navigate to a line just above the closing tag of the system.webServer section
4. Add this line – <httpErrors existingResponse="PassThrough" />
5. Save the file
6. Now test your website by loading any page to make sure that you have not caused any errors when adding the line above.

If your web pages work normally, move on to the next part.

PART 2

1. Login to your Umbraco back-end and find a content node called ‘Page Not Found’ or ‘404’. (If you don’t have a page like this, create a new one)
2. Then click on the page node – as if you were about to edit it.
3. Check the page URL in the browser address bar and you will see something like this:
   /umbraco/#/content/content/edit/1350
4. The number on the end of the URL is the Page ID. Make a note of this, you will need it for the last part.

PART 3

Now you need to go back to your FTP or remote session and find the general Umbraco config file.
In the root folder of your website you will find a sub-folder called ‘config’.

Steps:

1. Open the config folder
2. Find a file called umbracoSettings.config and open it in your text editor
3. Find the section node labelled <errors>
4. It will have a sub section that looks like this:
   <error404>1</error404>
5. Now all you have to do now is to change the value ‘1’ for the Page ID you just found in Part 2
6. Save the file
7. Restart your website

Test by browsing to a non-existent URL and if all is working you will be presented with your new shiny 404 page!

Update June 2018: Spruce up your 404 page

Take a look at this quick read about how to improve your Umbraco 404 page