next axiom
v1.9.1
El axioma desbloquea la observabilidad en cualquier escala.
Para obtener más información, consulte la documentación oficial.
Esta biblioteca le permite enviar vital web, así como registros estructurados desde su próxima aplicación JS a Axiom.
¿Usando el enrutador de páginas? Use la versión
0.*que continúa recibiendo parches de seguridad. Aquí está el ReadMe para0.x
npm install --save next-axiom para instalar la última versión de Axiom Next.NEXT_PUBLIC_AXIOM_DATASET es el nombre del conjunto de datos Axiom donde desea enviar datos.NEXT_PUBLIC_AXIOM_TOKEN es el token API Axiom que ha generado.next.config.ts , envuelva su configuración Next.js en withAxiom : const { withAxiom } = require ( 'next-axiom' ) ;
module . exports = withAxiom ( {
// Your existing configuration.
} ) ; Para capturar solicitudes de tráfico, cree un archivo middleware.ts en la carpeta raíz de su aplicación Next.js:
import { Logger } from 'next-axiom'
import { NextResponse } from 'next/server'
import type { NextFetchEvent , NextRequest } from 'next/server'
export async function middleware ( request : NextRequest , event : NextFetchEvent ) {
const logger = new Logger ( { source : 'middleware' } ) ; // traffic, request
logger . middleware ( request )
event . waitUntil ( logger . flush ( ) )
return NextResponse . next ( )
// For more information, see Matching Paths below
export const config = {
} logger.middleware acepta un objeto de configuración como el segundo argumento. Este objeto puede contener las siguientes propiedades:
logRequestDetails : acepta un booleano o una variedad de claves. Si pasa true , agregará todos los detalles de solicitud al registro (método, URL, encabezados, etc.). Si pasa una matriz de cadenas, solo agregará las teclas especificadas. Consulte Solicitud y NEXTREQUEST para la documentación sobre las claves disponibles. Si logRequestDetails está habilitado, la función devolverá una promesa que debe esperarse. export async function middleware ( request : NextRequest , event : NextFetchEvent ) {
const logger = new Logger ( { source : "middleware" } ) ;
await logger . middleware ( request , { logRequestDetails : [ "body" , "nextUrl" ] } ) ;
event . waitUntil ( logger . flush ( ) ) ;
return NextResponse . next ( ) ;
} Para enviar Web Vitals a Axiom, agregue el componente AxiomWebVitals desde el siguiente eje al archivo app/layout.tsx :
import { AxiomWebVitals } from 'next-axiom' ;
export default function RootLayout ( ) {
return (
< html >
...
< AxiomWebVitals / >
< div > ... < / div >
< / html >
) ;
}Web Vitals solo se envía desde implementaciones de producción.
Envíe registros a Axiom desde diferentes partes de su aplicación. Cada llamada de función de registro toma un mensaje y un objeto fields opcional.
log . debug ( 'Login attempt' , { user : 'j_doe' , status : 'success' } ) ; // Results in {"message": "Login attempt", "fields": {"user": "j_doe", "status": "success"}}
log . info ( 'Payment completed' , { userID : '123' , amount : '25USD' } ) ;
log . warn ( 'API rate limit exceeded' , { endpoint : '/users/1' , rateLimitRemaining : 0 } ) ;
log . error ( 'System Error' , { code : '500' , message : 'Internal server error' } ) ; Envuelva los manejadores de su ruta withAxiom para agregar un registrador a su solicitud y registrar las excepciones automáticamente:
import { withAxiom , AxiomRequest } from 'next-axiom' ;
export const GET = withAxiom ( ( req : AxiomRequest ) => {
req . log . info ( 'Login function called' ) ;
// You can create intermediate loggers
const log = req . log . with ( { scope : 'user' } ) ;
log . info ( 'User logged in' , { userId : 42 } ) ;
return NextResponse . json ( { hello : 'world' } ) ;
} ) ;Los manejadores de ruta aceptan un objeto de configuración como el segundo argumento. Este objeto puede contener las siguientes propiedades:
logRequestDetails : acepta un booleano o una variedad de claves. Si pasa true , agregará todos los detalles de solicitud al registro (método, URL, encabezados, etc.). Si pasa una matriz de cadenas, solo agregará las teclas especificadas. Consulte Solicitud y NEXTREQUEST para la documentación sobre las claves disponibles.
NotFoundLogLevel : anule el nivel de registro de errores no_found. El valor predeterminado se warn .
RedirectLogLevel : anule el nivel de registro para los errores next_redirect. Ponal predeterminado a info .
Ejemplo de configuración:
export const GET = withAxiom (
async ( ) => {
return new Response ( "Hello World!" ) ;
} ,
{
logRequestDetails : [ 'body' , 'nextUrl' ] , // { logRequestDetails: true } is also valid
NotFoundLogLevel : 'error' ,
RedirectLogLevel : 'debug' ,
}
) ; Para enviar registros desde los componentes del cliente, agregue useLogger desde el siguiente eje a su componente:
'use client' ;
import { useLogger } from 'next-axiom' ;
export default function ClientComponent ( ) {
const log = useLogger ( ) ;
log . debug ( 'User logged in' , { userId : 42 } ) ;
return < h1 > Logged in < / h1 > ;
} Para enviar registros desde los componentes del servidor, agregue Logger desde el siguiente eje a su componente y llame a FLUSH antes de regresar:
import { Logger } from 'next-axiom' ;
export default async function ServerComponent ( ) {
const log = new Logger ( ) ;
log . info ( 'User logged in' , { userId : 42 } ) ;
// ...
await log . flush ( ) ;
return < h1 > Logged in < / h1 > ;
}El nivel de registro define el nivel más bajo de registros enviados a Axiom. Elija uno de los siguientes niveles (de más bajos a más altos):
debug es la configuración predeterminada. Significa que envía todos los registros a Axiom.infowarnerror significa que solo envía los registros de más alto nivel a Axiom.off significa que no envía ningún registro a Axiom.Por ejemplo, para enviar todos los registros, excepto los registros de depuración a Axiom:
export NEXT_PUBLIC_AXIOM_LOG_LEVEL=infoPara capturar errores de enrutamiento, use el mecanismo de manejo de errores de Next.js:
app .error.tsx .useLogger desde el siguiente eje para enviar el error a Axiom. Por ejemplo: "use client" ;
import { useLogger , LogLevel } from "next-axiom" ;
import { usePathname } from "next/navigation" ;
export default function ErrorPage ( {
error ,
} : {
error : Error & { digest ?: string } ;
} ) {
const pathname = usePathname ( )
const log = useLogger ( { source : "error.tsx" } ) ;
let status = error . message == 'Invalid URL' ? 404 : 500 ;
log . logHttpRequest (
LogLevel . error ,
error . message ,
{
host : window . location . href ,
path : pathname ,
statusCode : status ,
} ,
{
error : error . name ,
cause : error . cause ,
stack : error . stack ,
digest : error . digest ,
} ,
) ;
return (
< div className = "p-8" >
Ops ! An Error has occurred : { " " }
< p className = "text-red-400 px-8 py-2 text-lg" > `{error.message}` < / p>
< div className = "w-1/3 mt-8" >
< NavTable / >
< / div >
< / div >
) ;
} El siguiente eje se cambió para admitir el enrutador de aplicaciones que comienza con la versión 1.0. Si está actualizando una aplicación de enrutador de páginas con el siguiente eje v0.x al enrutador de la aplicación, deberá realizar los siguientes cambios:
NEXT_PUBLIC_ prefix, por ejemplo: NEXT_PUBLIC_AXIOM_TOKENuseLogger Hook en componentes del cliente en lugar de log PropLogger y descargar los registros antes de que el componente regrese.reportWebVitals() y, en su lugar, agregue el componente AxiomWebVitals a su diseño. La integración de Axiom Vercel establece una variable de entorno llamada NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT , que por defecto solo está habilitada para el entorno de producción. Para enviar registros desde las implementaciones de vista previa, vaya a la configuración de su sitio en VERCE y habilite las implementaciones de vista previa para esa variable de entorno.
Puede usar log.with para crear un registrador intermedio, por ejemplo:
const logger = userLogger ( ) . with ( { userId : 42 } ) ;
logger . info ( 'Hi' ) ; // will ingest { ..., "message": "Hi", "fields" { "userId": 42 }} Distribuido bajo la licencia MIT.
