Next.js

Monitorización de aplicaciones Next.js del lado del servidor

Gratis en todos los planes, incluido el gratuito

Empezar gratis Documentación

Dónde conseguirlo

Ver en npm

npm

Requisitos Next.js 13.4+ con App Router, entorno Node.js

Nombre del paquete @dockcodes/dock-ray-next

Precios Gratis

Para qué sirve

La integración oficial de DockRay para Next.js permite monitorizar errores y rendimiento de aplicaciones Next.js. Reporta automáticamente errores del lado del servidor, Edge Runtime y middleware, y permite recopilar opcionalmente errores de JavaScript del navegador.

La integración es compatible con Next.js 14 y 15 y con aplicaciones que utilizan App Router y Pages Router.

Monitorización de errores de Next.js

DockRay se integra con el mecanismo de reporte de errores de Next.js y permite recopilar problemas que se producen en diferentes partes de la aplicación.

Se pueden monitorizar, entre otros, los errores que se producen en:

Server Components,
Route Handlers,
Server Actions,
renderizado en streaming,
Pages Router y API Routes,
middleware y Edge Runtime.

Los eventos pueden incluir información sobre el router, el patrón de la ruta, el tipo de ruta y el origen del renderizado, lo que facilita localizar dónde se ha producido el problema.

Monitorización del rendimiento

DockRay permite monitorizar el tiempo de procesamiento de las solicitudes y las transacciones de aplicaciones Next.js. La frecuencia de recopilación de datos puede controlarse mediante una tasa de muestreo.

Monitorización de errores de JavaScript

Opcionalmente, se puede activar el reporte de errores de JavaScript que se producen en el navegador del usuario. Los eventos se envían primero a un endpoint de la propia aplicación Next.js y, a continuación, se reenvían a DockRay.

De este modo, la clave privada del proyecto permanece exclusivamente en el servidor y no se incluye en el código público de la aplicación.

Edge Runtime y Middleware

La integración dispone de un punto de entrada independiente diseñado para el entorno Edge Runtime. Esto permite reportar errores que se producen en middleware y en otras partes de la aplicación que se ejecutan en Edge.

Privacidad y seguridad

Los encabezados sensibles, como Authorization, Cookie, Set-Cookie y X-Api-Key, se eliminan de los datos reportados.

El envío de la dirección IP y del user agent es opcional y debe activarse por separado en la configuración.

Integración con Vercel

En aplicaciones desplegadas en Vercel, DockRay puede utilizar automáticamente la información sobre el entorno de despliegue y la versión de la aplicación, lo que facilita distinguir entre producción y deployments de preview.

Instalación

Instalación del paquete

Instala DockRay mediante npm:

bash

npm install @dockcodes/dock-ray-next

Configuración

Añade las credenciales del proyecto de DockRay a las variables de entorno:

RAY_TOKEN=project-token
RAY_PRIVATE_KEY=project-private-key
RAY_TRACES_SAMPLE_RATE=0.2

Encontrarás el token del proyecto y la clave privada en el panel de DockRay.

RAY_PRIVATE_KEY debe permanecer como una variable disponible únicamente del lado del servidor. No utilices el prefijo NEXT_PUBLIC_, ya que esto haría que la clave se incluyera en el código público de la aplicación.

Sin el token y la clave privada configurados, la integración permanecerá inactiva y no enviará ningún dato.

Activación del reporte de errores

En el archivo instrumentation.ts del directorio raíz del proyecto, inicializa DockRay y configura la gestión de errores:

import {
    initRay,
    rayRequestError
} from '@dockcodes/dock-ray-next';

export function register() {
    initRay();
}

export const>




    Una vez configurado, DockRay puede reportar los errores capturados por Next.js, incluidos los de Server Components, Route Handlers, Server Actions y renderizado en streaming.

Cómo usarlo

La integración informa de las excepciones por sí sola. Esto es para los informes que envías a propósito.

import { withRay } from '@dockcodes/dock-ray-next';

export default withRay(async function handler(req, res) {
    const order = await processOrder(req.body);

    res.status(200).json({
        success: true,
        order
    });
});