Download next axiom - Unduh Kode Sumber next axiom

AXIOM BERIKUTNYA

Axiom membuka kemampuan observasi pada skala apa pun.

Digerikan dengan mudah, simpan tanpa batas: Datastore generasi berikutnya Axiom memungkinkan menelan Petabyte data dengan efisiensi tertinggi. Kapal log dari Kubernetes, AWS, Azure, Google Cloud, Digitalocean, Nomad, dan lainnya.
Permintaan semuanya, sepanjang waktu: apakah DevOps, SecOps, atau Everythingops, meminta semua data Anda terlepas dari usianya. Tidak ada penyediaan, tidak ada data yang bergerak dari dingin/arsip ke "panas", dan tidak khawatir tentang pertanyaan lambat. Semua data Anda, semuanya. itu. waktu.
Dasbor yang kuat, untuk observabilitas berkelanjutan: Bangun dasbor untuk mengumpulkan kueri terkait dan menyajikan informasi yang cepat dan mudah dicerna untuk Anda dan tim Anda. Dasbor dapat dijaga pribadi atau dibagikan dengan orang lain, dan merupakan cara sempurna untuk menyatukan data dari berbagai sumber.

Untuk informasi lebih lanjut, lihat dokumentasi resmi.

Perkenalan

Perpustakaan ini memungkinkan Anda untuk mengirim vital web serta log terstruktur dari aplikasi berikutnya.js Anda ke Axioma.

Menggunakan router halaman? Gunakan versi 0.* yang terus menerima tambalan keamanan. Inilah readme untuk 0.x

Prasyarat

Buat akun aksioma.
Buat dataset di Axiom di mana Anda mengirim data.
Buat token API di Axioma dengan izin untuk membuat, membaca, memperbarui, dan menghapus kumpulan data.
Aplikasi Next.js yang baru atau yang sudah ada.

Instal Next-Axiom

Di terminal Anda, buka folder root dari aplikasi Next.js Anda, dan kemudian jalankan npm install --save next-axiom untuk menginstal versi terbaru AXIOM.
Tambahkan variabel lingkungan berikut ke aplikasi Next.js Anda. Untuk informasi lebih lanjut, lihat dokumentasi Vercel.
- NEXT_PUBLIC_AXIOM_DATASET adalah nama dataset Axiom di mana Anda ingin mengirim data.
- NEXT_PUBLIC_AXIOM_TOKEN adalah token API Axiom yang telah Anda hasilkan.
Di file next.config.ts , bungkus konfigurasi selanjutnya.js Anda di withAxiom :

 const { withAxiom } = require ( 'next-axiom' ) ;

module . exports = withAxiom ( {
  // Your existing configuration.
} ) ;

Menangkap permintaan lalu lintas

Untuk menangkap permintaan lalu lintas, buat file middleware.ts di folder root aplikasi selanjutnya.js Anda:

 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 menerima objek konfigurasi sebagai argumen kedua. Objek ini dapat berisi properti berikut:

logRequestDetails : menerima boolean atau serangkaian kunci. Jika Anda lulus true , itu akan menambahkan semua detail permintaan ke log (metode, url, header, dll.). Jika Anda melewati serangkaian string, itu hanya akan menambahkan kunci yang ditentukan. Lihat Permintaan dan NexTrequest untuk dokumentasi pada tombol yang tersedia. Jika logRequestDetails diaktifkan, fungsi akan mengembalikan janji yang perlu ditunggu.

 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 ( ) ;
}

Vital Web

Untuk mengirim vital web ke Axioma, tambahkan komponen AxiomWebVitals dari AXIOM NEXTAN ke file app/layout.tsx :

 import { AxiomWebVitals } from 'next-axiom' ;

export default function RootLayout ( ) {
  return (
    < html >
      ...
      < AxiomWebVitals / >
      < div > ... < / div >
    < / html >
  ) ;
}

Vital web hanya dikirim dari penyebaran produksi.

Log

Kirim log ke aksioma dari berbagai bagian aplikasi Anda. Setiap panggilan fungsi log mengambil pesan dan objek fields opsional.

 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' } ) ;

Penangan rute

Bungkus penangan rute Anda di withAxiom untuk menambahkan logger ke permintaan Anda dan pengecualian log secara otomatis:

 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' } ) ;
} ) ;

Penangan rute menerima objek konfigurasi sebagai argumen kedua. Objek ini dapat berisi properti berikut:

logRequestDetails : menerima boolean atau serangkaian kunci. Jika Anda lulus true , itu akan menambahkan semua detail permintaan ke log (metode, url, header, dll.). Jika Anda melewati serangkaian string, itu hanya akan menambahkan kunci yang ditentukan. Lihat Permintaan dan NexTrequest untuk dokumentasi pada tombol yang tersedia.
NotFoundLogLevel : angkanya level log untuk kesalahan not_found. Default untuk warn .
RedirectLogLevel : angkanya level log untuk kesalahan next_redirect. Default ke info .

Contoh konfigurasi:

 export const GET = withAxiom (
  async ( ) => {
    return new Response ( "Hello World!" ) ;
  } ,
  { 
    logRequestDetails : [ 'body' , 'nextUrl' ] , // { logRequestDetails: true } is also valid
    NotFoundLogLevel : 'error' ,
    RedirectLogLevel : 'debug' ,
  }
) ;

Komponen klien

Untuk mengirim log dari komponen klien, tambahkan useLogger dari axiom berikutnya ke komponen Anda:

 '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 > ;
}

Komponen server

Untuk mengirim log dari komponen server, tambahkan Logger dari axiom berikutnya ke komponen Anda, dan hubungi flush sebelum kembali:

 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 > ;
}

Level log

Level log mendefinisikan tingkat log terendah yang dikirim ke aksioma. Pilih salah satu level berikut (dari terendah ke tertinggi):

debug adalah pengaturan default. Ini berarti Anda mengirim semua log ke aksioma.
info
warn
error berarti Anda hanya mengirim log tingkat tertinggi ke aksioma.
off berarti Anda tidak mengirim log ke aksioma.

Misalnya, untuk mengirim semua log kecuali untuk log debug ke aksioma:

 export NEXT_PUBLIC_AXIOM_LOG_LEVEL=info

Penangkapan Kesalahan

Untuk menangkap kesalahan perutean, gunakan mekanisme penanganan kesalahan Next.js:

Buka folder app .
Buat file error.tsx .
Di dalam fungsi komponen Anda, tambahkan useLogger dari AXIOM berikutnya untuk mengirim kesalahan ke aksioma. Misalnya:

 "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 >
  ) ;
}

Tingkatkan ke router aplikasi

AXIOM Berikutnya beralih untuk mendukung router aplikasi yang dimulai dengan versi 1.0. Jika Anda memutakhirkan aplikasi router halaman dengan AXIOM V0.X berikutnya ke router aplikasi, Anda perlu membuat perubahan berikut:

Tingkatkan AXIOM Berikutnya ke Versi 1.0.0 atau lebih tinggi
Pastikan bahwa variabel yang diekspor memiliki awalan NEXT_PUBLIC_ , misalnya: NEXT_PUBLIC_AXIOM_TOKEN
Gunakan hook useLogger di komponen klien alih -alih prop log
Untuk komponen sisi server, Anda perlu membuat instance Logger dan menyiram log sebelum komponen kembali.
Untuk vital web, hapus reportWebVitals() dan sebaliknya tambahkan komponen AxiomWebVitals ke tata letak Anda.

FAQ

Bagaimana cara mengirim log dari penyebaran pratinjau Vercel?

Integrasi Axiom Vercel mengatur variabel lingkungan yang disebut NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT , yang secara default hanya diaktifkan untuk lingkungan produksi. Untuk mengirim log dari penyebaran pratinjau, buka pengaturan situs Anda di Vercel dan aktifkan penyebaran pratinjau untuk variabel lingkungan tersebut.

Bagaimana cara memperluas logger?

Anda dapat menggunakan log.with untuk membuat logger menengah, misalnya:

 const logger = userLogger ( ) . with ( { userId : 42 } ) ;
logger . info ( 'Hi' ) ; // will ingest { ..., "message": "Hi", "fields" { "userId": 42 }}