Cómo crear una página 404 personalizada en CodeIgniter (Guía CI3 y CI4)

La página de error 404 Not Found es un componente crucial en cualquier aplicación web desarrollada con el framework CodeIgniter. Cuando un visitante intenta acceder a una URL inexistente o a un enlace roto, debe recibir una página 404 personalizada, útil y bien diseñada en lugar de una pantalla de error genérica del servidor o una página en blanco.

En esta guía detallada y completa, aprenderás cómo crear y configurar una página 404 personalizada en CodeIgniter para las dos versiones principales del framework: CodeIgniter 3 (CI3) y CodeIgniter 4 (CI4). Cubriremos configuraciones de rutas, controladores personalizados, manejo de peticiones AJAX y respuestas JSON para APIs REST, encabezados HTTP correctos y mejores prácticas para proteger tu SEO y la experiencia de usuario.

¿Por qué es importante personalizar la página 404 en CodeIgniter?

Personalizar la página de error 404 aporta ventajas técnicas, visuales y de posicionamiento indispensables para sitios web y aplicaciones profesionales:

• Mejora de la experiencia de usuario (UX): Una página personalizada incluye barra de búsqueda, enlaces principales y un botón para volver al inicio, evitando que el usuario abandone el sitio de inmediato.
• Protección del posicionamiento SEO: Asegurar el envío del código HTTP 404 Not Found evita que motores de búsqueda como Google indexen páginas inexistentes como contenido duplicado (Soft 404).
• Consistencia de marca: Mantener el encabezado, pie de página, paleta de colores y tipografía asegura una experiencia visual coherente en toda la plataforma.
• Seguimiento de errores y enlaces rotos: Puedes agregar un sistema de registro (logging) dentro de tu controlador 404 para detectar y reparar enlaces rotos automáticamente.

Paso 1: Personalizar la página 404 en CodeIgniter 3

En CodeIgniter 3, existen dos métodos para personalizar la respuesta 404: modificar la plantilla de vista por defecto o configurar un controlador de sustitución mediante 404_override.

Método 1: Modificar la plantilla de vista por defecto en CI3

CodeIgniter 3 incluye una vista de error 404 predeterminada ubicada en:

application/views/errors/html/error_404.php

Puedes editar este archivo HTML y CSS directamente. Aunque es rápido, este método no permite cargar modelos, librerías o helpers de CodeIgniter de forma dinámica.

Método 2: Usar 404_override con un controlador personalizado en CI3 (Recomendado)

Para utilizar todas las funciones y controladores de CodeIgniter dentro de tu página 404, utiliza la directiva 404_override:

• Configurar rutas (routes.php): Abre application/config/routes.php y establece:
  $route['404_override'] = 'mycustom404';
• Crear el controlador (Mycustom404.php): Crea el archivo application/controllers/Mycustom404.php:
  <?php
class Mycustom404 extends CI_Controller {
    public function __construct() {
        parent::__construct();
    }
    public function index() {
        $this->output->set_status_header('404');
        $data['title'] = 'Página no encontrada - 404';
        log_message('error', '404 Page Not Found: ' . current_url());
        $this->load->view('custom_404_view', $data);
    }
}
• Crear la vista (custom_404_view.php): Crea application/views/custom_404_view.php con tu diseño personalizado.

Paso 2: Personalizar la página 404 en CodeIgniter 4

En CodeIgniter 4, la arquitectura fue renovada para ofrecer un manejo moderno de excepciones y objetos de respuesta.

Método 1: Modificar la vista de error en CI4

En modo producción, CI4 carga la plantilla de error ubicada en:

app/Views/errors/html/error_404.php

Modifica este archivo para adaptar el diseño cuando se lanza una excepción PageNotFoundException en producción.

Método 2: Configurar 404 Override Controller en CI4

Para usar un controlador dedicado en CodeIgniter 4, edita app/Config/Routes.php:

• Establecer el controlador Override: En app/Config/Routes.php, añade:
  $routes->set404Override('App\Controllers\NotFound::index');
