next axiom
v1.9.1
Axiom在任何規模上都可以解鎖可觀察性。
有關更多信息，請查看官方文檔。
該庫允許您將Web Vitals以及Next.js應用程序中的結構化日誌發送到Axiom。
使用頁面路由器？使用版本
0.*繼續接收安全補丁。這是0.x的讀數。
npm install --save next-axiom以安裝最新版本的Next-Axiom。NEXT_PUBLIC_AXIOM_DATASET是要發送數據的Axiom數據集的名稱。NEXT_PUBLIC_AXIOM_TOKEN是您生成的公理API令牌。next.config.ts文件中，將您的next.js配置包裝在withAxiom中： const { withAxiom } = require ( 'next-axiom' ) ;
module . exports = withAxiom ( {
// Your existing configuration.
} ) ; 要捕獲流量請求，請在您的next.js App的根文件夾中創建一個middleware.ts文件：
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接受配置對像作為第二個參數。該對象可以包含以下屬性：
logRequestDetails ：接受布爾或一系列鑰匙。如果您通過true ，它將將所有請求詳細信息添加到日誌（方法，URL，標題等）中。如果通過一系列字符串，它將僅添加指定的鍵。有關可用密鑰的文檔，請參見請求和Nextrequest。如果啟用了logRequestDetails ，則該功能將返回需要等待的承諾。 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 ( ) ;
} 要將Web Vitals發送到Axiom，請將AxiomWebVitals組件從Next-Axiom添加到app/layout.tsx文件：
import { AxiomWebVitals } from 'next-axiom' ;
export default function RootLayout ( ) {
return (
< html >
...
< AxiomWebVitals / >
< div > ... < / div >
< / html >
) ;
}Web Vitals僅從生產部署中發送。
將日誌從應用程序的不同部分發送到公理。每個日誌功能調用都採用消息和一個可選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' } ) ;用withAxiom將路由處理程序包裹在您的請求中添加一個記錄器，並自動日常異常：
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' } ) ;
} ) ;路由處理者接受配置對像作為第二個參數。該對象可以包含以下屬性：
logRequestDetails ：接受布爾或一系列鑰匙。如果您通過true ，它將將所有請求詳細信息添加到日誌（方法，URL，標題等）中。如果通過一系列字符串，它將僅添加指定的鍵。有關可用密鑰的文檔，請參見請求和Nextrequest。
NotFoundLogLevel ：覆蓋not_found錯誤的日誌級別。默認warn 。
RedirectLogLevel ：覆蓋Next_redirect錯誤的日誌級別。默認為info 。
配置示例：
export const GET = withAxiom (
async ( ) => {
return new Response ( "Hello World!" ) ;
} ,
{
logRequestDetails : [ 'body' , 'nextUrl' ] , // { logRequestDetails: true } is also valid
NotFoundLogLevel : 'error' ,
RedirectLogLevel : 'debug' ,
}
) ;要從客戶端組件發送日誌，請將useLogger從Next-Axiom添加到您的組件：
'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 > ;
}要從服務器組件發送日誌，請將Logger從Next-Axiom添加到您的組件，然後在返回之前致電齊平：
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 > ;
}日誌級別定義了發送給Axiom的最低日誌。選擇以下級別之一（從最低到最高）：
debug是默認設置。這意味著您將所有日誌發送到公理。infowarnerror意味著您僅將最高級別的日誌發送到公理。off意味著您不會將任何日誌發送到Axiom。例如，除了將調試日誌發送到Axiom外，所有日誌
export NEXT_PUBLIC_AXIOM_LOG_LEVEL=info要捕獲路由錯誤，請使用Next.js的錯誤處理機制：
app文件夾。error.tsx文件。useLogger從Next-Axiom添加以將錯誤發送到AXIOM。例如： "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 >
) ;
} Next-Axiom切換以從版本1.0開始支持應用程序路由器。如果您將Next-Axiom V0.X的頁面路由器應用程序升級到應用程序路由器，則需要進行以下更改：
NEXT_PUBLIC_前綴，例如： NEXT_PUBLIC_AXIOM_TOKENuseLogger鉤子而不是log propLogger實例，並在組件返回之前刷新日誌。reportWebVitals() ，然後將AxiomWebVitals組件添加到您的佈局中。 AXIOM VERCEL集成設置了一個稱為NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT的環境變量，默認情況下僅針對生產環境啟用。要從預覽部署發送日誌，請轉到Vercel中的網站設置，並啟用該環境變量的預覽部署。
您可以使用log.with創建中間記錄器，例如：
const logger = userLogger ( ) . with ( { userId : 42 } ) ;
logger . info ( 'Hi' ) ; // will ingest { ..., "message": "Hi", "fields" { "userId": 42 }} 根據MIT許可分發。
