next axiom
v1.9.1
Axiomは、あらゆるスケールで観察可能性のロックを解除します。
詳細については、公式ドキュメントをご覧ください。
このライブラリを使用すると、next.jsアプリケーションからAxiomにWebバイタルと構造化されたログを送信できます。
ページルーターを使用しますか？バージョン
0.*セキュリティパッチを受け取り続けます。これが0.xのreadmeです。
npm install --save 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アプリのルートフォルダーに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 、構成オブジェクトを2番目の引数として受け入れます。このオブジェクトには、次のプロパティを含めることができます。
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 ( ) ;
} AxiomにWeb Vitalsを送信するには、 AxiomWebVitalsコンポーネントをNext-Axiomからapp/layout.tsxファイルに追加します。
import { AxiomWebVitals } from 'next-axiom' ;
export default function RootLayout ( ) {
return (
< html >
...
< AxiomWebVitals / >
< div > ... < / div >
< / html >
) ;
}Webバイタルは、生産展開からのみ送信されます。
アプリのさまざまな部分からログを公理に送信します。各ログ関数呼び出しは、メッセージとオプションの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' } ) ;
} ) ;ルートハンドラーは、構成オブジェクトを2番目の引数として受け入れます。このオブジェクトには、次のプロパティを含めることができます。
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を追加し、戻る前にフラッシュを呼び出します。
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 、axiomにログを送信しないことを意味します。たとえば、デバッグログを除くすべてのログを公理に送信するには：
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から始まるアプリルーターをサポートするために切り替えました。次のAxiom v0.xを備えたページルーターアプリをアプリルーターにアップグレードする場合は、次の変更を行う必要があります。
NEXT_PUBLIC_プレフィックスがあることを確認してください。例： NEXT_PUBLIC_AXIOM_TOKENlogプロップの代わりにクライアントコンポーネントでuseLoggerフックを使用するLoggerのインスタンスを作成し、ログをフラッシュする必要があります。reportWebVitals()を削除し、代わりにレイアウトにAxiomWebVitalsコンポーネントを追加します。 Axiom Vercel Integrationは、 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ライセンスの下で配布されます。
