@ eddydesk/ react-native (英语)
EddyDesk QA 元件用于 React Industrial 移动应用程序 。 具有一个基于导航-上ack的UI的功能,有10个专用屏幕,用于测试,错误报告,信息传递和配置管理.
安装
npm install @eddydesk/react-native @eddydesk/core
# or
yarn add @eddydesk/react-native @eddydesk/core
可选:图像附件
对于错误报告和信件中的图像附件 :
npm install react-native-image-picker
这是一个可选的对等依赖——部件没有它就能工作,但不会显示取相器按钮.
快速启动
import { EddyDeskProvider, EddyDeskButton } from '@eddydesk/react-native';
function App() {
return (
<EddyDeskProvider
config={{
projectId: 'your-project-id',
dashboardUrl: 'https://app.eddydesk.ai',
getCurrentUser: async () => ({
id: user.id,
email: user.email,
name: user.name, // Optional, shown on reports
}),
}}
>
<YourApp />
<EddyDeskButton position="bottom-right" />
</EddyDeskProvider>
);
}
配置选项
<EddyDeskProvider
config={{
// Required
projectId: 'your-project-id',
getCurrentUser: async () => ({ id: user.id, email: user.email }),
// Optional — rich context for bug reports
getAppContext: () => ({
currentRoute: currentScreenName, // Current screen name
userRole: currentUser?.role, // 'owner', 'manager', 'guest', etc.
propertyId: selectedProperty?.id, // App-specific context
custom: { theme: 'dark' }, // Any additional data
}),
// Optional — callbacks
dashboardUrl: 'https://app.eddydesk.ai', // Web dashboard link in widget
onNavigate: (route) => navigation.navigate(route), // Deep link handler for test cases
onReportSubmitted: (report) => { ... }, // After report submission
getNavigationHistory: () => [...recentScreens], // Custom nav tracking
// Optional — self-hosted
supabaseUrl: '...',
supabaseAnonKey: '...',
}}
enabled={isAuthReady} // Delay init until auth is ready (default: true)
>
为什么用 getAppContext? 吗?
当测试者报告出错误时,EddyDesk会将应用上下文附在报告上. 这告诉开发者修复错误:
- 哪个屏幕 窃听器打开了
- 什么样的角色 用户有( 对角色依赖错误至关重要)
- App 特定状态 如所选属性、活动过滤器等.
错误报告表还包括一个 "哪个屏幕?" 字段,测试者可以手动指定受影响的屏幕.
自动上下文抓取
EddyDesk Provider 自动捕获零配置的调试上下文 :
| 数据 | 细节 |
|---|---|
| 控制台日志 | 倒数 50 console.log/warn/error/info 电话 |
| 网络请求 | 最后20个 fetch() 有方法、 URL、 状态、 持续时间的呼叫 |
| 失败的应对机构 | 4xx/5xxx响应机构的首个500个字符 |
| 业绩 | 页面加载时间、内存使用 |
| 环境 | 语言、时区、在线状态 |
此数据附于每一份错误报告并提供给 MCP 服务器 get_report_context 用于AI辅助调试的工具.
说明: 对于 React 本地语, 导航历史没有自动抓取( 否)
pushState) (中文(简体) ). 使用getNavigationHistory或反向导航集成下面用于屏幕跟踪.
导航跟踪
React 导航集成
import { useNavigationContainerRef } from '@react-navigation/native';
function App() {
const navigationRef = useNavigationContainerRef();
const routeHistory = useRef<string[]>([]);
return (
<EddyDeskProvider
config={{
projectId: 'your-project-id',
getCurrentUser: async () => ({ id: user.id, email: user.email }),
getNavigationHistory: () => routeHistory.current,
getAppContext: () => ({
currentRoute: navigationRef.getCurrentRoute()?.name || 'unknown',
userRole: currentUser?.role,
}),
}}
>
<NavigationContainer
ref={navigationRef}
onStateChange={() => {
const name = navigationRef.getCurrentRoute()?.name;
if (name) {
routeHistory.current.push(name);
// Keep last 20
if (routeHistory.current.length > 20) routeHistory.current.shift();
}
}}
>
{/* Your navigation */}
</NavigationContainer>
<EddyDeskButton />
</EddyDeskProvider>
);
}
部件结构
部件使用12个屏幕的导航堆栈模式:
| 屏幕 | 目的 |
|---|---|
| 内容 | 智能英雄横幅+2x2动作网格+发行跟踪卡(打开,完成,再打开)+进度栏 |
| 测试列表 | 所有带有过滤标签( All, To Do, Done, Re Opened) 和彩色状态徽章的任务 |
| 测试细节 | 通过/失败/滑雪动作一次性执行 |
| 测试反馈 | 星标+通过/失败后的质量旗帜 |
| 报告 | Bug/feedback 提交内容包括类型、严重程度、描述、受影响的屏幕 |
| 报告成功情况 | 自动返回家中确认 |
| 议题清单 | 按类别过滤的问题(开放/处理/重新开放),并附有严重程度指标 |
| 问题详情 | 附有验证证明和原始错误上下文的完整发行细节 |
| 信件列表 | 带未读徽章的线索列表 + 作曲按钮 |
| 线索细节 | 聊天泡+回复作曲家 |
| 撰写信件 | 带有主题 + 消息的新线程格式 |
| 简介 | 测试者信息、统计和可编辑字段 |
按钮配置
EddyDesk 按钮在默认情况下可被拖动,并带有边角抓取行为:
<EddyDeskButton
draggable={true} // Enable/disable dragging (default: true)
position="bottom-right" // Initial position: 'bottom-right' | 'bottom-left'
initialX={100} // Custom initial X position (optional)
initialY={500} // Custom initial Y position (optional)
minY={100} // Minimum Y from top (default: 100)
maxYOffset={160} // Max Y offset from bottom (default: 160)
/>
按钮在发布时会自动向最接近的屏幕边缘快取.
Monorepo 设置
当在单列波中使用EddyDesk(例如有Turborepo,Nx,或Yarn Workspaces)时,可能会遇到重复实例错误,如:
- "无效的钩子呼叫"
- 无法读取“ 无效状态” 的财产
- "只有函数组件的正体内部 才能叫Hooks"
当Metro( React Industrial 的捆绑器)从不同处取出不同的 React 实例时会发生这种情况 node_modules 文件夹.
Fix: 配置 Metro 以使用单个反应实例
更新您的 metro.config.js 在 React 本地应用程序中:
const path = require('path');
const { getDefaultConfig } = require('@react-native/metro-config');
// Get the monorepo root (adjust path as needed)
const monorepoRoot = path.resolve(__dirname, '../..');
const config = getDefaultConfig(__dirname);
// Block React from monorepo root to prevent duplicates
config.resolver.blockList = [
...(config.resolver.blockList || []),
new RegExp(`${monorepoRoot}/node_modules/react/.*`),
new RegExp(`${monorepoRoot}/node_modules/react-native/.*`),
];
// Ensure Metro uses the app's React instance
config.resolver.extraNodeModules = {
react: path.resolve(__dirname, 'node_modules/react'),
'react-native': path.resolve(__dirname, 'node_modules/react-native'),
};
// Watch the monorepo packages
config.watchFolders = [
monorepoRoot,
];
module.exports = config;
替代品:Yarn/npm 工作空间升起
如果您正在使用Yarn工作空间,您也可以配置起重机,以确保单个回放版本:
// package.json (workspace root)
{
"workspaces": {
"packages": ["apps/*", "packages/*"],
"nohoist": [
"**/react-native",
"**/react-native/**"
]
}
}
解决问题
未显示部件
- 确保当前用户的电子邮件在EddyDesk仪表板上注册为测试器
- 为您的工程启用了 QA 模式
- 检查
getCurrentUser返回有效的电子邮件
Supabase连接问题
如果您使用自己的Supabase实例,请提供证书:
<EddyDeskProvider
config={{
projectId: 'your-project-id',
supabaseUrl: 'https://your-instance.supabase.co',
supabaseAnonKey: 'your-anon-key',
getCurrentUser: async () => ({ id: user.id, email: user.email }),
}}
>
已知的限制
隐藏在模式后面的按钮
EddyDesk 按钮使用绝对定位在正常 React Native 视图分层中制作. 当您的应用程序显示模式,底页,或键盘时,按钮可能隐藏在后方.
工作范围:
- 接受模式打开时按钮无法访问
- 考虑放弃进入EddyDesk的方式
- 对于涉及模式的测试流程,提供触发 EddyDesk 部件的替代方式
许可证
麻省理工学院