• Crear el controlador NotFound: Crea app/Controllers/NotFound.php:
  <?php
namespace App\Controllers;
use CodeIgniter\Exceptions\PageNotFoundException;
class NotFound extends BaseController {
    public function index() {
        response()->setStatusCode(404);
        log_message('warning', 'CI4 404: ' . current_url());
        return view('errors/custom_404');
    }
}

Manejo de peticiones AJAX y respuestas JSON 404 para API REST

Cuando desarrollas aplicaciones modernas que consumen servicios API REST o realizan llamadas AJAX con CodeIgniter, responder con una página HTML completa cuando falla una ruta rompe la integración en el cliente. Es fundamental devolver JSON estructurado con estado 404.

Respuesta JSON 404 en CodeIgniter 3

En tu controlador Mycustom404.php, detecta si la solicitud es de tipo AJAX o proviene de una ruta de API:

if ($this->input->is_ajax_request() || strpos($this->uri->uri_string(), 'api/') === 0) {
    $this->output
        ->set_status_header(404)
        ->set_content_type('application/json', 'utf-8')
        ->set_output(json_encode([
            'status' => false,
            'error' => 404,
            'message' => 'Ruta de API no encontrada'
        ]));
    return;
}

Respuesta JSON 404 en CodeIgniter 4

En CodeIgniter 4, aprovecha el servicio de petición en NotFound.php:

$request = service('request');
if ($request->isAJAX() || $request->header('Accept')?->getValue() === 'application/json') {
    return response()->setStatusCode(404)->setJSON([
        'success' => false,
        'code' => 404,
        'message' => 'Recurso no encontrado'
    ]);
}

Asegurar el código de estado HTTP 404 para SEO

Un error común es devolver una página 404 con un código de respuesta HTTP 200 OK. Esto indica a los buscadores que la página existe, generando advertencias de Soft 404 y problemas de indexación.

Asegúrate siempre de emitir explícitamente el código 404:

• En CodeIgniter 3: Usa $this->output->set_status_header('404');
• En CodeIgniter 4: Usa response()->setStatusCode(404); o lanza throw \CodeIgniter\Exceptions\PageNotFoundException::forPageNotFound();

Reescritura de URLs en el servidor (Nginx & Apache)

Para asegurar que todas las solicitudes de URLs inexistentes se procesen a través de CodeIgniter, verifica tus reglas de reescritura:

• Reglas .htaccess para Apache: Incluye un archivo .htaccess en la raíz:
  RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
• Configuración del bloque Nginx: Reenvía las solicitudes a index.php:
  location / {
    try_files $uri $uri/ /index.php?$query_string;
}

Registro de enlaces rotos y redirecciones automáticas

Al contar con un controlador 404 personalizado, puedes guardar en logs o base de datos las URLs no encontradas. Revisar estos registros te permitirá descubrir enlaces externos obsoletos y aplicar redirecciones 301 Permanent Redirect para no perder tráfico valioso.

Impacto del alojamiento web en el manejo de errores 404

Durante picos de tráfico o escaneos automáticos, las solicitudes de páginas inexistentes generan carga en el servidor. Hospeda tus aplicaciones en los planes de alojamiento Cloud de VavaHost para garantizar un alto rendimiento y estabilidad.

Si deseas optimizar la velocidad y solucionar errores comunes, revisa nuestra guía para solucionar el error ERR_CACHE_MISS.

Consejos para diseñar una página 404 atractiva

Convierte un error 404 en una oportunidad de navegación positiva siguiendo estos consejos:

• Mensaje claro: Explica de forma amable que la página no existe o ha sido movida.
• Caja de búsqueda destacada: Facilita que los visitantes encuentren lo que buscan.
• Enlaces de navegación clave: Incluye accesos directos a inicio, servicios y soporte.
• Diseño visual adaptado: Utiliza ilustraciones acordes a tu identidad de marca.

Puntos clave

Configurar una página 404 personalizada en CodeIgniter es fundamental para mantener la salud SEO, retener a tus usuarios y ofrecer una experiencia web profesional en CodeIgniter 3 y 4.