RSS

Creating a custom Error page in SharePoint 2010……..and, yeah I know, along with Correlation ID.

08 Dec

Let’s talk about creating a custom error page in SharePoint 2010. I bet anyone who’s using SharePoint should have seen the below screen by now.

Error

As the error says, this page shows up when some unexpected/unhandled error occurs in the page.

Ok, now showing this screen to a user on a SharePoint site that is completely customized(Different look and feel) to the user’s needs is……..probably not good a idea. Instead, it’d be better if we show an Error page that matches the branding of the site. So, let’s replace SharePoint’s Out-of-the-box Error page with our Custom Error page.

An Error page can be overridden only at Web Application level. Add a new feature to your SharePoint project in Visual Studio and make sure that the feature is scoped at Web Application level. Now, add a Feature Receiver and write the following code:


public override void FeatureActivated(SPFeatureReceiverProperties properties)
{
    string CustomErrorPage = "/_layouts/CustomError.aspx";
    SPWebApplication webApp = (SPWebApplication)properties.Feature.Parent;
    if (!webApp.UpdateMappedPage(SPWebApplication.SPCustomPage.Error, CustomErrorPage))
    {
        throw new System.ApplicationException("Cannot replace the current error page.");
    }

    webApp.Update(true);
}

To override some Out-of-the-box pages like Error.aspx, AccessDenied.aspx, etc., we have to call UpdateMappedPage() method on SPWebApplication object. This method returns true if the Error page is replaced successfully. UpdateMappedPage() method takes SPCustomPage enum which specifies the Application Page to replace.

SPCustomPage enum is defined as


// Summary:
// Specifies the type of application page to replace.
public enum SPCustomPage
{
    // Summary:
    // Specifies that no page will be replaced with a custom page.
    None = 0,
    //
    // Summary:
    // Specifies that the AccessDenied.aspx page will be replaced with a custom
    // page.
    AccessDenied = 1,
    //
    // Summary:
    // Specifies that the Confirmation.aspx page will be replaced with a custom
    // page.
    Confirmation = 2,
    //
    // Summary:
    // Specifies that the Error.aspx page will be replaced with a custom page.
    Error = 3,
    //
    // Summary:
    // Specifies that the Login.aspx page will be replaced with a custom page.
    Login = 4,
    //
    // Summary:
    // Specifies that the ReqAcc.aspx page will be replaced with a custom page.
    RequestAccess = 5,
    //
    // Summary:
    // Specifies that the Signout.aspx page will be replaced with a custom page.
    Signout = 6,
    //
    // Summary:
    // Specifies that the WebDeleted.aspx page will be replaced with a custom page.
    WebDeleted = 7,
}

Reference: http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.administration.spwebapplication.spcustompage.aspx

Now, when the above feature is activated, your Custom Error page will replace SharePoint’s Out-of-the-box Error page. And to revert the Error page back to Out-of-the-box Error page, add the following code in FeatureReceiver’s FeatureDeactivating event as follows:


public override void FeatureDeactivating(SPFeatureReceiverProperties properties)
{
    if (!webApp.UpdateMappedPage(SPWebApplication.SPCustomPage.Error, null))
    {
        throw new System.ApplicationException("Cannot replace the current error page.");
    }

    webApp.Update(true);
}

So far, we’ve seen how to set up the Custom Error page. Now let’s design our Custom Error page. We can simply create a normal aspx page and put some user friendly message in it. But, the main thing to note is the Correlation ID. Correlation ID is helpful in resolving the problem, as we can use this Correlation ID to get what the exact error is from the Log files(Usually in 14-hive/Logs folder). Our aim is to show Correlation ID in our Custom Error page. Instead of starting form the scratch, we can modify the existing SharePoint’s error page to suite our needs.

Add SharePoint’s error page(this file can be found in 14-hive/TEMPLATE/Layouts directory and file name is error.aspx) to the Layouts folder in your Visual Studio project. Rename the error.aspx to CustomError.aspx (or which ever name you specified in the FeatureActivated event of your WebApplication scoped feature, and make sure CustomError.aspx page goes to 14-hive/TEMPLATE/Layouts directory), and we don’t need a code-behind file for our CustomError.aspx page(as we can use the code-behind file of SharePoint’s error page). Now open up the CustomError.aspx and find the Label tag with ID “RequestGuidText”. This is the Label which will be set by SharePoint as the current Correlation ID. And also, the Label tag with ID “DateTimeText” will be set as the Date and Time the error occured. All you have to do is  add your custom html to this page, rearrange these Label tags into corresponding div/p tags based on your html and hide unwanted server tags in the page.

My customized error page looks like:

Error1

And my CustomError.aspx’s html is as follows(please don’t mind about the design of the page, I just made it up for the sake of this post…. 🙂 )


<%@ Assembly Name="Microsoft.SharePoint.ApplicationPages, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%> <%@ Page Language="C#" Inherits="Microsoft.SharePoint.ApplicationPages.ErrorPage" MasterPageFile="~/_layouts/simple.master" %> <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ID="Content1" ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
<SharePoint:EncodedLiteral ID="EncodedLiteral1" runat="server" text="<%$Resources:wss,error_pagetitle%>" EncodeMethod='HtmlEncode'/>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
<span id="errorPageTitleSpan" tabindex="0"><SharePoint:EncodedLiteral ID="EncodedLiteral2" runat="server" text="<%$Resources:wss,error_pagetitle%>" EncodeMethod='HtmlEncode'/></span>
</asp:Content>

