---
title: "框架集成"
description: "为 Nuxt、Next.js、SvelteKit、Hono、Express 或其他列出的框架选择 evlog 集成。按照其设置和请求日志器访问指南操作。"
canonical_url: "https://evlog.zhcndoc.com/integrate/frameworks/overview"
---
# 框架集成

> 为 Nuxt、Next.js、SvelteKit、Hono、Express 或其他列出的框架选择 evlog 集成。按照其设置和请求日志器访问指南操作。

从下表中选择你的框架。`log.set()`、`createError()` 和 `parseError()` 使用相同的核心 API，而初始化和请求日志器访问取决于具体集成。一些技术栈提供模块或中间件，其他技术栈则需要按照其指南中的手动设置进行配置。

每个框架都从同一个 [`evlog.config.ts`](https://evlog.zhcndoc.com/reference/configuration) 读取选项。Nuxt、Nitro 和 TanStack Start 会自动加载它；其他框架需要导入它。

<callout color="neutral" icon="i-lucide-globe">

没有 HTTP 框架？对于脚本、库和 worker，请使用 [Standalone TypeScript](https://evlog.zhcndoc.com/integrate/frameworks/standalone)；在边缘环境中请使用 [Cloudflare Workers](https://evlog.zhcndoc.com/integrate/frameworks/cloudflare-workers)。

</callout>

## 选择你的框架

<table>
<thead>
  <tr>
    <th>
      框架
    </th>
    
    <th>
      导入
    </th>
    
    <th>
      类型
    </th>
    
    <th>
      日志器访问
    </th>
    
    <th>
      状态
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/nuxt">
        Nuxt
      </a>
    </td>
    
    <td>
      <code>
        evlog/nuxt
      </code>
    </td>
    
    <td>
      模块
    </td>
    
    <td>
      <code>
        useLogger(event)
      </code>
    </td>
    
    <td>
      稳定
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/nextjs">
        Next.js
      </a>
    </td>
    
    <td>
      <code>
        evlog/next
      </code>
    </td>
    
    <td>
      工厂
    </td>
    
    <td>
      <code>
        useLogger()
      </code>
    </td>
    
    <td>
      稳定
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/sveltekit">
        SvelteKit
      </a>
    </td>
    
    <td>
      <code>
        evlog/sveltekit
      </code>
    </td>
    
    <td>
      钩子
    </td>
    
    <td>
      <code>
        event.locals.log
      </code>
      
       / <code>
        useLogger()
      </code>
    </td>
    
    <td>
      稳定
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/nitro">
        Nitro
      </a>
    </td>
    
    <td>
      <code>
        evlog/nitro
      </code>
    </td>
    
    <td>
      模块
    </td>
    
    <td>
      <code>
        useLogger(event)
      </code>
    </td>
    
    <td>
      稳定
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/tanstack-start">
        TanStack Start
      </a>
    </td>
    
    <td>
      <code>
        evlog/nitro/v3
      </code>
    </td>
    
    <td>
      模块
    </td>
    
    <td>
      <code>
        useRequest().context.log
      </code>
    </td>
    
    <td>
      稳定
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/tanstack-start">
        TanStack Router
      </a>
    </td>
    
    <td>
      <code>
        evlog/nitro/v3
      </code>
    </td>
    
    <td>
      模块
    </td>
    
    <td>
      通过 TanStack Start（使用 Nitro v3）
    </td>
    
    <td>
      稳定
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/react-router">
        React Router
      </a>
    </td>
    
    <td>
      <code>
        evlog/react-router
      </code>
    </td>
    
    <td>
      中间件
    </td>
    
    <td>
      <code>
        context.get(loggerContext)
      </code>
      
       / <code>
        useLogger()
      </code>
    </td>
    
    <td>
      稳定
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/nestjs">
        NestJS
      </a>
    </td>
    
    <td>
      <code>
        evlog/nestjs
      </code>
    </td>
    
    <td>
      模块
    </td>
    
    <td>
      <code>
        useLogger()
      </code>
    </td>
    
    <td>
      稳定
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/express">
        Express
      </a>
    </td>
    
    <td>
      <code>
        evlog/express
      </code>
    </td>
    
    <td>
      中间件
    </td>
    
    <td>
      <code>
        req.log
      </code>
      
       / <code>
        useLogger()
      </code>
    </td>
    
    <td>
      稳定
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/hono">
        Hono
      </a>
    </td>
    
    <td>
      <code>
        evlog/hono
      </code>
    </td>
    
    <td>
      中间件
    </td>
    
    <td>
      <code>
        c.get('log')
      </code>
      
       / <code>
        useLogger()
      </code>
    </td>
    
    <td>
      稳定
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/fastify">
        Fastify
      </a>
    </td>
    
    <td>
      <code>
        evlog/fastify
      </code>
    </td>
    
    <td>
      插件
    </td>
    
    <td>
      <code>
        request.log
      </code>
      
       / <code>
        useLogger()
      </code>
    </td>
    
    <td>
      稳定
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/elysia">
        Elysia
      </a>
    </td>
    
    <td>
      <code>
        evlog/elysia
      </code>
    </td>
    
    <td>
      插件
    </td>
    
    <td>
      <code>
        log
      </code>
      
      （上下文）/ <code>
        useLogger()
      </code>
    </td>
    
    <td>
      稳定
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/orpc">
        oRPC
      </a>
    </td>
    
    <td>
      <code>
        evlog/orpc
      </code>
    </td>
    
    <td>
      处理器包装器 + 中间件
    </td>
    
    <td>
      <code>
        context.log
      </code>
      
       / <code>
        useLogger()
      </code>
    </td>
    
    <td>
      稳定
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/cloudflare-workers">
        Cloudflare Workers
      </a>
    </td>
    
    <td>
      <code>
        evlog/workers
      </code>
    </td>
    
    <td>
      工厂
    </td>
    
    <td>
      <code>
        createWorkersLogger()
      </code>
    </td>
    
    <td>
      稳定
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/aws-lambda">
        AWS Lambda
      </a>
    </td>
    
    <td>
      <code>
        evlog
      </code>
    </td>
    
    <td>
      手动
    </td>
    
    <td>
      <code>
        createLogger()
      </code>
      
       / <code>
        createRequestLogger()
      </code>
    </td>
    
    <td>
      指南
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/standalone">
        Standalone
      </a>
    </td>
    
    <td>
      <code>
        evlog
      </code>
    </td>
    
    <td>
      手动
    </td>
    
    <td>
      <code>
        createLogger()
      </code>
      
       / <code>
        createRequestLogger()
      </code>
    </td>
    
    <td>
      稳定
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/integrate/frameworks/astro">
        Astro
      </a>
    </td>
    
    <td>
      <code>
        evlog
      </code>
    </td>
    
    <td>
      手动
    </td>
    
    <td>
      <code>
        createRequestLogger()
      </code>
    </td>
    
    <td>
      指南
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://evlog.zhcndoc.com/extend/custom-framework">
        Custom
      </a>
    </td>
    
    <td>
      <code>
        evlog/toolkit
      </code>
    </td>
    
    <td>
      自行构建
    </td>
    
    <td>
      <code>
        createMiddlewareLogger()
      </code>
    </td>
    
    <td>
      Beta
    </td>
  </tr>
</tbody>
</table>

## 不同框架之间的差异

每个框架有两点不同：如何启动 evlog，以及处理器如何获取请求日志器。

### 启动 evlog

<table>
<thead>
  <tr>
    <th>
      模式
    </th>
    
    <th>
      框架
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        evlog(options)
      </code>
      
       中间件 / 插件
    </td>
    
    <td>
      Hono、Express、Fastify、Elysia、SvelteKit、React Router
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        createEvlog(options)
      </code>
      
       工厂
    </td>
    
    <td>
      Next.js
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        EvlogModule.forRoot()
      </code>
    </td>
    
    <td>
      NestJS
    </td>
  </tr>
  
  <tr>
    <td>
      模块默认导出
    </td>
    
    <td>
      Nuxt、Nitro v2/v3
    </td>
  </tr>
  
  <tr>
    <td>
      手动工厂
    </td>
    
    <td>
      Cloudflare Workers（<code>
        createWorkersLogger
      </code>
      
      ）、Standalone、AWS Lambda、Astro
    </td>
  </tr>
</tbody>
</table>

### 从处理器中获取日志器

<table>
<thead>
  <tr>
    <th>
      模式
    </th>
    
    <th>
      框架
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        useLogger(event)
      </code>
    </td>
    
    <td>
      Nuxt、Nitro
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        useLogger()
      </code>
    </td>
    
    <td>
      Next.js、NestJS、Express、Fastify、Elysia、SvelteKit、React Router、Hono
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        c.get('log')
      </code>
    </td>
    
    <td>
      Hono
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        req.log
      </code>
    </td>
    
    <td>
      Express
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        request.log
      </code>
    </td>
    
    <td>
      Fastify
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        event.locals.log
      </code>
    </td>
    
    <td>
      SvelteKit
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        context.get(loggerContext)
      </code>
    </td>
    
    <td>
      React Router
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        createRequestLogger()
      </code>
      
       / <code>
        createLogger()
      </code>
    </td>
    
    <td>
      Standalone、Workers、手动设置
    </td>
  </tr>
</tbody>
</table>

<callout color="info" icon="i-lucide-info">

在 Hono 中，请在处理器内部使用 `c.get('log')`，并在下层使用来自 `evlog/hono` 的 `useLogger()`。请参阅 [Hono 集成](https://evlog.zhcndoc.com/integrate/frameworks/hono)。

</callout>

## 全栈框架

<card-group>
<card color="neutral" icon="i-simple-icons-nuxtdotjs" title="Nuxt" to="https://evlog.zhcndoc.com/integrate/frameworks/nuxt">

在模块中注册 `evlog/nuxt`，即可获得自动导入的 `useLogger`、`createError` 和 `parseError`。

</card>

<card color="neutral" icon="i-simple-icons-nextdotjs" title="Next.js" to="https://evlog.zhcndoc.com/integrate/frameworks/nextjs">

`createEvlog()` 工厂函数，配合 `withEvlog()` 处理器包装器和客户端提供器使用。

</card>

<card color="neutral" icon="i-simple-icons-svelte" title="SvelteKit" to="https://evlog.zhcndoc.com/integrate/frameworks/sveltekit">

处理函数与错误处理钩子，日志作用域绑定在 `event.locals.log`。

</card>

<card color="neutral" icon="i-custom-nitro" title="Nitro" to="https://evlog.zhcndoc.com/integrate/frameworks/nitro">

适用于 Nitro v2 和 v3 的模块，提供基于插件的排水和增强钩子。

</card>

<card color="neutral" icon="i-custom-tanstack" title="TanStack Start" to="https://evlog.zhcndoc.com/integrate/frameworks/tanstack-start">

使用带有异步上下文的 Nitro v3 模块，因此 `useLogger()` 可以在服务器函数中使用。还涵盖 TanStack Router（全栈模式）。

</card>

<card color="neutral" icon="i-custom-reactrouter" title="React Router" to="https://evlog.zhcndoc.com/integrate/frameworks/react-router">

中间件配合 `context.get(loggerContext)` 和 `useLogger()`，适用于加载器与服务。

</card>

<card color="neutral" icon="i-simple-icons-nestjs" title="NestJS" to="https://evlog.zhcndoc.com/integrate/frameworks/nestjs">

`EvlogModule.forRoot()` 提供全局中间件、异常过滤器与异步配置。

</card>
</card-group>

## 服务端框架

<card-group>
<card color="neutral" icon="i-simple-icons-express" title="Express" to="https://evlog.zhcndoc.com/integrate/frameworks/express">

中间件配合 `req.log` 和四参数错误处理器。

</card>

<card color="neutral" icon="i-simple-icons-hono" title="Hono" to="https://evlog.zhcndoc.com/integrate/frameworks/hono">

中间件配合通过 `EvlogVariables` 实现的类型化 `c.get('log')`。

</card>

<card color="neutral" icon="i-simple-icons-fastify" title="Fastify" to="https://evlog.zhcndoc.com/integrate/frameworks/fastify">

插件形式提供 `request.log`，会遮蔽 Fastify 内置的 pino 日志器。

</card>

<card color="neutral" icon="i-simple-icons-hono" title="Hono" to="https://evlog.zhcndoc.com/frameworks/hono">

中间件配合通过 `EvlogVariables` 实现的类型化 `c.get('log')`。

</card>

<card color="neutral" icon="i-simple-icons-fastify" title="Fastify" to="https://evlog.zhcndoc.com/frameworks/fastify">

插件形式提供 `request.log`，会遮蔽 Fastify 内置的 pino 日志器。

</card>

<card color="neutral" icon="i-custom-elysia" title="Elysia" to="https://evlog.zhcndoc.com/integrate/frameworks/elysia">

插件形式提供 `log`，通过 Elysia 的 `derive` 注入路由上下文。

</card>

<card color="neutral" icon="i-lucide-network" title="oRPC" to="https://evlog.zhcndoc.com/integrate/frameworks/orpc">

处理器包装器 + 过程级中间件，暴露 `context.log` 和每个过程的 `operation`。

</card>

<card color="neutral" icon="i-simple-icons-cloudflare" title="Cloudflare Workers" to="https://evlog.zhcndoc.com/integrate/frameworks/cloudflare-workers">

工厂函数用于创建具有 Cloudflare 上下文的作用域日志记录器。

</card>

<card color="neutral" icon="i-custom-lambda" title="AWS Lambda" to="https://evlog.zhcndoc.com/integrate/frameworks/aws-lambda">

每个运行时执行一次 `initLogger`；每次调用执行 `createLogger`（适用于 SQS、事件、HTTP API）。

</card>

<card color="neutral" icon="i-simple-icons-typescript" title="Standalone" to="https://evlog.zhcndoc.com/integrate/frameworks/standalone">

适用于脚本、CLI 工具、队列以及任意 TypeScript 进程。

</card>

<card color="neutral" icon="i-lucide-puzzle" title="自定义集成" to="https://evlog.zhcndoc.com/extend/custom-framework">

使用 evlog 工具包 API 自行构建中间件。

</card>
</card-group>

<callout color="info" icon="i-lucide-info">

所有框架都支持相同的功能：[wide events](https://evlog.zhcndoc.com/learn/wide-events)、[structured errors](https://evlog.zhcndoc.com/learn/structured-errors)、[drain adapters](https://evlog.zhcndoc.com/integrate/adapters/overview)、[enrichers](https://evlog.zhcndoc.com/use-cases/enrichers)、[sampling](https://evlog.zhcndoc.com/learn/sampling) 以及 [AI SDK integration](https://evlog.zhcndoc.com/use-cases/ai-sdk/overview)。

</callout>

## 在构建时移除客户端日志

对于任何基于 Vite 的项目，[`evlog/vite` 插件](https://evlog.zhcndoc.com/reference/vite-plugin) 都会添加构建时优化：

- **自动初始化**：无需手动调用 `initLogger()`
- **调试剥离**：生产环境中自动移除 `log.debug()`
- **源码位置**：在日志调用中注入 `__source: 'file:line'`

它适用于 SvelteKit、通过 vite-node 使用的 Hono，以及任何由 Vite 驱动的设置。在 Nuxt 中，同样的三个选项位于 `evlog/nuxt` 模块中，因此无需手动添加该插件。


## Sitemap

See the full [sitemap](https://evlog.zhcndoc.com/sitemap.md) for all pages.