next axiom
v1.9.1
Axiom déverrouille l'observabilité à n'importe quelle échelle.
Pour plus d'informations, consultez la documentation officielle.
Cette bibliothèque vous permet d'envoyer des vitaux Web ainsi que des journaux structurés de votre application Next.js à Axiom.
En utilisant le routeur des pages? Utilisez la version
0.*qui continue de recevoir des correctifs de sécurité. Voici la lecture de0.x
npm install --save next-axiom pour installer la dernière version de Next-axiom.NEXT_PUBLIC_AXIOM_DATASET est le nom de l'ensemble de données Axiom où vous souhaitez envoyer des données.NEXT_PUBLIC_AXIOM_TOKEN est le jeton API Axiom que vous avez généré.next.config.ts , enveloppez votre configuration Next.js dans withAxiom : const { withAxiom } = require ( 'next-axiom' ) ;
module . exports = withAxiom ( {
// Your existing configuration.
} ) ; Pour capturer les demandes de trafic, créez un fichier middleware.ts dans le dossier racine de votre application 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 accepte un objet de configuration comme deuxième argument. Cet objet peut contenir les propriétés suivantes:
logRequestDetails : accepte un booléen ou un tableau de clés. Si vous passez true , cela ajoutera tous les détails de la demande au journal (méthode, URL, en-têtes, etc.). Si vous passez un tableau de chaînes, il ne fera qu'ajouter les clés spécifiées. Voir la demande et NextRequest pour la documentation sur les clés disponibles. Si logRequestDetails est activé, la fonction renvoie une promesse qui doit être attendue. 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 ( ) ;
} Pour envoyer des vitaux Web à Axiom, ajoutez le composant AxiomWebVitals de l'axiom suivant au fichier app/layout.tsx :
import { AxiomWebVitals } from 'next-axiom' ;
export default function RootLayout ( ) {
return (
< html >
...
< AxiomWebVitals / >
< div > ... < / div >
< / html >
) ;
}Les vitaux Web ne sont envoyés que des déploiements de production.
Envoyez des journaux à Axiom à partir de différentes parties de votre application. Chaque appel de fonction de journal prend un message et un objet fields facultatif.
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' } ) ; Enveloppez vos gestionnaires d'itinéraire dans withAxiom pour ajouter un enregistreur à votre demande et enregistrer automatiquement les exceptions:
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' } ) ;
} ) ;Les gestionnaires d'itinéraire acceptent un objet de configuration comme deuxième argument. Cet objet peut contenir les propriétés suivantes:
logRequestDetails : accepte un booléen ou un tableau de clés. Si vous passez true , cela ajoutera tous les détails de la demande au journal (méthode, URL, en-têtes, etc.). Si vous passez un tableau de chaînes, il ne fera qu'ajouter les clés spécifiées. Voir la demande et NextRequest pour la documentation sur les clés disponibles.
NotFoundLogLevel : remplacez le niveau de journal pour les erreurs Not_found. Faire par défaut à warn .
RedirectLogLevel : remplacez le niveau de journal pour les erreurs Next_Redirect. Par défaut info .
Exemple de configuration:
export const GET = withAxiom (
async ( ) => {
return new Response ( "Hello World!" ) ;
} ,
{
logRequestDetails : [ 'body' , 'nextUrl' ] , // { logRequestDetails: true } is also valid
NotFoundLogLevel : 'error' ,
RedirectLogLevel : 'debug' ,
}
) ; Pour envoyer des journaux à partir des composants clients, ajoutez useLogger de l'axiom suivant à votre composant:
'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 > ;
} Pour envoyer des journaux à partir des composants du serveur, ajoutez Logger à partir de l'axiom suivant à votre composant et appelez Flush avant de revenir:
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 > ;
}Le niveau de journal définit le niveau le plus bas de journaux envoyés à Axiom. Choisissez l'un des niveaux suivants (du plus bas au plus haut):
debug est le paramètre par défaut. Cela signifie que vous envoyez tous les journaux à Axiom.infowarnerror signifie que vous n'envoyez que les journaux de niveau les plus élevés à Axiom.off signifie que vous n'envoyez aucun journal à Axiom.Par exemple, pour envoyer tous les journaux, sauf pour les journaux de débogage à Axiom:
export NEXT_PUBLIC_AXIOM_LOG_LEVEL=infoPour capturer les erreurs de routage, utilisez le mécanisme de gestion des erreurs de Next.js:
app .error.tsx .useLogger à partir de l'axiom suivant pour envoyer l'erreur à Axiom. Par exemple: "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 >
) ;
} Axiom suivant est commuté pour prendre en charge le routeur de l'application en commençant par la version 1.0. Si vous améliorez une application de routeur Pages avec le prochain v0.x au routeur de l'application, vous devrez apporter les modifications suivantes:
NEXT_PUBLIC_ , par exemple: NEXT_PUBLIC_AXIOM_TOKENuseLogger dans les composants clients au lieu du logLogger et rincer les journaux avant le retour du composant.reportWebVitals() et ajoutez à la place le composant AxiomWebVitals à votre disposition. L'intégration Axiom Vercel met en place une variable d'environnement appelée NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT , qui n'est par défaut que pour l'environnement de production. Pour envoyer des journaux à partir des déploiements d'aperçu, accédez à vos paramètres de site dans Vercel et activez les déploiements d'aperçu pour cette variable d'environnement.
Vous pouvez utiliser log.with pour créer un enregistreur intermédiaire, par exemple:
const logger = userLogger ( ) . with ( { userId : 42 } ) ;
logger . info ( 'Hi' ) ; // will ingest { ..., "message": "Hi", "fields" { "userId": 42 }} Distribué sous la licence du MIT.
