Criando páginas de erro 404 personalizadas no ASP.NET MVC

É muito fácil de se criar páginas de erro personalizadas no MVC. Veja como fazer.

Todo mundo que trabalha fazendo sites sabe que ter páginas de erro é indispensável. Só que quando se trabalha com ASP.NET MVC é muito complicado se acertar na hora de configurar as páginas de erro. Sim, usar o web.config é o recomendado. Mas você tem certeza de que está funcionando?

Objetivo

O nosso objetivo aqui é aprender a fazer uma página personalizada de erro 404 e retornar o HTTP status code correspondente (404) sem alterar a url.

O que aprendemos sobre erros no começo

Normalmente, quando estamos iniciando no ASP.NET, aprendemos que temos que colocar a tag no web.config, configurar os parâmetros e esperar o erro aparecer. Veja o exemplo abaixo:

<customErrors mode="On">
	<error statusCode="404" path="erro404.html" />
customErrors>

Páginas 404 personalizadas

Normalmente quando uma página não existe o site retorna o erro 404, não importa se a página é estática (página html simples) ou dinâmica (página gerada pelo backend). No caso do exemplo acima o ASP.NET a gente está dizendo para o site para redirecionar para uma página amigável quando acontecer algum erro 404.

Até aí tudo bem.

O problema do MVC

No caso do MVC o buraco acaba sendo mais embaixo: Como o MVC é baseado em routes, controles e actions uma url como /lala/lele não vai passar pelo . O resultado vai ser aquele erro 404 padrão do ASP.NET.

A solução pra esse problema é simples, mas não é a mais correta. Basta colocar um redirect=”~/ erro404.html” no lugar do path, como no exemplo abaixo:

<customErrors mode="On">
	<error statusCode="404" redirect="~/erro404.html"/>
customErrors>

Agora, se você navegar pra uma url aleatória (lala/lele) você vai ser capaz de ver a sua página personalizada de erro. Só que, além da url se tornar /erro404.html?aspxerrorpath=/lala/lele você vai ver que o HTTP status code da página é 200.

E isso é muito longe do objetivo que traçamos no começo.

Não sou especialista em SEO mas deixa eu tentar explicar o problema: Se por um acaso a página que os indexadores acharem não existe, mas estamos retornando 200, eles vão achar que a página existe e vão indexar a página 404 personalizada como se ela fizesse parte da navegação do site.

A solução ideal

Como eu disse no começo, a ideia é retornar uma página de erro 404 personalizada junto com o HTTP status code correto, que é 404. E obviamente não podemos alterar a url. A maneira mais prática de se fazer isso é mexer direto no IIS. Claro que eu não vou tentar te convencer a ligar no seu host e pedir pra mudar alguma configuração. Para isso vamos usar o .

Simplificando: Enquanto o funciona no mesmo nível do ASP.NET, o funciona mais próximo ao IIS. O que significa que as alterações no vão afetar até mesmo arquivos estáticos. Logo, se quisermos fazer alguma alteração que seja mais próxima do servidor, é lá que devemos mexer.

Para fazer com que nossa página de erro 404 personalizada funcione no MVC devemos fazer como no exemplo a seguir:

<httpErrors errorMode="Custom">
	<remove statusCode="404"/>
	<error statusCode="404" path="/erro404.html" responseMode="File"/>
httpErrors>

Reparou que eu usei um antes? Isso evita erros caso já tenha algum statusCode=”404” definido. E, apesar de eu estar usando uma página html simples (o ideal), podemos usar uma rota específica para a página 404. Como por exemplo /erro/404. Só que nesse caso é recomendado usar o responseMode=”ExecuteUrl”.

Agora, se formos acessar uma url aleatória /lala/lele vamos ver que: