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:
<setting name=”ItemNotFoundUrl” value=”/404.aspx” />
<setting name=”LayoutNotFoundUrl” value=”/404.aspx” />
Then you’ll also need these settings to be modified in your web config file:
<httpErrors errorMode=”Custom” existingResponse=”Auto”>
<remove statusCode=”500″ subStatusCode=”-1″ />
<error statusCode=”500″ path=”/500.htm” responseMode=”File”/>
</httpErrors>
<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
500.htm
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:
<%@ outputcache location=”None” varybyparam=”none” %>
<%@ page language=”c#” enableviewstate=”false” autoeventwireup=”True” inherits=”SitecoreClient.Page.NotFound” %>
<!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
Jonathan Whiteside
Personalize your experience
We use functional cookies to make the website work properly, analytical cookies to measure your behavior and marketing cookies for ads- and content personalization. We collect data on how you use our website to make our website easier to use, but also to tailor or personalize communication in advertisements, on our website or apps. Data collected through marketing cookies is also shared with third parties. By clicking accept you agree to this. More information? Read our cookie policy.