next axiom

ต่อไป

Axiom ปลดล็อคการสังเกตในทุกระดับ

• กินได้อย่างง่ายดายจัดเก็บโดยไม่มีขีด จำกัด : ที่เก็บข้อมูลรุ่นต่อไปของ Axiom ช่วยให้การบริโภคข้อมูล petabytes ด้วยประสิทธิภาพสูงสุด จัดส่งบันทึกจาก Kubernetes, AWS, Azure, Google Cloud, DigitalOcean, Nomad และอื่น ๆ
• สอบถามทุกอย่างตลอดเวลา: ไม่ว่าจะเป็น DevOps, Secops หรือทุกสิ่งที่ต้องการสอบถามข้อมูลทั้งหมดของคุณไม่ว่าจะอายุเท่าไหร่ ไม่มีการจัดเตรียมไม่มีข้อมูลที่ย้ายจากความเย็น/เก็บถาวรเป็น "ร้อน" และไม่ต้องกังวลเกี่ยวกับการสืบค้นช้า ข้อมูลทั้งหมดของคุณทั้งหมด . เวลา.
• แดชบอร์ดที่ทรงพลังสำหรับความสามารถในการสังเกตอย่างต่อเนื่อง: สร้างแดชบอร์ดเพื่อรวบรวมข้อความค้นหาที่เกี่ยวข้องและข้อมูลนำเสนอที่ง่ายและง่ายต่อการย่อยสำหรับคุณและทีมงานของคุณ แดชบอร์ดสามารถเก็บไว้เป็นส่วนตัวหรือแบ่งปันกับผู้อื่นและเป็นวิธีที่สมบูรณ์แบบในการรวบรวมข้อมูลจากแหล่งต่าง ๆ

สำหรับข้อมูลเพิ่มเติมตรวจสอบเอกสารอย่างเป็นทางการ

การแนะนำ

ห้องสมุดนี้ช่วยให้คุณสามารถส่ง Web Vitals รวมถึงบันทึกที่มีโครงสร้างจากแอปพลิเคชัน Next.js ไปยัง Axiom

ใช้เราเตอร์หน้า? ใช้เวอร์ชัน 0.* ซึ่งยังคงได้รับแพตช์ความปลอดภัย นี่คือ readme สำหรับ 0.x

ข้อกำหนดเบื้องต้น

• สร้างบัญชี Axiom
• สร้างชุดข้อมูลใน Axiom ที่คุณส่งข้อมูลของคุณ
• สร้างโทเค็น API ในความจริงด้วยสิทธิ์ในการสร้างอ่านอัปเดตและลบชุดข้อมูล
• แอปใหม่หรือ Next.js ใหม่

ติดตั้ง axiom ถัดไป

1. ในเทอร์มินัลของคุณไปที่โฟลเดอร์รูทของแอปถัดไปของคุณจากนั้นเรียกใช้ npm install --save next-axiom เพื่อติดตั้งเวอร์ชันล่าสุดของ AXIOM
2. เพิ่มตัวแปรสภาพแวดล้อมต่อไปนี้ลงในแอปถัดไปของคุณ สำหรับข้อมูลเพิ่มเติมโปรดดูเอกสาร Vercel
   • NEXT_PUBLIC_AXIOM_DATASET เป็นชื่อของชุดข้อมูล Axiom ที่คุณต้องการส่งข้อมูล
   • NEXT_PUBLIC_AXIOM_TOKEN เป็นโทเค็น Axiom API ที่คุณสร้างขึ้น
3. ในไฟล์ next.config.ts ห่อการกำหนดค่า next.js ของคุณใน withAxiom :

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

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

จับคำขอทราฟฟิก

ในการจับคำขอการรับส่งข้อมูลให้สร้างไฟล์ middleware.ts ในโฟลเดอร์รูทของแอป Next.js ของคุณ:

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

เว็บ Vitals

ในการส่ง Web Vitals ไปยัง Axiom ให้เพิ่มส่วนประกอบ AxiomWebVitals จาก 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 จาก 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 จาก axiom ถัดไปไปยังส่วนประกอบของคุณและโทร 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 > ;
}

ระดับบันทึก

ระดับบันทึกกำหนดระดับต่ำสุดของบันทึกที่ส่งไปยัง Axiom เลือกหนึ่งในระดับต่อไปนี้ (จากต่ำสุดไปสูงสุด):

• debug คือการตั้งค่าเริ่มต้น หมายความว่าคุณส่งบันทึกทั้งหมดไปยัง Axiom
• info
• warn
• error หมายความว่าคุณส่งบันทึกระดับสูงสุดไปยัง Axiom เท่านั้น
• off หมายความว่าคุณไม่ส่งบันทึกใด ๆ ไปยัง Axiom

ตัวอย่างเช่นในการส่งบันทึกทั้งหมดยกเว้นบันทึกการดีบักไปยัง Axiom:

 export NEXT_PUBLIC_AXIOM_LOG_LEVEL=info

จับข้อผิดพลาด

ในการจับข้อผิดพลาดในการกำหนดเส้นทางให้ใช้กลไกการจัดการข้อผิดพลาดของ next.js:

1. ไปที่โฟลเดอร์ app
2. สร้างไฟล์ error.tsx
3. ภายในฟังก์ชั่นส่วนประกอบของคุณเพิ่ม useLogger จาก 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 หากคุณกำลังอัพเกรดแอพเราเตอร์หน้าด้วย Axiom V0.x ไปยังเราเตอร์แอพคุณจะต้องทำการเปลี่ยนแปลงต่อไปนี้:

• อัพเกรด AXIOM ถัดไปเป็นเวอร์ชัน 1.0.0 หรือสูงกว่า
• ตรวจสอบให้แน่ใจว่าตัวแปรที่ส่งออกมีคำนำหน้า NEXT_PUBLIC_ เช่น: NEXT_PUBLIC_AXIOM_TOKEN
• ใช้ useLogger hook ในส่วนประกอบไคลเอนต์แทน log prop
• สำหรับส่วนประกอบด้านเซิร์ฟเวอร์คุณจะต้องสร้างอินสแตนซ์ของ Logger และล้างบันทึกก่อนที่ส่วนประกอบจะส่งคืน
• สำหรับ Vitals Web-Vitals ให้ลบ reportWebVitals() และแทนที่จะเพิ่มส่วนประกอบ AxiomWebVitals ลงในเค้าโครงของคุณ

คำถามที่พบบ่อย

ฉันจะส่งบันทึกจากการปรับใช้ตัวอย่าง Vercel ได้อย่างไร

การรวม 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