next axiom
v1.9.1
O Axiom desbloqueia a observabilidade em qualquer escala.
Para mais informações, consulte a documentação oficial.
Esta biblioteca permite que você envie vitais na Web, bem como logs estruturados do seu aplicativo Next.js para o Axiom.
Usando o roteador de páginas? Use a versão
0.*que continua a receber patches de segurança. Aqui está o ReadMe para0.x
npm install --save next-axiom para instalar a versão mais recente do Next-Axiom.NEXT_PUBLIC_AXIOM_DATASET é o nome do conjunto de dados do Axiom, onde você deseja enviar dados.NEXT_PUBLIC_AXIOM_TOKEN é o token da API Axiom que você gerou.next.config.ts , envolva sua configuração Next.js no withAxiom : const { withAxiom } = require ( 'next-axiom' ) ;
module . exports = withAxiom ( {
// Your existing configuration.
} ) ; Para capturar solicitações de tráfego, crie um arquivo middleware.ts na pasta root do seu aplicativo 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 aceita um objeto de configuração como o segundo argumento. Este objeto pode conter as seguintes propriedades:
logRequestDetails : aceita um booleano ou uma variedade de chaves. Se você passar true , ele adicionará todos os detalhes da solicitação ao log (método, URL, cabeçalhos etc.). Se você passar por uma variedade de strings, ela adicionará apenas as teclas especificadas. Consulte a solicitação e o NextReQuest para documentação sobre as teclas disponíveis. Se logRequestDetails estiver ativado, a função retornará uma promessa que precisa ser aguardada. 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 vitais na Web ao Axiom, adicione o componente AxiomWebVitals do próximo exiom ao arquivo app/layout.tsx :
import { AxiomWebVitals } from 'next-axiom' ;
export default function RootLayout ( ) {
return (
< html >
...
< AxiomWebVitals / >
< div > ... < / div >
< / html >
) ;
}Os vitais da Web são enviados apenas a partir de implantações de produção.
Envie logs para o Axioma de diferentes partes do seu aplicativo. Cada chamada de função de log leva uma mensagem e um objeto fields opcionais.
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' } ) ; Enrole seus manipuladores de rota no withAxiom para adicionar um madeireiro à sua solicitação e registrar exceções automaticamente:
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' } ) ;
} ) ;Os manipuladores de rota aceitam um objeto de configuração como o segundo argumento. Este objeto pode conter as seguintes propriedades:
logRequestDetails : aceita um booleano ou uma variedade de chaves. Se você passar true , ele adicionará todos os detalhes da solicitação ao log (método, URL, cabeçalhos etc.). Se você passar por uma variedade de strings, ela adicionará apenas as teclas especificadas. Consulte a solicitação e o NextReQuest para documentação sobre as teclas disponíveis.
NotFoundLogLevel : substitua o nível de log para erros não_found. Padrões para warn .
RedirectLogLevel : substitua o nível de log para erros next_redirect. Padrões para info .
Exemplo de configuração:
export const GET = withAxiom (
async ( ) => {
return new Response ( "Hello World!" ) ;
} ,
{
logRequestDetails : [ 'body' , 'nextUrl' ] , // { logRequestDetails: true } is also valid
NotFoundLogLevel : 'error' ,
RedirectLogLevel : 'debug' ,
}
) ; Para enviar logs dos componentes do cliente, adicione useLogger do próximo eixo ao seu 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 logs dos componentes do servidor, adicione Logger do próximo eixo ao seu componente e ligue para Flush antes de retornar:
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 > ;
}O nível de log define o nível mais baixo dos logs enviados ao Axiom. Escolha um dos seguintes níveis (do mais baixo ao mais alto):
debug é a configuração padrão. Isso significa que você envia todos os logs para o Axiom.infowarnerror significa que você envia apenas os logs de nível mais alto para o Axiom.off significa que você não envia nenhum registro para o Axiom.Por exemplo, para enviar todos os logs, exceto os logs de depuração para o Axiom:
export NEXT_PUBLIC_AXIOM_LOG_LEVEL=infoPara capturar erros de roteamento, use o mecanismo de manuseio de erros do Next.js:
app .error.tsx .useLogger do próximo eixo para enviar o erro ao Axiom. Por exemplo: "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 >
) ;
} O próximo eixo alternou para suportar o roteador de aplicativos começando com a versão 1.0. Se você estiver atualizando um aplicativo de roteador de páginas com o próximo eixo v0.x para o roteador de aplicativos, precisará fazer as seguintes alterações:
NEXT_PUBLIC_ , por exemplo: NEXT_PUBLIC_AXIOM_TOKENuseLogger nos componentes do cliente em vez de um log logLogger e liberar os logs antes que o componente retorne.reportWebVitals() e adicione o componente AxiomWebVitals ao seu layout. A integração do Axiom Vercel configura uma variável de ambiente chamada NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT , que por padrão está ativada apenas para o ambiente de produção. Para enviar logs das implantações de visualização, vá para as configurações do seu site no vercel e ative as implantações de visualização para essa variável de ambiente.
Você pode usar log.with para criar um madeireiro intermediário, por exemplo:
const logger = userLogger ( ) . with ( { userId : 42 } ) ;
logger . info ( 'Hi' ) ; // will ingest { ..., "message": "Hi", "fields" { "userId": 42 }} Distribuído sob a licença do MIT.
