Custom Error Pages in ASP.NET Core MVC Application Using StatusCodePages Middleware

While developing a web application, one of the best practice every developer should follow is to set up a custom error page for the site. Showing that dreaded yellow page to the user during the occurance of an exception is highly unprofessional and is prone to security risks. In one of the earlier post in the blog, I have explained the use of StatusCodePages middleware and various approaches for implementing it in a ASP.NET Core web application.

In this post, I am going to implement custom error handling in an ASP.NET Core MVC application using the StatusCodePages Middleware. I will use the UseStatusCodePagesWithReExecute method provided by the middleware for showing the error the page in the case of an error. So let's add the following line in the Configure method in the Startup.cs file as shown below

app.UseStatusCodePagesWithReExecute("/Error");

This method is telling the web server to execute the action method name Index in the ErrorController. Since we are using the ReExecute method the redirection will happen in the server itself thereby avoiding a round trip between the server and the client.

Now, we need to create the controller and the action method in it. Create a file in the Controller folder, save it as ErrorController.cs and add the following lines in it

We have now created the action method named Index in our controller which is just returning a view back to the stream. Next step is to create the view needed for showing our error, for that create a folder named Error in the Views folder and add a cshtml file named Index inside it with the following content.

<div>
    <h1>An unexpected error has happened, please contact system administrator</h1>
    <p>[email protected]</p>
</div>

Let's execute the application using the dotnet run command which will compile the application and then self hosts it in port#5000 by default.

If you try to access a page that's not existing in the application, the application will return the custom error page as shown below. If look closely in the Developer tools window in the browser you will notice that the status code which is being returned is 404. If you recollect the same scenario for ASP.NET Core application the status code returned was 304 which was bit confusing. So in the MVC request pipeline, they are now using 404 inline with the error that has occured just now.

We can do much more with the middleware apart from showing a constant message in the page. Let's make it more informative by including the status code in the page. For that I am going to tweak the UseStatusCodePagesWithReExecute method call a little bit and add a new action method in the ErrorController.

[Route("/Error/{ErrorCode}")]
public IActionResult Error(int ErrorCode)
{
   return View(ErrorCode);
}

app.UseStatusCodePagesWithReExecute("/Error/{0}");

I am going to use Attribute Routing for this action method which instructs that this method needs to executed if the request is like /Error/404 or /Error/403. This method is returning a view and is passing the status code as the model into it. Let's create the view named Error.cshtml in the Error folder with the following content.

<div>
    <h1>Server says : @Model</h1>
</div>

Let's recompile and execute it again using the dotnet run command. If you execute the same url which we tried earlier, the error message shown will be different. It will execute the Error method instead of Index and the output will as shown below which includes the status code too.