{"id":4250161,"date":"2017-05-06T13:05:06","date_gmt":"2017-05-06T13:05:06","guid":{"rendered":"https:\/\/www.deptagency.com\/insight\/how-to-quickly-easily-create-404-500-pages-for-sitecore\/"},"modified":"2017-05-06T13:05:06","modified_gmt":"2017-05-06T13:05:06","slug":"how-to-quickly-easily-create-404-500-pages-for-sitecore","status":"publish","type":"article","link":"https:\/\/www.deptagency.com\/en-nl\/insight\/how-to-quickly-easily-create-404-500-pages-for-sitecore\/","title":{"rendered":"How to quickly & easily create 404 & 500 pages for Sitecore"},"content":{"rendered":"
\n\t\n\t<\/svg>\n\t\t\t\n\t\t\tBack to all articles\t\t<\/span>\n\t\n<\/button>\n\t\tHow to quickly & easily create 404 & 500 pages for Sitecore\t<\/h1>\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t<\/picture>\n\t\n\t<\/div>
\n\t\t\t\n\t\n\t
\n\t\tJames Simm\t\t
\n\t\tHead of Engineering\n\t\t\t<\/div>\n<\/div>\n\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tDate\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t6 May 2017\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n<\/div>\n\n
\n\t
\n\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\n\t\tIn 8.2, Sitecore has fixed the almost legendary\u00a0404 showing as a 302 bug<\/a>\u00a0that us Sitecore developers are very familiar with having to fix. However, while we\u2019re now correctly reporting the right error codes, what we don\u2019t have is a custom branded 404 or 500 page.\t<\/h2>\n\n\n\t\tWhile there are a lot of solutions to this problem online, most of them involve a lot of work and provide features that you may not need, depending on your implementation (such as a content editable 404 page, or multilingual 500 pages).\t<\/p>\n\n\n\t\tNow that the errors no longer show as 302 when thrown through Sitecore, we can quite easily put together custom error pages with only a few small changes to configuration files and adding the pages themselves.\t<\/p>\n\n\n\t\tThe code\t<\/h2>\n\n\n\t\tSo to begin, let\u2019s change some settings so that our 404 and 500 will be picked up by Sitecore and our webapp. Add these through a transform to your Sitecore settings:\t<\/p>\n\n\n\t\tThen you\u2019ll also need these settings to be modified in your web config file:\t<\/p>\n\n\n\t\t<customErrors mode=\u201dRemoteOnly\u201d defaultRedirect=\u201d~\/500.htm\u201d redirectMode=\u201dResponseRewrite\u201d \/>\t<\/p>\n\n\n\t\tThen, we\u2019ll, of course, need to add the two files that we\u2019re pointing at in those settings. First off, let\u2019s add a\t<\/p>\n\n\n\t\tfile to our solution \u2013 \u00a0it just needs to be a plain html file. Ideally, you want to\u00a0embed your images<\/a>\u00a0so that you\u2019re only making one call to the server.\t<\/p>\n\n\n\t\tThe 404 page needs to be a little more complex, since we\u2019ll be using the inbuilt Sitecore functionality:\t<\/p>\n\n\n\t\t<!DOCTYPE html>
<html lang=\u201den\u201d>
<head>
<meta charset=\u201dutf-8\u2033 \/>
<meta http-equiv=\u201dX-UA-Compatible\u201d content=\u201dIE=edge,chrome=1\u2033 \/>
<meta name=\u201dviewport\u201d content=\u201dwidth=device-width, initial-scale=1, maximum-scale=1\u2033 \/>
<meta name=\u201drobots\u201d content=\u201dnoindex, nofollow\u201d \/>
<title>Error<\/title>
<\/head>\t<\/p>\n\n\n\t\t<body>
<main class=\u201dmain\u201d id=\u201dmain\u201d role=\u201dmain\u201d>
<section>
<div class=\u201derror-message\u201d>
<h1>There seems to be a problem<\/h1>
<p>
<strong>Error 404.<\/strong>
Sorry, we couldn\u2019t find what you were looking for. Go back to the <a href=\u201d\/\u201d>homepage<\/a>.
<\/p>
<\/div>
<\/section>
<\/main>\t<\/p>\n\n\n\t\t<div class=\u201dsc-task\u201d style=\u201ddisplay: none\u201d>
<section class=\u201dsc-applicationContent\u201d>
<div class=\u201dcol-md-12 sc-applicationContent-main\u201d>
<ul>
<li id=\u201dPageEditor\u201d runat=\u201dserver\u201d>
<\/li>
<\/ul>
<\/div>
<\/section>
<\/div>
<div style=\u201ddisplay: none\u201d>
<asp:placeholder id=\u201dRequestedUrl\u201d runat=\u201dserver\u201d \/>
<asp:placeholder id=\u201dUserName\u201d runat=\u201dserver\u201d \/>
<asp:placeholder id=\u201dSiteName\u201d runat=\u201dserver\u201d \/>
<\/div>
<\/body>
<\/html>\t<\/p>\n\n\n\t\tWith both of those added and configured, we\u2019ve set up our own 404 and 500 pages, and pretty quickly, too!\t<\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t