@ 浏览器- echo/ 核心

用于将浏览器控制台日志流到您的 Dev 终端的核心客户端功能.

这个软件包提供了 initBrowserEcho 补丁的函数 console.* 方法和向开发服务器端点转发日志。 它被特定框架提供者用作依赖.

目录

• 安装
• 使用量
• 安装 MCP 服务器

特征

• 覆盖的滴入客户端补丁 console.log/info/warn/error/debug
• 批发 HTTP 请求( 使用) sendBeacon (如果有的话)
• 来源提示 (file:line:col) + 堆栈跟踪
• 可配置日志级别和分批
• 记录对象中的循环参考处理
• 无生产影响(仅指发展)
• 可选网络抓取( opt- in): 抓取, XMLHttp Request, WebSocket

安装

npm install -D @browser-echo/core
# or
pnpm add -D @browser-echo/core

使用量

import { initBrowserEcho } from '@browser-echo/core';

// Initialize with default options
initBrowserEcho();

// Or customize the behavior
initBrowserEcho({
  route: '/__client-logs',
  include: ['warn', 'error'],
  preserveConsole: true,
  tag: '[browser]',
  batch: { size: 20, interval: 300 },
  stackMode: 'condensed',
  // Opt-in network logging
  networkLogs: {
    enabled: true,
    captureFull: false,
    bodies: {
      request: true,
      response: true,
      maxBytes: 2048,
      allowContentTypes: ['application/json', 'text/', 'application/x-www-form-urlencoded'],
      prettyJson: true
    }
  }
});

选项

大多数提供者接受这些选项(名称可能作为插件选项或组件道具出现):

type BrowserLogLevel = 'log' | 'info' | 'warn' | 'error' | 'debug';

interface BrowserEchoOptions {
  enabled?: boolean;                 // default: true (dev only)
  route?: `/${string}`;              // default: '/api/client-logs' (Next), '/__client-logs' (others)
  include?: BrowserLogLevel[];       // default: ['log','info','warn','error','debug']
  preserveConsole?: boolean;         // default: true (also keep logging in the browser)
  tag?: string;                      // default: '[browser]'
  // stacks
  stackMode?: 'none' | 'condensed' | 'full'; // default: 'full' (provider-specific; Vite supports all)
  showSource?: boolean;              // default: true (when available)
  // batching
  batch?: { size?: number; interval?: number }; // default: 20 / 300ms
  // server-side
  truncate?: number;                 // default: 10_000 chars (Vite)
  fileLog?: { enabled?: boolean; dir?: string }; // Vite-only
  // network capture (opt-in)
  networkLogs?: {
    enabled?: boolean;
    captureFull?: boolean;
    bodies?: {
      request?: boolean;
      response?: boolean;
      maxBytes?: number;                       // default 2048 bytes
      allowContentTypes?: string[];            // default ['application/json','text/','application/x-www-form-urlencoded']
      prettyJson?: boolean;                    // default true
    };
  }; // default disabled
}

注:文件记录和 truncate 正在 Vite 插件的 Dev 服务器中间软件中执行 。 Nuxt/ Next 提供者默认打印到 stdout( 如果您需要文件输出, 您可以扩展它们) .

框架提供者

这个核心包一般通过特定框架的提供者使用:

• @ 浏览器- echo/ vite - 用于基于Vite的项目(反应、Vue、TanStack Start)
• @ 浏览器- echo/ next - 为Next.js App路由器
• @ 浏览器- echo/ nuxt - 为纳克特3/4
• @ 浏览器- echo/ 反应 - 反应(非声音)
• @ 浏览器- echo/ vue - 为Vue(非Vite)

见 主要仓库 为完整的设置向导.

安装 MCP 服务器

对于核心使用,MCP转发取决于您的服务器侧路由执行. 核心包只处理浏览器-侧日志收藏.

📖 首先,设置 MCP 服务器 ,然后配置下面的框架选项.

环境变量

• BROWSER_ECHO_MCP_URL=http://127.0.0.1:5179/mcp ——在服务器环境中设置
• BROWSER_ECHO_SUPPRESS_TERMINAL=1 控制终端输出于您的路由处理器

服务器路由 MCP 一体化

见 反应 MCP 设置 用于使用 MCP 转发的服务器路由.

作者

凯文克恩

许可证

麻省理工学院

链接

• 主仓库
• 文档