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许可分发。