<asp:Content ID="Content3" contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">
  <meta name="Robots" content="NOINDEX " />
  <meta name="SharePointError" content="0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="Copyright" content="Copyright KPMG 2012. All Rights Reserved.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderId="PlaceHolderMain" runat="server">

<style type="text/css">
body {font: 12px Helvetica, Arial, sans-serif;}
body {color: #222;}
.wrapper { margin: 0 auto; width: 1044px; }
.wrapper1 {
    padding-left: 30px;
    height: 680px;
    position: absolute;
    left: 414.5px;
    top: -58px;
}
.div_bg {
    position: absolute;
    left: -20px;
    bottom: 140px;
    width: 700px;
    height: 400px;
    opacity: 0.8;
    filter:alpha(opacity=80);
    background: none repeat scroll 0 0 #4DB849;
    border: 6px ridge blue;
}
.content {
    bottom: 140px;
    height: 374px;
    top: 130px;
    left: -20px;
    position: absolute;
    width: 700px;
}
.innerDiv {
    color:blue;
    font-size: 1.6em;
    line-height: 1.5em;
    padding: 10px 40px 40px;
    margin-left: 10px;
    border: 4px outset #FCD209;
}
.ulAlign {
    list-style: none;
    font-size: .9em;
    margin-left: -22px;
    padding-top: 10px;
}

 /*To hide unwanted stuff from Out-of-the-box error page*/
 body #s4-simple-card { margin: 0px; width: 0px; border-style: none; }
 #s4-simple-card-top { display: none; }
 body #s4-simple-content { margin-left: 0px; }
 .s4-simple-iconcont { display: none; }
 #errorPageTitleSpan { display: none; }
 #s4-simple-gobackcont { display: none; }

</style>

<script type="text/javascript">
 /* Add any javascript code as needed. */
</script>

<div class="wrapper">
  <div class="wrapper1">
    <div class="div_bg"></div>
    <div class="content">
      <h1 style="font-size: 4.5em; color: white; padding: 10px 0 10px 40px; margin-left: 10px; border: 2px solid yellow; outline: 0 none; vertical-align: baseline;">Error!!</h1>
      <div class="innerDiv" style="">An unexpected error has occurred. Please report this problem to your <a style="color:blue; text-decoration: underline !important" href='mailto: admin@test.com'>Administrator</a><br>
        <ul class='ulAlign'>
          <li> <b>-</b> <span style="color:white"><asp:Label ID="RequestGuidText" Runat="server" /></span></li>
          <li> <b>-</b> <span style="color:white"><asp:Label ID="DateTimeText" Runat="server" /></span></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!--I marked the below content as Visible=false in my aspx page, as don't need it-->
<SharePoint:UIVersionedContent ID="UIVersionedContent1" UIVersion="3" runat="server">
 <ContentTemplate>
 <table width="100%" border="0" class="ms-titleareaframe" cellpadding="0">
 <tr>
 <td valign="top" width="100%" style="padding-top: 10px" class="ms-descriptiontext">
 </ContentTemplate>
</SharePoint:UIVersionedContent>
 <SharePoint:FormattedString id="LabelMessage" EncodeMethod="HtmlEncodeAllowSimpleTextFormatting" runat="server" Visible="false">
 <asp:HyperLink id="LinkContainedInMessage" runat="server"/>
 </SharePoint:FormattedString>
 <p style="display:none">
 <span class="ms-descriptiontext">
 <asp:HyperLink id="AdditionalHelpLink" Visible="false" runat="server"/>
 </span>
 </p>
 <p style="display:none">
 <span class="ms-descriptiontext"></span>
 </p>
<SharePoint:UIVersionedContent ID="UIVersionedContent2" UIVersion="3" runat="server">
 <ContentTemplate>
 </td>
 </tr>
 </table>
 </ContentTemplate>
</SharePoint:UIVersionedContent>
<script type="text/javascript" language="JavaScript">
 // <![CDATA[
 function ULSvam() { var o = new Object; o.ULSTeamName = "Microsoft SharePoint Foundation"; o.ULSFileName = "error.aspx"; return o; }
 var gearPage = document.getElementById('GearPage');
 if (null != gearPage) {
 gearPage.parentNode.removeChild(gearPage);
 document.title = "<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,error_pagetitle%>' EncodeMethod='HtmlEncode'/>";
 }
 function _spBodyOnLoad() {
 ULSvam:;
 var intialFocus = document.getElementById("errorPageTitleSpan");
 try {
 intialFocus.focus();
 }
 catch (ex) {
 }
 }
 // ]]>
</script>

</asp:Content>

That’s it guys, we have our custom error page. You can also use Javascript in this page. Just put your code in the script tags(and you can add more script tags like one for jquery library, etc., as needed).

Hope this helps some one.

Advertisements
 
4 Comments

Posted by on December 8, 2012 in .NET, SharePoint

 

Tags: , , , , , ,

4 responses to “Creating a custom Error page in SharePoint 2010……..and, yeah I know, along with Correlation ID.

  1. Avinash Reddy

    March 25, 2013 at 4:11 pm

    Hi Praneeth,

    This custom error page applies for the entire farm. What if i want the custom error page for a only a specific site collection ? And not for others..How do i do it ?

    Thanks in advance

    Avinash

     
    • Praneeth Moka

      March 25, 2013 at 11:27 pm

      Hey Avinash,

      This custom error page is for a specific web application, not for entire farm. And coming to your question, I don’t see a direct way of creating a custom error page at site collection level. You can try it through a custom HttpModule.

      Praneeth

       
  2. archana

    September 22, 2015 at 4:48 am

    Hi Praneeth,

    i placed all code as you mentioned, but i am unable to get correlation ID and DateTime.
    Could you please help me out

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: