# @eddydesk/react 中文文档

规范地址：https://npmcn.com/package/%40eddydesk/react/

版本：0\.13\.9
npm 元数据更新时间：2026-09-26T17:47:27.089Z
中文译文更新时间：2026-11-13T06:25:38.223Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40eddydesk/react
原文对照：https://npmcn.com/package/%40eddydesk/react/?lang=original
项目主页：https://github.com/Bear-Eddy/eddydesk#readme
源码仓库：https://github.com/Bear-Eddy/eddydesk

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.9 MB，6 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2026-04-30T19:16:40.244Z
- 最新版本发布：2026-09-26T17:47:26.927Z
- 近 30 天下载量：4626（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 16 个）

## 中文简介

埃迪德斯克语Name 对 Web 应用程序进行响应组件

## 安装

```sh
npm install @eddydesk/react
```

也可以使用：`pnpm add @eddydesk/react`、`yarn add @eddydesk/react`、`bun add @eddydesk/react`

## README

# @eddydesk/反应

将 EddyDesk QA 集成到您的网络应用程序中的响应组件 .

## 安装

```bash
npm install @eddydesk/react
```

## 快速启动

### 1\. 用EddyDesk Provider包装您的应用程序

```tsx
import { EddyDeskProvider, EddyDeskPanel } from '@eddydesk/react';

function App() {
  return (
    <EddyDeskProvider
      config={{
        projectId: 'your-project-id', // Get this from EddyDesk dashboard
        getCurrentUser: async () => {
          // Return your logged-in user's info
          const user = await yourAuthMethod();
          if (!user) return null;
          return {
            id: user.id,
            email: user.email, // Must match email in EddyDesk testers list
            name: user.name,   // Optional, shown on reports
          };
        },
      }}
    >
      <YourApp />
      <EddyDeskPanel />
    </EddyDeskProvider>
  );
}
```

### 2\. 在EddyDesk仪表板上添加测试器

该部件只用于您的 EddyDesk 项目中注册为测试器的电子邮件用户 .

## 配置选项

```tsx
<EddyDeskProvider
  config={{
    // Required
    projectId: 'your-project-id',
    getCurrentUser: async () => ({ id: user.id, email: user.email }),

    // Optional — rich context for bug reports
    getAppContext: () => ({
      currentRoute: window.location.pathname,
      userRole: currentUser?.role,       // 'owner', 'manager', 'guest', etc.
      propertyId: currentProperty?.id,   // App-specific context
      custom: { theme: 'dark' },         // Any additional data
    }),

    // Optional — callbacks
    onNavigate: (route) => router.push(route),  // Deep linking from test cases
    onReportSubmitted: (report) => { ... },      // After report submission

    // Optional — self-hosted
    supabaseUrl: '...',
    supabaseAnonKey: '...',
  }}
  enabled={isAuthReady} // Delay init until auth is ready (default: true)
>
```

### 为什么用 `getAppContext`? 吗?

当测试者报告出错误时,EddyDesk会将应用上下文附在报告上. 这告诉开发者修复错误:

-   **哪条路线** 窃听器已打开(自动抓取,但 `getAppContext` 更准确)
-   **什么样的角色** 用户有( 对角色依赖错误至关重要)
-   **App 特定状态** 如所选属性、活动过滤器等.

无 `getAppContext`, EddyDesk 仍然自动捕捉路线 `window.location.pathname`。 。 。 .

## 自动上下文抓取

EddyDesk Provider 自动捕获零配置的调试上下文 :

| 数据 | 细节 |
| --- | --- |
| **控制台日志** | 倒数 50 `console.log/warn/error/info` 电话 |
| **网络请求** | 最后20个 `fetch()` 有方法、 URL、 状态、 持续时间的呼叫 |
| **失败的应对机构** | 4xx/5xxx响应机构的首个500个字符 |
| **导航历史** | 最后20条路由更改(自动跟踪通过) `pushState`编号 :`popstate`(中文(简体) ) |
| **业绩** | 页面加载时间、内存使用 |
| **环境** | 语言、时区、在线状态 |

此数据附于每一份错误报告并提供给 MCP 服务器 `get_report_context` 用于AI辅助调试的工具.

## 构成部分

### 爱迪德斯克提供商

包装您的应用程序, 并为 EddyDesk 组件提供上下文 。 自动启动上下文抓取 .

### 爱迪德斯克小组

浮动部件 UI 。 创建打开错误报告面板的按钮.

```tsx
<EddyDeskPanel
  position="bottom-right" // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
/>
```

错误报告表包括:

