next axiom
v1.9.1
Axiom은 모든 규모로 관찰 가능성을 잠금 해제합니다.
자세한 내용은 공식 문서를 확인하십시오.
이 라이브러리를 사용하면 웹 생명체와 다음.js 응용 프로그램에서 Axiom으로 구조화 된 로그를 보낼 수 있습니다.
페이지 라우터 사용? 버전
0.*보안 패치를 계속받습니다.0.x에 대한 ReadMe는 다음과 같습니다.
npm install --save next-axiom 실행하여 최신 버전의 Next Axiom을 설치하십시오.NEXT_PUBLIC_AXIOM_DATASET 데이터를 보내려고하는 Axiom 데이터 세트의 이름입니다.NEXT_PUBLIC_AXIOM_TOKEN 은 당신이 생성 한 공리 API 토큰입니다.next.config.ts 파일에서 withAxiom 에서 다음 .js configuration을 감싸십시오. const { withAxiom } = require ( 'next-axiom' ) ;
module . exports = withAxiom ( {
// Your existing configuration.
} ) ; 트래픽 요청을 캡처하려면 Next.js 앱의 루트 폴더에서 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 ( ) ;
} 웹 생명체를 공리로 보내려면 AxiomWebVitals 구성 요소를 다음 축에서 app/layout.tsx 에 추가하십시오.
import { AxiomWebVitals } from 'next-axiom' ;
export default function RootLayout ( ) {
return (
< html >
...
< AxiomWebVitals / >
< div > ... < / div >
< / html >
) ;
}웹 생명은 생산 배포에서만 전송됩니다.
앱의 다른 부분에서 로그를 공리로 보냅니다. 각 로그 함수 호출은 메시지와 선택적 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' } ) ; Route 핸들러를 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 추가하십시오.
'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 > ;
} 서버 구성 요소에서 로그를 보내려면 다음 axiom에서 구성 요소로 Logger 추가하고 반환하기 전에 Flush를 호출하십시오.
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 > ;
}로그 레벨은 공리로 전송 된 가장 낮은 수준의 로그를 정의합니다. 다음 레벨 중 하나를 선택하십시오 (최저에서 가장 높은 것).
debug 는 기본 설정입니다. 그것은 당신이 모든 로그를 공리로 보낸다는 것을 의미합니다.infowarnerror 최고 수준의 로그 만 공리로 전송한다는 것을 의미합니다.off 로그를 공리에 보내지 않음을 의미합니다.예를 들어, 디버그 로그를 제외한 모든 로그를 공리로 보냅니다.
export NEXT_PUBLIC_AXIOM_LOG_LEVEL=info라우팅 오류를 캡처하려면 Next.js의 오류 처리 메커니즘을 사용하십시오.
app 폴더로 이동하십시오.error.tsx 파일을 만듭니다.useLogger 추가하여 오류를 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_ Prefix, 예를 들어 : NEXT_PUBLIC_AXIOM_TOKEN 있는지 확인하십시오.log 소품 대신 클라이언트 구성 요소에서 useLogger 후크 사용Logger 인스턴스를 생성하고 로그를 플러시해야합니다.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 라이센스에 따라 배포됩니다.
