The Pokedex Project(4) — Validando nuestras vistas y agregando un controlador de errores.

Chris Lopez
4 min readSep 14, 2020

--

Validando que nuestra vista exista.

Al capturar el nombre de nuestra vista en el helper view(), corremos el riesgo que no se lo pasemos correctamente o que simplemente hayamos olvidado crear el archivo HTML de la vista, para esto tenemos que validar que realmente la vista que le pasemos a nuestro helper exista:

Editamos primero la clase Utils/View/View en el método render():

Copiar código:public function render(string $viewFile, array $opts = [])
{
try {
echo $this->view->render($viewFile, $opts);
} catch (LoaderError $e) {
echo $this->view->render('errors/404-not-found.html');
}
}

Agregamos el try y catch para validar la excepción de Twig que se llama LoadError, esta excepción se dispara cuando no encuentra el archivo del template. Después renderizamos la vista de error, en este caso la nombramos 404-not-found.html.

Creamos el template del error “404 Not Found”:

Copiar código:mkdir resources/views/errors && cd resources/views/errors && touch 404-not-found.html

Editamos el archivo 404-not-found.html:

Copiar código:{% extends "layouts/app.html" %}

{% block content %}
<h1>Not Found :(</h1>
{% endblock %}

Una vez modificado el método render() de View y codificado la vista de “404 Not Found”, simplemente probamos y en nuestra ruta le agregamos o cambiamos un carácter al nombre del template del helper view() y deberíamos tener algo así:

Generar un Handler para controlar los errores de la app.

Otra necesidad que se nos presenta en nuestro Pokedex, es que pasa si por ejemplo hay un error cualquiera, por lo regular estos errores se muestran con texto sin formato y pueden llegar a afectar a la vista, otras por seguridad no se deben mostrar estos errores sino que se puedan mandar,guardar y notificar en algún lado para consultar y arreglar este bug.

Para hacer esto tenemos que hacer un Handler global de errores, y atrapar el error y mostrarlo en nuestro caso en una pagina.

Para hacer esto tenemos que crear una clase e interface en Utils:

Copiar código:mkdir src/Utils/Exceptions && cd src/Utils/Exceptions && touch Exception.php && touch ExceptionHandler.php

Editamos el archivo Exception.php:

Copiar código:<?php


namespace Utils\Exceptions;


interface Exception
{
public function handle();
}

Editamos el archivo ExceptionHandler.php:

Copiar código:<?php


namespace Utils\Exceptions;


class ExceptionHandler implements Exception
{

public function handle()
{
set_exception_handler(function ($exception) {
$this->_initException($exception);
});
}

private function _initException($exception)
{
view('errors/500-internal-error.html', [
'exceptionMessage' => $exception->getMessage(),
'exceptionFile' => $exception->getFile(),
'exceptionLine' => $exception->getLine(),
]);
}
}

Agregamos nuestro handler a bootstrap.php:

Copiar código:<?php

(new \Utils\Exceptions\ExceptionHandler())->handle();

require __DIR__ . '/routes/web.php';

(new \Utils\App())($route);

Creamos el archivo 500-internal-error.html:

Copiar código:touch resources/views/errors/500-internal-error.html

Editamos el archivo 500-internal-error.html:

Copiar código:{% extends "layouts/app.html" %}

{% block content %}
<h1>Internal Error!!! :(</h1>
<blockquote>
<b>Message:</b> {{ exceptionMessage }} <br>
<b>File:</b> {{ exceptionFile }} <br>
<b>Line:</b> {{ exceptionLine }} <br>
</blockquote>
{% endblock %}

Para probar nada mas agregamos un tag de html arriba de “block content” de pokedex.html:

Copiar código:{% extends "layouts/app.html" %}
<br>
{% block content %}
<h1>Hello {{ pokemonName }}!</h1>
{% endblock %}

Y deberíamos de ver algo así:

Con este handler ya podemos controlar cualquier error que ocurra en nuestra app, aunque este “Error Handler” es muy sencillo podemos extenderle la funcionalidad para adaptarlo mejor a nuestras necesidades.

Pueden consultar el código de esta publicación en este repositorio: https://github.com/krsrk/pokedex-vanilla-php

La siguiente publicación esta lista y la puedes revisar, en ella agregaremos un archivo de configuración con el paquete “phpdotenv”:

https://link.medium.com/oPlou4Saqab

Si les gusto la publicación denle claps, likes y comentarios.

--

--

Chris Lopez
Chris Lopez

Written by Chris Lopez

Laravel, PHP, Python, Js, Vue Developer

No responses yet