-   报告类型(Bug、反馈、思想)
-   严重性选择器( 对于错误)
-   说明
-   **"它在哪里发生的?"** ——如果与当前页面不同,让测试者指定受影响的路径
-   截图附件

### EddyDesk 边界错误

自动捕捉回放错误,并提议报告.

```tsx
import { EddyDeskErrorBoundary } from '@eddydesk/react';

<EddyDeskErrorBoundary>
  <YourComponent />
</EddyDeskErrorBoundary>
```

## 钩子

### 使用 EddyDesk 数据

从任何组件访问 EddyDesk 状态和方法 .

```tsx
import { useEddyDesk } from '@eddydesk/react';

function MyComponent() {
  const {
    client,           // EddyDesk client instance
    isTester,         // Is current user a tester?
    isQAEnabled,      // Is QA mode enabled for this project?
    shouldShowWidget, // Should the widget be visible?
    testerInfo,       // Current tester's info
    assignments,      // Test cases assigned to this tester
    issueCounts,      // { open, done, reopened } issue counts
    refreshIssueCounts, // Refresh issue counts
    isLoading,        // Loading state
  } = useEddyDesk();

  // Submit a report programmatically
  const handleReport = async () => {
    await client?.submitReport({
      type: 'bug',
      description: 'Something went wrong',
      severity: 'high',
      appContext: client.getAppContext(),
    });
  };
}
```

## 部件屏幕

部件包括用于错误报告、测试执行、消息和问题跟踪的屏幕:

| 屏幕 | 目的 |
| --- | --- |
| **内容** | 智能英雄+动作网格+发行跟踪卡(打开,完成,再打开) |
| **测试列表** | 带有过滤标签的任务( 所有、 待办、 完成、 再打开) |
| **测试细节** | 逐步执行测试 |
| **报告** | 错误/反馈提交 |
| **议题清单** | 按类别筛选的问题和严重程度指标 |
| **问题详情** | 附有验证证明和原始错误上下文的完整发行细节 |
| **信件列表** | 未读徽章的线索列表 |
| **线索细节** | 以回覆聊天线索 |
| **撰写信件** | 新消息线索 |
| **简介** | 测试者信息和数据 |

## 如何运作

1.  **用户日志在** 给您的应用程序
2.  **EddyDesk 检查** 如果用户的电子邮件在测试者列表中
3.  **开始上下文捕捉** ——记录控制台日志,网络请求和导航
4.  **部件出现** 仅在启用 QA 模式时用于注册测试器
5.  **测试者提交** 带有自动调试上下文的错误报告
6.  **测试者跟踪问题** — 打开, 完成( 有验证证明) , 重新打开家用屏幕上的卡片
7.  **报告出现** 在您的 EddyDesk 仪表板中, 包含开发者的完整上下文

## 示例: Next.js App 路由器

```tsx
// app/providers.tsx
'use client';

import { EddyDeskProvider, EddyDeskPanel } from '@eddydesk/react';
import { useAuth } from './auth'; // Your auth hook

export function Providers({ children }) {
  const { user, isLoaded } = useAuth();

  return (
    <EddyDeskProvider
      config={{
        projectId: process.env.NEXT_PUBLIC_EDDYDESK_PROJECT_ID!,
        getCurrentUser: async () => {
          if (!user) return null;
          return { id: user.id, email: user.email, name: user.name };
        },
        getAppContext: () => ({
          currentRoute: window.location.pathname,
          userRole: user?.role,
        }),
      }}
      enabled={isLoaded} // Wait for auth before initializing
    >
      {children}
      <EddyDeskPanel />
    </EddyDeskProvider>
  );
}

// next.config.ts — required for Next.js
const config = {
  transpilePackages: ['@eddydesk/core', '@eddydesk/react'],
};
```

## 支助

-   GitHub : (中文(简体) ) [https://github.com/Bear-Eddy/eddydesk 页面存档备份,存于互联网档案馆](https://github.com/Bear-Eddy/eddydesk)

## 常见问题

### @eddydesk/react 是什么？

埃迪德斯克语Name 对 Web 应用程序进行响应组件

### 如何安装 @eddydesk/react？

在项目目录运行 npm install @eddydesk/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @eddydesk/react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @eddydesk/react 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @eddydesk/react 可以商用吗？

@eddydesk/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @eddydesk/react 的下载量有多少？

根据 npm 官方下载统计，@eddydesk/react 在 2026/10/13 – 2026/11/11 这 30 天内被下载 4,626 次，日均约 154 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @eddydesk/react 还在维护吗？

最新版本 0\.13\.9 发布于 2026/09/27（1 个月前）；至今共发布 16 个版本，其中过去 12 个月发布了 16 个；首次发布于 2026/05/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。