next axiom
v1.9.1
Axiom entsperren die Beobachtbarkeit in jeder Skala.
Weitere Informationen finden Sie in der offiziellen Dokumentation.
Mit dieser Bibliothek können Sie Web -Vitals sowie strukturierte Protokolle von Ihrer nächsten.js -Anwendung an Axiom senden.
Verwenden des Seitenrouters? Verwenden Sie Version
0.*, die weiterhin Sicherheitspatches empfängt. Hier ist die Readme für0.x
npm install --save next-axiom aus, um die neueste Version von Next-Axiom zu installieren.NEXT_PUBLIC_AXIOM_DATASET ist der Name des Axiom -Datensatzes, an dem Sie Daten senden möchten.NEXT_PUBLIC_AXIOM_TOKEN ist das Axiom -API -Token, das Sie generiert haben.next.config.ts -Datei Ihre nächste Konfiguration in withAxiom ein: const { withAxiom } = require ( 'next-axiom' ) ;
module . exports = withAxiom ( {
// Your existing configuration.
} ) ; Um Verkehrsanforderungen zu erfassen, erstellen Sie eine middleware.ts -Datei im Stammordner Ihrer nächsten.js -App:
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 akzeptiert ein Konfigurationsobjekt als zweites Argument. Dieses Objekt kann die folgenden Eigenschaften enthalten:
logRequestDetails : Akzeptiert einen Booleschen oder eine Reihe von Schlüssel. Wenn Sie true übergeben, werden alle Anforderungsdetails zum Protokoll (Methode, URL, Header usw.) hinzugefügt. Wenn Sie eine Reihe von Zeichenfolgen übergeben, werden nur die angegebenen Schlüssel hinzugefügt. In Anfrage und NexTrequest finden Sie Unterlagen zu den verfügbaren Schlüssel. Wenn logRequestDetails aktiviert ist, gibt die Funktion ein Versprechen zurück, das erwartet werden muss. 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 ( ) ;
} Um Web-Vitals an Axiom zu senden, fügen Sie die AxiomWebVitals Komponente von der nächsten Achs-Achsen in die Datei app/layout.tsx hinzu:
import { AxiomWebVitals } from 'next-axiom' ;
export default function RootLayout ( ) {
return (
< html >
...
< AxiomWebVitals / >
< div > ... < / div >
< / html >
) ;
}Web -Vitale werden nur aus Produktionsbereitstellungen gesendet.
Senden Sie Protokolle aus verschiedenen Teilen Ihrer App an Axiom. Jeder Protokollfunktionsaufruf enthält eine Nachricht und ein optionales fields .
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' } ) ; Wickeln Sie Ihre Routenhandler in withAxiom ein, um Ihrer Anforderung einen Logger hinzuzufügen, und protokollieren Sie die Ausnahmen automatisch:
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' } ) ;
} ) ;Routenhandler akzeptieren ein Konfigurationsobjekt als zweites Argument. Dieses Objekt kann die folgenden Eigenschaften enthalten:
logRequestDetails : Akzeptiert einen Booleschen oder eine Reihe von Schlüssel. Wenn Sie true übergeben, werden alle Anforderungsdetails zum Protokoll (Methode, URL, Header usw.) hinzugefügt. Wenn Sie eine Reihe von Zeichenfolgen übergeben, werden nur die angegebenen Schlüssel hinzugefügt. In Anfrage und NexTrequest finden Sie Unterlagen zu den verfügbaren Schlüssel.
NotFoundLogLevel : Überschreiben Sie die Protokollebene für nicht_Found -Fehler. Standards zu warn .
RedirectLogLevel : Überschreiben Sie die Protokollebene für Next_redirect -Fehler. Standardeinstellungen zu info .
Konfigurationsbeispiel:
export const GET = withAxiom (
async ( ) => {
return new Response ( "Hello World!" ) ;
} ,
{
logRequestDetails : [ 'body' , 'nextUrl' ] , // { logRequestDetails: true } is also valid
NotFoundLogLevel : 'error' ,
RedirectLogLevel : 'debug' ,
}
) ; Um Protokolle aus Client-Komponenten zu senden, fügen Sie useLogger von der nächsten Achse zu Ihrer Komponente hinzu:
'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 > ;
} Um Protokolle aus Serverkomponenten zu senden, fügen Sie Logger aus dem nächsten Achsen zu Ihrer Komponente hinzu und rufen Sie Flush vor, bevor Sie zurückkehren:
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 > ;
}Die Protokollebene definiert die niedrigste Stufe der an Axiom gesendeten Protokolle. Wählen Sie eines der folgenden Ebenen (vom niedrigsten bis zum höchsten):
debug ist die Standardeinstellung. Es bedeutet, dass Sie alle Protokolle an Axiom senden.infowarnerror bedeutet, dass Sie nur die höchsten Protokolle an Axiom senden.off bedeutet, dass Sie keine Protokolle an Axiom senden.Zum Beispiel alle Protokolle mit Ausnahme von Debug -Protokollen an Axiom senden:
export NEXT_PUBLIC_AXIOM_LOG_LEVEL=infoVerwenden Sie zum Erfassen von Routing -Fehlern den Fehlerbehandlungsmechanismus von Next.js:
app -Ordner.error.tsx .useLogger von der nächsten Achse hinzu, um den Fehler an Axiom zu senden. Zum Beispiel: "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 >
) ;
} Nächstes-Achsen umgeschaltet, um den App-Router ab Version 1.0 zu unterstützen. Wenn Sie eine Seiten-Router-App mit dem nächsten Achsen-V0.x auf den App-Router aktualisieren, müssen Sie die folgenden Änderungen vornehmen:
NEXT_PUBLIC_ Präfix enthält, z. B. NEXT_PUBLIC_AXIOM_TOKENuseLogger -Hook in Client -Komponenten anstelle von logLogger erstellen und die Protokolle vor dem Rückkehr der Komponenten spülen.reportWebVitals() und fügen Sie stattdessen die AxiomWebVitals Komponente in Ihr Layout hinzu. Die Axiom -Vercel -Integration legt eine Umgebungsvariable mit dem Namen NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT ein, die standardmäßig nur für die Produktionsumgebung aktiviert ist. Um Protokolle aus Vorschau -Bereitstellungen zu senden, wenden Sie sich in Vercel zu Ihren Site -Einstellungen und aktivieren Sie die Vorschau -Bereitstellungen für diese Umgebungsvariable.
Sie können log.with verwenden, um einen Zwischenprotokoller zu erstellen, zum Beispiel:
const logger = userLogger ( ) . with ( { userId : 42 } ) ;
logger . info ( 'Hi' ) ; // will ingest { ..., "message": "Hi", "fields" { "userId": 42 }} Unter der MIT -Lizenz verteilt.
