refactor: monorepo
This commit is contained in:
Simon
464
packages/website/src/test-pages/error-test.tsx
Normal file
464
packages/website/src/test-pages/error-test.tsx
Normal file
@@ -0,0 +1,464 @@
|
||||
import { useState } from 'react'
|
||||
import { Link } from 'wouter'
|
||||
|
||||
interface ErrorScenario {
|
||||
id: string
|
||||
title: string
|
||||
description: string
|
||||
type: 'network' | 'validation' | 'permission' | 'timeout' | 'server'
|
||||
}
|
||||
|
||||
export default function ErrorTestPage() {
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [success, setSuccess] = useState<string | null>(null)
|
||||
const [retryCount, setRetryCount] = useState(0)
|
||||
const [formData, setFormData] = useState({
|
||||
username: '',
|
||||
password: '',
|
||||
email: '',
|
||||
file: null as File | null,
|
||||
})
|
||||
|
||||
const errorScenarios: ErrorScenario[] = [
|
||||
{
|
||||
id: 'network-error',
|
||||
title: '网络连接错误',
|
||||
description: '模拟网络连接失败，测试重试机制',
|
||||
type: 'network',
|
||||
},
|
||||
{
|
||||
id: 'validation-error',
|
||||
title: '表单验证错误',
|
||||
description: '模拟表单验证失败，测试错误提示',
|
||||
type: 'validation',
|
||||
},
|
||||
{
|
||||
id: 'permission-error',
|
||||
title: '权限不足错误',
|
||||
description: '模拟权限验证失败，测试权限处理',
|
||||
type: 'permission',
|
||||
},
|
||||
{
|
||||
id: 'timeout-error',
|
||||
title: '请求超时错误',
|
||||
description: '模拟请求超时，测试超时处理',
|
||||
type: 'timeout',
|
||||
},
|
||||
{
|
||||
id: 'server-error',
|
||||
title: '服务器内部错误',
|
||||
description: '模拟服务器500错误，测试错误恢复',
|
||||
type: 'server',
|
||||
},
|
||||
]
|
||||
|
||||
const simulateError = async (scenario: ErrorScenario): Promise<void> => {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
|
||||
// 模拟网络延迟
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000 + Math.random() * 2000))
|
||||
|
||||
switch (scenario.type) {
|
||||
case 'network':
|
||||
// 70% 概率失败
|
||||
if (Math.random() < 0.7) {
|
||||
throw new Error('网络连接失败：无法连接到服务器，请检查您的网络连接')
|
||||
}
|
||||
break
|
||||
|
||||
case 'validation':
|
||||
// 检查表单数据
|
||||
if (!formData.username || formData.username.length < 3) {
|
||||
throw new Error('用户名验证失败：用户名至少需要3个字符')
|
||||
}
|
||||
if (!formData.password || formData.password.length < 6) {
|
||||
throw new Error('密码验证失败：密码至少需要6个字符')
|
||||
}
|
||||
if (!formData.email?.includes('@')) {
|
||||
throw new Error('邮箱验证失败：请输入有效的邮箱地址')
|
||||
}
|
||||
break
|
||||
|
||||
case 'permission':
|
||||
// 模拟权限检查
|
||||
if (formData.username !== 'admin') {
|
||||
throw new Error('权限不足：您没有执行此操作的权限，请联系管理员')
|
||||
}
|
||||
break
|
||||
|
||||
case 'timeout':
|
||||
// 模拟超时
|
||||
await new Promise((resolve) => setTimeout(resolve, 8000))
|
||||
throw new Error('请求超时：服务器响应时间过长，请稍后重试')
|
||||
|
||||
case 'server':
|
||||
// 50% 概率服务器错误
|
||||
if (Math.random() < 0.5) {
|
||||
throw new Error('服务器内部错误：服务器遇到了一个错误，请稍后重试')
|
||||
}
|
||||
break
|
||||
|
||||
default:
|
||||
throw new Error('未知错误：发生了未预期的错误')
|
||||
}
|
||||
|
||||
// 成功情况
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
const handleScenarioTest = async (scenario: ErrorScenario) => {
|
||||
try {
|
||||
await simulateError(scenario)
|
||||
setSuccess(`${scenario.title} 测试成功完成！`)
|
||||
setRetryCount(0)
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : '未知错误'
|
||||
setError(errorMessage)
|
||||
setRetryCount((prev) => prev + 1)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRetry = async (scenario: ErrorScenario) => {
|
||||
if (retryCount >= 3) {
|
||||
setError('重试次数已达上限，请稍后再试或联系技术支持')
|
||||
return
|
||||
}
|
||||
await handleScenarioTest(scenario)
|
||||
}
|
||||
|
||||
const handleFileUpload = async () => {
|
||||
if (!formData.file) {
|
||||
setError('请选择要上传的文件')
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
|
||||
try {
|
||||
// 模拟文件大小检查
|
||||
if (formData.file.size > 5 * 1024 * 1024) {
|
||||
throw new Error('文件上传失败：文件大小不能超过5MB')
|
||||
}
|
||||
|
||||
// 模拟文件类型检查
|
||||
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'application/pdf']
|
||||
if (!allowedTypes.includes(formData.file.type)) {
|
||||
throw new Error('文件上传失败：不支持的文件类型，请上传图片或PDF文件')
|
||||
}
|
||||
|
||||
// 模拟上传过程
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000))
|
||||
|
||||
// 模拟随机失败
|
||||
if (Math.random() < 0.3) {
|
||||
throw new Error('文件上传失败：上传过程中发生错误，请重试')
|
||||
}
|
||||
|
||||
setSuccess('文件上传成功！')
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : '文件上传失败'
|
||||
setError(errorMessage)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const clearMessages = () => {
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
setRetryCount(0)
|
||||
}
|
||||
|
||||
const getErrorIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'network':
|
||||
return '🌐'
|
||||
case 'validation':
|
||||
return '⚠️'
|
||||
case 'permission':
|
||||
return '🔒'
|
||||
case 'timeout':
|
||||
return '⏰'
|
||||
case 'server':
|
||||
return '🔧'
|
||||
default:
|
||||
return '❌'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">错误处理测试</h1>
|
||||
<p className="text-gray-600 dark:text-gray-300">
|
||||
测试各种错误场景和重试机制，验证 Agent 的错误处理能力
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 全局消息显示 */}
|
||||
{(error || success) && (
|
||||
<div className="mb-8">
|
||||
{error && (
|
||||
<div className="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 rounded-lg p-4 mb-4">
|
||||
<div className="flex items-start">
|
||||
<div className="shrink-0">
|
||||
<svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="ml-3 flex-1">
|
||||
<h3 className="text-sm font-medium text-red-800 dark:text-red-200">操作失败</h3>
|
||||
<p className="mt-1 text-sm text-red-700 dark:text-red-300">{error}</p>
|
||||
{retryCount > 0 && (
|
||||
<p className="mt-2 text-xs text-red-600 dark:text-red-400">
|
||||
已重试 {retryCount} 次 {retryCount >= 3 && '(已达最大重试次数)'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={clearMessages}
|
||||
className="ml-3 text-red-400 hover:text-red-600 dark:hover:text-red-300"
|
||||
>
|
||||
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 rounded-lg p-4 mb-4">
|
||||
<div className="flex items-start">
|
||||
<div className="shrink-0">
|
||||
<svg className="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="ml-3 flex-1">
|
||||
<h3 className="text-sm font-medium text-green-800 dark:text-green-200">
|
||||
操作成功
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-green-700 dark:text-green-300">{success}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={clearMessages}
|
||||
className="ml-3 text-green-400 hover:text-green-600 dark:hover:text-green-300"
|
||||
>
|
||||
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* 错误场景测试 */}
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">错误场景测试</h2>
|
||||
|
||||
{errorScenarios.map((scenario) => (
|
||||
<div key={scenario.id} className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="text-3xl">{getErrorIcon(scenario.type)}</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
|
||||
{scenario.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-300 text-sm mb-4">
|
||||
{scenario.description}
|
||||
</p>
|
||||
<div className="flex space-x-3">
|
||||
<button
|
||||
onClick={() => handleScenarioTest(scenario)}
|
||||
disabled={isLoading}
|
||||
className="px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-red-400 text-white rounded-md transition-colors text-sm"
|
||||
>
|
||||
{isLoading ? '测试中...' : '触发错误'}
|
||||
</button>
|
||||
{error && retryCount > 0 && retryCount < 3 && (
|
||||
<button
|
||||
onClick={() => handleRetry(scenario)}
|
||||
disabled={isLoading}
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded-md transition-colors text-sm"
|
||||
>
|
||||
重试 ({retryCount}/3)
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 表单验证测试 */}
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">表单验证测试</h2>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
|
||||
用户信息表单
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
用户名 (至少3个字符)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.username}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, username: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
密码 (至少6个字符)
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, password: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
邮箱地址
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, email: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="请输入邮箱地址"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() =>
|
||||
handleScenarioTest(errorScenarios.find((s) => s.type === 'validation')!)
|
||||
}
|
||||
disabled={isLoading}
|
||||
className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded-md transition-colors"
|
||||
>
|
||||
{isLoading ? '验证中...' : '提交表单'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 文件上传测试 */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
|
||||
文件上传测试
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
选择文件 (最大5MB，支持图片和PDF)
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
onChange={(e) =>
|
||||
setFormData((prev) => ({ ...prev, file: e.target.files?.[0] || null }))
|
||||
}
|
||||
accept="image/*,.pdf"
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
{formData.file && (
|
||||
<div className="text-sm text-gray-600 dark:text-gray-300">
|
||||
已选择: {formData.file.name} ({(formData.file.size / 1024 / 1024).toFixed(2)}{' '}
|
||||
MB)
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={handleFileUpload}
|
||||
disabled={isLoading || !formData.file}
|
||||
className="w-full px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-400 text-white rounded-md transition-colors"
|
||||
>
|
||||
{isLoading ? '上传中...' : '上传文件'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 权限测试说明 */}
|
||||
<div className="bg-yellow-50 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 rounded-lg p-4">
|
||||
<h4 className="text-sm font-medium text-yellow-800 dark:text-yellow-200 mb-2">
|
||||
💡 权限测试提示
|
||||
</h4>
|
||||
<p className="text-sm text-yellow-700 dark:text-yellow-300">
|
||||
要通过权限测试，请在用户名字段输入 "admin"，然后点击"触发错误"按钮测试权限验证。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 加载状态指示器 */}
|
||||
{isLoading && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 flex items-center space-x-4">
|
||||
<svg
|
||||
className="animate-spin h-8 w-8 text-blue-600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
<span className="text-gray-900 dark:text-white">处理中，请稍候...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 返回链接 */}
|
||||
<div className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||
<Link href="/" className="text-blue-600 hover:text-blue-500 dark:text-blue-400">
|
||||
← 返回测试页面列表
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user