DEV Community: Iosvany Alvarez

Nodejs Error Middleware

Iosvany Alvarez — Tue, 24 Sep 2024 09:52:08 +0000

Handling errors in a Rest API with Nodejs and Express application is crucial for maintaining a smooth and seamless user experience. Integrating TypeScript adds strong typing to the mix, making error handling even more efficient and reliable. Let me shared my experiencie and by using good practice code principales we can have a custom error handling mechanism in Node.js using TypeScript. This approach not only improves code maintainability but also provides clear and descriptive error messages for debugging.

First but not least, why we have or for me must implement this approach. Let me shared some thoughts find in the research.

Error handling in any application is essential for identifying bugs and improving stability. Node.js, a popular backend framework, can become complex when handling errors across multiple layers. By leveraging TypeScript's strong typing, we can manage errors more efficiently and prevent potential bugs early in the development process. Custom error handling offers the following advantages:

Enhanced readability: Custom error classes provide more descriptive error messages.
Easier debugging: A structured error handling system simplifies tracking and fixing issues.
Unified error structure: Ensures that errors have a consistent format throughout your application.

Let's go to some example to make this clear.

The fundamental purpose of this class is to inherit from the Error interface and to be able to customize our errors. Having a SRP (Single Responsibility Principle) principle.

Now you can extend this class and create for example a error custom class for NotFoundError

Create a middleware to define you custom capture error handling, of course return a better format you response.

and register middleware in root api server class. In my case i capture for all request not found error

Implementing custom error handling in Node.js with TypeScript enhances the robustness and maintainability of your application. By using custom error classes and middleware, you ensure consistent and clear error messages, making debugging and monitoring more efficient.

Cómo el análisis de código estático puede salvarte el día como programador: Un Análisis

Iosvany Alvarez — Wed, 06 Mar 2024 18:49:03 +0000

Introducción: Como programadores e ingeniero de software, sabemos que escribir código de alta calidad es crucial para el éxito de cualquier proyecto de software. Sin embargo, llevar un registro de cada línea de código y garantizar su corrección puede ser una tarea desalentadora. ¡Aquí es donde entran en juego los analizadores de código estático! En este tutorial, exploraremos la importancia de utilizar analizadores de código estático y cómo pueden beneficiarnos como tales.

¿Pero que son los analizadores de código? Los analizadores de código estático son herramientas poderosas que examinan nuestro código sin ejecutarlo realmente. Escanean nuestra base de código, buscando posibles errores, vulnerabilidades y otros problemas de calidad de código. Piensa en ellos como los detectives personales de tu código, buscando incansablemente cualquier problema oculto que pueda causar dolores de cabeza más adelante.
Detectando errores tempranamente: Uno de los principales beneficios de utilizar analizadores estáticos de código es su capacidad para detectar errores tempranamente en el proceso de desarrollo. Al analizar el código estáticamente, estas herramientas pueden identificar errores comunes de programación, como excepciones de puntero nulo, fugas de memoria o asignaciones incorrectas de variables. Al detectar estos problemas desde el principio, podemos ahorrarnos el dolor de cabeza de depurar problemas complejos más adelante.

Imagínate que estás construyendo un puente. Es mucho mejor identificar cualquier debilidad estructural durante la fase de planificación en lugar de cuando el puente ya está construido y las personas lo están cruzando. De manera similar, los analizadores de código estático nos ayudan a identificar posibles problemas antes de que se conviertan en problemas importantes.

Garantizando la calidad del código: Es fundamental escribir un código limpio y fácil de mantener en cualquier proyecto de software. Los analizadores de código estático nos brindan información valiosa sobre la calidad de nuestro código. Pueden detectar problemas comunes en el código, como código duplicado, complejidad excesiva o convenciones de nomenclatura deficientes.

Al identificar estos problemas, podemos mejorar la calidad general de nuestra base de código. Esto no solo facilita que otros programadores comprendan y mantengan nuestro código, sino que también reduce las posibilidades de introducir nuevos errores o cometer errores costosos.

Cumplimiento y Seguridad: En el mundo actual, la seguridad es una prioridad absoluta. Los analizadores de código estático pueden ayudarnos a identificar posibles vulnerabilidades de seguridad en nuestro código. Pueden detectar problemas de seguridad comunes, como la inyección SQL, scripting entre sitios o desbordamientos de búfer.

Además, el uso de analizadores de código estático también puede ayudarnos a asegurar el cumplimiento de los estándares de codificación y las mejores prácticas. Estos pueden hacer cumplir las pautas de codificación, como el estilo de sangría, las convenciones de nomenclatura de variables o el uso adecuado de bibliotecas. Esto no solo mejora la legibilidad de nuestro código, sino que también facilita la colaboración con otros compañeros del equipo.

Conclusión: En conclusión, los analizadores de código estático son herramientas invaluables para todos. Nos ayudan a detectar errores temprano, garantizar la calidad del código y mejorar la seguridad. Al incorporar el análisis de código estático en nuestro flujo de trabajo de desarrollo, podemos ahorrar tiempo, reducir los costos de mantenimiento y entregar software de mayor calidad. Igualmente es importante añadir que tener una estrategia y planificación del desarrollo, tales como patrones de diseños, buenas practicas y una colaboración en equipo puede hacer que este proceso de análisis del código de un proyecto sea mas viable y mantenible.

¡Así que vamos a adoptar los analizadores de código estático y hacer que nuestro código sea lo mejor posible!

Mejora tus validaciones en Laravel con Form Request

Iosvany Alvarez — Mon, 21 Mar 2022 13:25:13 +0000

Laravel ofrece un buen recurso para poder organizarlas de una manera más limpia y funcional.

Seguro has visto como desarrollador que solemos codear nuestras validaciones en el controlador. Pero nuestro código crece exponencialmente y sería difícil mantenerlo, de acuerdo a los principios SOLID no debería ser así, los Form Request llegan al rescate. Extraen toda esa lógica en una clase aparte y te brinda diferentes métodos que termina en un código más mantenible y prolijo.

Quédate, te mostraré un truco para validar todos los verbos HTTP en un solo archivo.

Empecemos creando en nuestra terminal nuestro primer Form Request

Una vez creado nos desplazamos a la carpeta en app/http/request en nuestro proyecto y lo abrimos.

Veamos el primer método

Devuelve un valor booleano que por default viene en false y define la autorización si la petición del usuario debe llevar a cabo las validaciones establecidas en el Request. También puedes crear una lógica más avanzada para la autorización de ciertos procesos como la actualización, eliminación o adición de recursos.

Método rules

Establecerá las reglas para nuestras propiedades que vienen en la petición HTTP. Aquí es cuando le muestro un truco, cuando generamos un Form Request deberíamos generarlo por cada acción o método http, o sea FormRequestPostSale, FormRequestPutSale, etc.

Sin embargo, con tan solamente encapsularlos dentro de los métodos match y method evaluaremos qué tipo de petición hace el usuario y cuáles son las reglas a evaluar.

Nota:
Esta función de match está presente si nada más tienes PHP 8.0 instalado en tu máquina.

Método attributes

En este particular y de manera resumida pondrás los nombre con lo que se mostrarán los mensajes de las validaciones. Algo muy identificativo para mayor compresión, entenderás más adelantes como lo utilizaremos.

Método message
Pieza importante de los Form Request, porque define los mensajes que irían a mostrar. Cómo vemos en la imagen establecemos las reglas con los diferentes mensajes de validación y como anticipé utilizamos nuestro :attribute para no repetir código.

Opcional

Método prepareForValidation este método lo empleo para modificar algún parámetro del Request entrante, lo uso para hashear un password y así pasaría al controlador ya convertido y menos código en él. Pero puede hacer infinidades de modificaciones.

Los Form Request te pueden ayudar a establecer una validación fuerte y eliminar esas líneas de código del controlador. Mantener esa capa que verifica si la petición cumple con todo los parámetros ayudan que la data pase al controlador con los estándares correspondientes. Si algunas de las validaciones faltan, devolverá los errores con código 422 Unprocessed Entry.

Queda mucho por explicar este es un pequeño resumen de este gran ayuda de Laravel, si deseas profundizar más te dejo la referencia a la documentación.

Referencias

Si te gusto el post no olvide dar like.

Solución para restringir el acceso por web en una API en Laravel.

Iosvany Alvarez — Thu, 09 Sep 2021 03:12:07 +0000

Cuando creamos una API en Laravel queremos que nuestra aplicación solo sea accedida mediante peticiones HTTP con formato JSON.

Una de las tantas vias que existe es el manejo de excepciones mediante el fichero Handler de nuestro proyecto de Laravel.Tiene un método register(), donde cambiaremos par de lineas de como viene por default cuando se crea la aplicación laravel.

