Manejo de errores en la UI con el archivo error.tsx

Curso de Next.js 14

Conceptos básicos de Next.js 14

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados

Creación de Proyectos Next.js con TypeScript y App Router

Creación de Tienda Online con NextGIS y Shopify

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico

Implementación de Layouts en Next.js: Globales y Locales

Navegación Optimizada con Next.js Usando el Componente Link

Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica

Uso de React Server Components en Next.js: Cliente vs Servidor

Arquitectura de Componentes para Landing Page en Next.js

Quiz: Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

Implementación de CSS Modules en Next.js para Estilizar Componentes

Instalación y Configuración de Sass en Next.js

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos

Optimización de Imágenes con Next.js: Uso de Next.Image

Optimización y Responsividad con NextImage en Next.js

Optimización de Fuentes de Google en Next.js con Roboto

Estilos Dinámicos en React con Classnames y useState

Quiz: Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

Creación de Tienda en Shopify para Desarrollo con Next.js

Creación y uso de variables de entorno en Next.js

Consumo de APIs con Shopify y React Server Components

Implementación de Loader en Next.js para Carga de Productos

Implementación de Root Grouping en Next.js

Manejo de Errores en Next.js con React Error Boundary

Quiz: Data Fetching en Next.js

Next.js Avanzado

Manejo de Errores y Páginas 404 en Next.js

React Server Components en Next.js: Renderizado y Optimización

Diferencias entre archivos Template y Layout en Next.js

Arquitectura Escalable para Aplicaciones de Software

Creación de APIs con Next.js y Road Handlers

Configuración y Creación de Colecciones en Shopify

Patrones de Fetching en Next.js: Secuencial y Paralelo

Filtrado Dinámico de Productos en Shopify mediante API Collections

Uso de searchParams y params en componentes React cliente-servidor

Implementación de la Vista de Producto en TypeScript y React

Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas

Revalidación de Caché en Next.js: Endpoints por Tag y Path

Redirección en Next.js: Server y Client Components

Creación de un Componente React para Sanitizar HTML

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web

Quiz: Next.js Avanzado

Autenticación y autorización

Implementación de API GraphQL en Shopify para Autenticación Segura

Uso de Server Actions en Next.js para Formularios React

Implementación de Signup con GraphQL y Shopify

Implementación de Cookies de Acceso en Shopify con Next.js

Implementación de Flujo de Login con Tokens y Cookies

Validación de Access Tokens en Next.js con GraphQL y Cookies

Implementación de Carrito de Compras con React Icons

Manejo de estado global con Sustant en Next.js 13

Implementación de Carrito de Compras en JavaScript y CSS

Solución de errores de hidratación en carritos con Next.js y Shopify

Implementación de Middlewares en Next.js para Control de Acceso

Inteligencia Artificial

Implementación de Chatbots con Next.js y Vercel AI SDK

Creación de un Chatbot de Ventas con Personalidad y Contexto

Performance

Implementación de Parallel Routing en Next.js para Cargas Independientes

Análisis de Bundle en Next.js con Bundle Analyzer

Quiz: Performance

Frontend Ops

"Implementación del Edge Runtime en Next.js"

Despliegue de Aplicaciones NxJS en Vercel

Arquitectura de Proyectos Next.js para Entornos Empresariales

Quiz: Frontend Ops

Next.js es parte de tu nuevo stack

Next.js: Backend y Frontend con React Server Components

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 9

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Gerardo Castillo

hace un año

Algo importante que menciona la documentación es el comportamiento de error.js en rutas anidadas:

Un archivo error.tsx manejará los errores de todos los segmentos anidados cuando no haya un error.tsx más especifico en dicho nivel anidado.
Un archivo error.tsx no maneja los errores que puedan producirse en el layout.tsx de su mismo nivel (dado que el error boundary se renderiza dentro del layout como se aprecia en la ilustración).
Para manejar errores producidos en un layout.tsx especifico, se debe crear un error.tsx en la ruta padre de dicho layout.tsx. Para el caso del root layout, se usa una variación de error.tsx denominada global-error.tsx (este último sí debe estar ubicado en el mismo nivel del root layout).
El archivo global-error.js envuelve toda la app, el componente que retorna reemplazaría al root layout en un eventual caso incluso teniendo que definir su propio <html> y <body>. De todos modos este escenario sería poco probable dado que el root layout suele ser menos dinámico. Entonces, el archivo global-error.js tiende a manejar errores generales mientras que error.js, cuyo uso es recomendado, permite un control más granular.

Cristopher

hace un año

Solo unas inquietudes: 1. Porque usar typescript si no se van a tipificar los objetos. 2. Tampoco veo que usen snipts para crear las páginas y componentes o en general, creo que debería.

Santiago Rodriguez Palacio

hace un año

Sencillo, pero funcional :D ![](https://static.platzi.com/media/user_upload/error-cd897611-5afa-4b35-827a-d9186b4eac5a.jpg)

Guido Juliano Mazzuchini Ubaldi

hace un año

Les dejo por aqui los estilos que aplique al componente error ```js

<h1 style={{ fontSize: "4rem", color: "#721c24", // Color del título (puedes cambiarlo) }} > :(

Ha ocurrido un error

<button style={{ padding: "0.5rem 1rem", fontSize: "1rem", color: "#fff", // Color del texto del botón (puedes cambiarlo) backgroundColor: "#d9534f", // Color de fondo del botón (puedes cambiarlo) border: "1px solid #d9534f", // Borde del botón (puedes cambiarlo) borderRadius: "4px", // Borde redondeado del botón (puedes cambiarlo) cursor: "pointer", marginTop: "1rem", }} > Intentar de nuevo </button>

```y el resultado es este (sin estilo de fuente por que lo probe en codesandbox.io) ![](https://static.platzi.com/media/user_upload/imagen-22259a5e-2791-40ec-a262-e06847442b2c.jpg)

Luis Javier Castillo Rabanal

hace 2 meses

Dejo por aqui los estilos que apliqué: ```js .error display: flex flex-direction: column align-items: center & > h1 font-size: 4em margin: 0 color: #626F47 & > p font-size: 2em margin:15px 0px 30px 0px padding: 0 color: #FFCF50 & > button padding: 20px 30px border: 2px border-radius: 15px font-size: 1.5em background-image: linear-gradient(270deg, #4f56ff, #ff4980) ```

Omar Alejandro Morales Mendoza

hace un año

Con un poco de apoyo de imágenes generadas ![](https://static.platzi.com/media/user_upload/image-e82928c9-2271-49dc-9d09-07334a83cf43.jpg)

Guido Juliano Mazzuchini Ubaldi

hace un año

![](https://static.platzi.com/media/user_upload/imagen-48eb9181-1b4f-4ac8-86c5-f27e0c71e729.jpg)

Juan Diaz

hace un año

"use client";

import { useEffect } from "react";

interface ErrorProps {
  error: Error;
  reset: () => void;
}

export default function Error({ error, reset }: ErrorProps) {
  useEffect(() => {
    console.log(error);
  }, [error]);

  return (
    <div
      style={{
        padding: "10rem",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      <h1>🚨</h1>
      <p>It seems that we are having some issues. Please try again later.</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

David Alberto de Jesús Mendoza Pardo

hace un año

Alineado con el estilo del sitio 👀 ![]()