@eddydesk/反应
将 EddyDesk QA 集成到您的网络应用程序中的响应组件 .
安装
npm install @eddydesk/react
快速启动
1. 用EddyDesk Provider包装您的应用程序
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 项目中注册为测试器的电子邮件用户 .
配置选项
<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 。 创建打开错误报告面板的按钮.
<EddyDeskPanel
position="bottom-right" // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
/>
错误报告表包括:
- 报告类型(Bug、反馈、思想)
- 严重性选择器( 对于错误)
- 说明
- "它在哪里发生的?" ——如果与当前页面不同,让测试者指定受影响的路径
- 截图附件
EddyDesk 边界错误
自动捕捉回放错误,并提议报告.
import { EddyDeskErrorBoundary } from '@eddydesk/react';
<EddyDeskErrorBoundary>
<YourComponent />
</EddyDeskErrorBoundary>
钩子
使用 EddyDesk 数据
从任何组件访问 EddyDesk 状态和方法 .
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(),
});
};
}
部件屏幕
部件包括用于错误报告、测试执行、消息和问题跟踪的屏幕:
| 屏幕 | 目的 |
|---|---|
| 内容 | 智能英雄+动作网格+发行跟踪卡(打开,完成,再打开) |
| 测试列表 | 带有过滤标签的任务( 所有、 待办、 完成、 再打开) |
| 测试细节 | 逐步执行测试 |
| 报告 | 错误/反馈提交 |
| 议题清单 | 按类别筛选的问题和严重程度指标 |
| 问题详情 | 附有验证证明和原始错误上下文的完整发行细节 |
| 信件列表 | 未读徽章的线索列表 |
| 线索细节 | 以回覆聊天线索 |
| 撰写信件 | 新消息线索 |
| 简介 | 测试者信息和数据 |
如何运作
- 用户日志在 给您的应用程序
- EddyDesk 检查 如果用户的电子邮件在测试者列表中
- 开始上下文捕捉 ——记录控制台日志,网络请求和导航
- 部件出现 仅在启用 QA 模式时用于注册测试器
- 测试者提交 带有自动调试上下文的错误报告
- 测试者跟踪问题 — 打开, 完成( 有验证证明) , 重新打开家用屏幕上的卡片
- 报告出现 在您的 EddyDesk 仪表板中, 包含开发者的完整上下文
示例: Next.js App 路由器
// 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 页面存档备份,存于互联网档案馆