Pero esta vía no creo que sea la más completa para tratar todos los posibles errores o excepciones, pero funciona.

Ahora le quiero mostrar otra opción y es mediante la creación de un middleware que nos va a evualar las peticiones HTTP,pero lo configuraremos de manera global para que todas las peticiones que se realicen hacia nuestra API cumplan con los requisistos establecidos.

En la imagen de abajo se observa el código del middleware y la configuración que he usado para hacerlo de manera global.

class JsonMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle(Request $request, Closure $next)
    {
        if (!$request->wantsJson()) 
        {
            return response()->json([
                'success'=> 'false',
                'message' => 'Do not have authorization'
            ], 404);   
        }

        return $next($request);
    }
}

Aqui vamos analizar que las peticiones que se hagan, sino vienen en formato JSON devolveran una respuesta. Para eso nos apoyamos en el metodo wantsJson que devuelve un valor booleano si el request no viene en formato requerido.

Aquí las imagenes de los resultados tanto de un navegador como del cliente HTTP Postman, de las peticiones hechas después de haber configurado nuestro middleware de manera global. Las mismas no cumplen con los requisitos y nuestra API retorna una respuesta con el error.

Como integrar Tailwindcss a un proyecto de React.

Iosvany Alvarez — Thu, 29 Apr 2021 23:09:54 +0000

En mis proyecto de React siempre trabajo con el framework de css Bootstrap, le da un diseño único a las aplicaciones. Ultimamente esta muy de moda Tailwindcss un framework css muy potente y con un build muy ligero pero;como lo integro a mi app de react?

Bueno para eso debemos asumir que ya tenemos nuestra aplicación de react, sino sigue este link Create a New React App

Bien, hecho el anterior paso vamos a integrar tailwindcss a nuestro proyecto

1. Instalación de tailwindcss



npm install tailwindcss postcss-cli autoprefixer -D
npx tailwindcss init

Este paso nos instalará en nuestro proyecto las depedencias de tailwindcss, postcss-cli y autoprefixer. Debemos verificar que dichas dependencias existan en el archivo package.json de nuestro proyecto.

2.Configuracion de postcss.config.js

En la raíz de nuestro proyecto crearemos un archivo con el nombre de postcss.config.js y dentro copiaremos este código.



module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

Este archivo le dira a react que requiere de las dependencia de tailwind y autoprefixer y luego exportarlas.

Si quieres profundizar respecto a este tema te dejo este link:
Configuracion de postcss.config.js.

3. Crear tailwind.css

Ahora crearemos un archivo tailwind.css que sera nuestro .css como tradicionalmente conocemos.Es aconsejable crearlo en esta ruta src/assets/tailwind.css y dentro debemos copiar el siguiente código.



@tailwind base;
@tailwind components;
@tailwind utilities;

No te asuste si te marca un warning es normal.Dentro de este archivo escribiremos nuestra propia configuración de estilos de componentes,botones,color de fuente, entre otras opciones.En estos links se profundiza más sobre el tema:

Adding-base style
Extracting Component
Adding New Utilities

PD:En este mismo directorio creamos un archivo llamado main.css, lo dejamos vacío,aquí se almacenará la transpilación del código css de tailwindcss.

4. Configuración del package.json

Configuramos los comandos del package.json para poder ejecutar el npm start o npm run build a producción.La configuración es un poco diferente, ya que tenemos que compilar nuestro código de react conjunto con el de tailwindcss, para eso en el espacio de los script copiamos estos codigos:



"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },

5.Importación del main.css.

Ya por último en index.js de nuestro proyecto importaremos el archivo main.css que creamos en el paso 3.



import React from 'react';
import ReactDOM from 'react-dom';
import './assets/main.css';
import App from './App.jsx';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

También como extra en nuestro componente App.js podemos escribir algun código de algún componente de tailwindcss.

Te dejo un link con códigos de componentes de tailwindcss:
Container docs

Una vez hecho las configuraciones ya podemos ejecutar el comando en nuestra terminal npm start y deberá levantar un servidor local con nuestra aplicación.

Con estos 5 pasos puedes tener integrado Tailwindcss a nuestra aplicación de React y asi poder construir poderosos componentes y con diseño brillantes.

Saludos Codificados
Iosvany Alvarez
Full Stack Developer