How to quickly & easily create 404 & 500 pages for Sitecore
In 8.2, Sitecore has fixed the almost legendary 404 showing as a 302 bug that us Sitecore developers are very familiar with having to fix. However, while we’re now correctly reporting the right error codes, what we don’t have is a custom branded 404 or 500 page.
While 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).
Now 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.
The code
So to begin, let’s 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:
Then you’ll also need these settings to be modified in your web config file:
<customErrors mode=”RemoteOnly” defaultRedirect=”~/500.htm” redirectMode=”ResponseRewrite” />
Then, we’ll, of course, need to add the two files that we’re pointing at in those settings. First off, let’s add a
file to our solution – it just needs to be a plain html file. Ideally, you want to embed your images so that you’re only making one call to the server.
The 404 page needs to be a little more complex, since we’ll be using the inbuilt Sitecore functionality:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ />
<meta name=”robots” content=”noindex, nofollow” />
<title>Error</title>
</head>
<body>
<main class=”main” id=”main” role=”main”>
<section>
<div class=”error-message”>
<h1>There seems to be a problem</h1>
<p>
<strong>Error 404.</strong>
Sorry, we couldn’t find what you were looking for. Go back to the <a href=”/”>homepage</a>.
</p>
</div>
</section>
</main>
<div class=”sc-task” style=”display: none”>
<section class=”sc-applicationContent”>
<div class=”col-md-12 sc-applicationContent-main”>
<ul>
<li id=”PageEditor” runat=”server”>
</li>
</ul>
</div>
</section>
</div>
<div style=”display: none”>
<asp:placeholder id=”RequestedUrl” runat=”server” />
<asp:placeholder id=”UserName” runat=”server” />
<asp:placeholder id=”SiteName” runat=”server” />
</div>
</body>
</html>
With both of those added and configured, we’ve set up our own 404 and 500 pages, and pretty quickly, too!
More Insights?
View all Insights
Questions?
Global SVP Technology & Engineering