next axiom

Следующая ось

Axiom разблокирует наблюдаемость в любом масштабе.

Проглатывание с легкостью, храните без ограничений: дата данных Axiom следующего поколения позволяет употреблять петтабиты данных с конечной эффективностью. Журналы кораблей из Kubernetes, AWS, Azure, Google Cloud, DigitaloCean, Nomad и других.
Запрашивайте все, все время: будь то DevOps, Secops или все, запросите все ваши данные независимо от его возраста. Нет предоставления, нет перемещающихся данных от холода/архива к «горячим», и не беспокоиться о медленных запросах. Все ваши данные, все. а время.
Мощные панели мониторинга для непрерывного наблюдения: создайте панель мониторинга для сбора соответствующих запросов и представления информации, которая быстро и легко переварить для вас и вашей команды. Монитонные панели могут быть частными или обмены другими, и являются идеальным способом собрать данные из разных источников.

Для получения дополнительной информации ознакомьтесь с официальной документацией.

Введение

Эта библиотека позволяет отправлять веб -жизнесвязь, а также структурированные журналы из вашего приложения Next.js в Axiom.

Используете маршрутизатор страниц? Используйте версию 0.* , которая продолжает получать исправления безопасности. Вот Readme для 0.x

Предварительные условия

Создать акссох учетной записи.
Создайте набор данных в Axiom, где вы отправляете свои данные.
Создайте токен API в аксиоме с разрешениями для создания, чтения, обновления и удаления наборов данных.
Новое или существующее приложение Next.js.

Установите следующую оси

В вашем терминале перейдите в корневую папку вашего приложения Next.js, а затем запустите npm install --save next-axiom чтобы установить последнюю версию следующей оси.
Добавьте следующие переменные среды в ваше приложение Next.js. Для получения дополнительной информации см. Документацию Vercel.
- NEXT_PUBLIC_AXIOM_DATASET - это имя набора данных Axiom, где вы хотите отправить данные.
- NEXT_PUBLIC_AXIOM_TOKEN - это токен API API, который вы сгенерировали.
В файле next.config.ts , оберните конфигурацию следующего.js в withAxiom :

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

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

Захват запросов на трафик

Чтобы захватить запросы на трафик, создайте файл 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' } ) ;

Обработчики маршрута

Заверните обработчики вашего маршрута в 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 : переопределить уровень журнала для ошибок levale_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 > ;
}

Серверные компоненты

Чтобы отправить журналы из компонентов сервера, добавьте 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 - это настройка по умолчанию. Это означает, что вы отправляете все журналы в Axiom.
info
warn
error означает, что вы отправляете только журналы высочайшего уровня в аксиому.
off означает, что вы не отправляете никаких журналов в аксиому.

Например, отправлять все журналы, кроме журналов отладки в Axiom:

 export NEXT_PUBLIC_AXIOM_LOG_LEVEL=info

Захват ошибки

Чтобы захватить ошибки маршрутизации, используйте механизм обработки ошибок next.js:

Перейдите в папку app .
Создайте файл error.tsx .
Внутри функции компонента добавьте useLogger из следующей оси, чтобы отправить ошибку в аксиому. Например:

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

Обновление до маршрутизатора приложения

Следующая оси переключилась на поддержку маршрутизатора приложения, начиная с версии 1.0. Если вы обновите приложение Router Pages с помощью маршрутизатора приложения следующей оси V0.x, вам нужно будет внести следующие изменения:

Обновление следующей оси до версии 1.0.0 или выше
Убедитесь, что экспортируемые переменные имеют префикс NEXT_PUBLIC_ , например: NEXT_PUBLIC_AXIOM_TOKEN
Используйте useLogger Hook в клиентских компонентах вместо log
Для компонентов на стороне сервера вам нужно будет создать экземпляр Logger и промыть журналы, прежде чем компонент возвращается.
Для веб-виталов удалите 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 }}