Next-Axiom 使用指南

Next-Axiom 使用指南

next-axiom The official Next.js library for Axiom. 项目地址: https://gitcode.com/gh_mirrors/ne/next-axiom

项目介绍

Next-Axiom 是一个专为 Next.js 应用设计的官方库，它允许开发者轻松地将 Web Vitals 数据及结构化日志发送到 Axiom 平台。Axiom 是一个观测性基础设施，旨在以任意规模实现数据摄入，并提供无限制的数据存储能力，支持从如 Kubernetes、AWS、Azure 等多个来源捕获日志，同时提供强大的查询功能和可视化界面，帮助进行持续的观测分析。

项目快速启动

安装与配置

首先，确保你有一个 Next.js 应用。在你的项目根目录下运行以下命令安装 Next-Axiom：

npm install --save next-axiom

接着，你需要设置两个环境变量以连接到 Axiom：

• NEXT_PUBLIC_AXIOM_DATASET: 在 Axiom 创建的接收数据的数据集名称。
• NEXT_PUBLIC_AXIOM_TOKEN: 具有读写权限的 Axiom API Token。

可以通过创建或修改 .env.local 文件来添加这些变量（确保它们不在版本控制系统中）:

NEXT_PUBLIC_AXIOM_DATASET=myDatasetName
NEXT_PUBLIC_AXIOM_TOKEN=yourTokenHere

然后，在 next.config.js 中集成 Next-Axiom:

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

module.exports = withAxiom({
  // 你的其他配置项...
})

示例：发送 Web Vitals

在 pages/_app.js 或 pages/_app.tsx 中引入 AxiomWebVitals 组件来自动发送生产环境中的 Web Vitals 数据：

import { AxiomWebVitals } from 'next-axiom'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <AxiomWebVitals />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

发送日志示例

在你的应用中的任何地方使用日志记录功能：

// 服务端日志
import { Logger } from 'next-axiom'
export default async function ServerSideLogging() {
  const log = new Logger()
  log.info('Server-side action logged')
  await log.flush()
}

// 客户端日志
import { useLogger } from 'next-axiom'

export default function ClientSideLogging() {
  const log = useLogger()
  log.debug('Client-side action logged')
}

应用案例和最佳实践

最佳实践: 在每个中间件、路由处理程序和关键组件中使用日志记录，确保覆盖重要的业务逻辑和用户交互。通过设置不同的日志级别 (debug, info, warn, error)，你可以精确控制发送到 Axiom 的日志详细程度。

应用案例: 监控性能指标，比如通过 AxiomWebVitals 自动收集用户访问时的页面加载时间，以及在关键业务流程中添加日志点，例如登录、支付确认等，以追踪异常并优化用户体验。

典型生态项目

虽然直接提到的“典型生态项目”信息没有在提供的材料中明确指出，但可以理解，Next-Axiom自身就是与Next.js生态系统紧密结合的产品。它可以与各种观测性工具和分析平台一起使用，特别是在使用Next.js构建的现代web应用程序中。对于那些已经采用或者计划采用Axiom作为其观测性解决方案的团队来说，Next-Axiom成了不可或缺的一部分，它简化了Next.js应用与Axiom的集成过程，促进了与Kubernetes、云提供商等基础设施的日志集成，以及与其他监控和分析工具（尽管具体哪些工具并未在给定资料内列出）的潜在协同工作能力。

---

以上内容提供了基于Next-Axiom的基本使用方法和一些概念上的指导。实践中，随着对Axiom平台更深入的探索，可能会发现更多结合特定工具和技术的最佳实践场景。

next-axiom The official Next.js library for Axiom. 项目地址: https://gitcode.com/gh_mirrors/ne/next-axiom