235 lines
8.2 KiB
TypeScript
235 lines
8.2 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { motion, AnimatePresence } from 'framer-motion';
|
||
import { AlertTriangle, X, Send, Bug, CheckCircle } from 'lucide-react';
|
||
import { supabase } from '../supabase/client';
|
||
|
||
interface CrashReport {
|
||
error: Error;
|
||
errorInfo: React.ErrorInfo;
|
||
timestamp: string;
|
||
userAgent: string;
|
||
url: string;
|
||
}
|
||
|
||
export function CrashReporter() {
|
||
const [crash, setCrash] = useState<CrashReport | null>(null);
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||
const [userDescription, setUserDescription] = useState('');
|
||
|
||
useEffect(() => {
|
||
// 监听全局错误
|
||
const handleError = (event: ErrorEvent) => {
|
||
const crashData: CrashReport = {
|
||
error: event.error || new Error(event.message),
|
||
errorInfo: { componentStack: '' },
|
||
timestamp: new Date().toISOString(),
|
||
userAgent: navigator.userAgent,
|
||
url: window.location.href,
|
||
};
|
||
setCrash(crashData);
|
||
};
|
||
|
||
window.addEventListener('error', handleError);
|
||
return () => window.removeEventListener('error', handleError);
|
||
}, []);
|
||
|
||
const handleSubmit = async () => {
|
||
if (!crash) return;
|
||
|
||
setIsSubmitting(true);
|
||
|
||
try {
|
||
// 获取当前用户信息
|
||
const { data: { user } } = await supabase.auth.getUser();
|
||
|
||
// 提交崩溃报告
|
||
await supabase.from('crash_reports').insert({
|
||
error_message: crash.error.message,
|
||
error_stack: crash.error.stack,
|
||
component_stack: crash.errorInfo.componentStack,
|
||
user_description: userDescription.trim() || null,
|
||
user_agent: crash.userAgent,
|
||
url: crash.url,
|
||
user_id: user?.id || null,
|
||
status: 'pending',
|
||
});
|
||
|
||
setIsSubmitted(true);
|
||
setTimeout(() => {
|
||
setCrash(null);
|
||
setIsSubmitted(false);
|
||
setUserDescription('');
|
||
}, 3000);
|
||
} catch (error) {
|
||
console.error('提交崩溃报告失败:', error);
|
||
// 即使失败也关闭弹窗
|
||
setIsSubmitted(true);
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const handleClose = () => {
|
||
setCrash(null);
|
||
setUserDescription('');
|
||
};
|
||
|
||
if (!crash) return null;
|
||
|
||
return (
|
||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[100] p-4">
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
exit={{ opacity: 0, scale: 0.95 }}
|
||
className="bg-white rounded-2xl w-full max-w-md shadow-2xl overflow-hidden"
|
||
>
|
||
{/* 头部 */}
|
||
<div className="bg-red-500 p-4 text-white">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
|
||
<AlertTriangle className="w-5 h-5" />
|
||
</div>
|
||
<div>
|
||
<h2 className="text-lg font-semibold">程序异常</h2>
|
||
<p className="text-xs text-white/80">发生了一个意外错误</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={handleClose}
|
||
className="p-2 hover:bg-white/20 rounded-lg transition-colors"
|
||
>
|
||
<X className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 内容 */}
|
||
<div className="p-4 space-y-4">
|
||
{isSubmitted ? (
|
||
<div className="text-center py-8">
|
||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<CheckCircle className="w-8 h-8 text-green-600" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-gray-900 mb-2">报告已发送</h3>
|
||
<p className="text-sm text-gray-500">感谢您的反馈，我们会尽快修复</p>
|
||
</div>
|
||
) : (
|
||
<>
|
||
{/* 错误信息 */}
|
||
<div className="bg-red-50 border border-red-100 rounded-xl p-3">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<Bug className="w-4 h-4 text-red-500" />
|
||
<span className="text-sm font-medium text-red-700">错误信息</span>
|
||
</div>
|
||
<p className="text-xs text-red-600 font-mono break-all">
|
||
{crash.error.message}
|
||
</p>
|
||
</div>
|
||
|
||
{/* 用户描述 */}
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
请描述您刚才的操作（选填）
|
||
</label>
|
||
<textarea
|
||
value={userDescription}
|
||
onChange={(e) => setUserDescription(e.target.value)}
|
||
placeholder="例如：我正在创建计划，点击保存后出现这个错误..."
|
||
rows={3}
|
||
className="w-full px-3 py-2 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-red-500/20 focus:border-red-500 resize-none"
|
||
/>
|
||
</div>
|
||
|
||
{/* 隐私说明 */}
|
||
<p className="text-xs text-gray-500">
|
||
崩溃报告将自动收集错误信息、浏览器版本和页面地址，帮助我们定位问题。不会收集您的业务数据。
|
||
</p>
|
||
|
||
{/* 按钮 */}
|
||
<div className="flex gap-3">
|
||
<button
|
||
onClick={handleClose}
|
||
className="flex-1 py-2.5 border border-gray-300 rounded-xl text-gray-700 hover:bg-gray-50 transition-colors text-sm font-medium"
|
||
>
|
||
关闭
|
||
</button>
|
||
<button
|
||
onClick={handleSubmit}
|
||
disabled={isSubmitting}
|
||
className="flex-1 py-2.5 bg-red-500 hover:bg-red-600 text-white rounded-xl transition-colors text-sm font-medium flex items-center justify-center gap-2"
|
||
>
|
||
{isSubmitting ? (
|
||
<>
|
||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||
发送中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Send className="w-4 h-4" />
|
||
发送报告
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 错误边界组件
|
||
export class ErrorBoundary extends React.Component<
|
||
{ children: React.ReactNode },
|
||
{ hasError: boolean; error: Error | null; errorInfo: React.ErrorInfo | null }
|
||
> {
|
||
constructor(props: { children: React.ReactNode }) {
|
||
super(props);
|
||
this.state = { hasError: false, error: null, errorInfo: null };
|
||
}
|
||
|
||
static getDerivedStateFromError(error: Error) {
|
||
return { hasError: true, error };
|
||
}
|
||
|
||
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
||
this.setState({ error, errorInfo });
|
||
console.error('Error caught by boundary:', error, errorInfo);
|
||
|
||
// 触发崩溃报告
|
||
window.dispatchEvent(new CustomEvent('app-crash', {
|
||
detail: { error, errorInfo }
|
||
}));
|
||
}
|
||
|
||
render() {
|
||
if (this.state.hasError) {
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
|
||
<div className="bg-white rounded-2xl p-8 max-w-md w-full text-center shadow-xl">
|
||
<div className="w-20 h-20 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<AlertTriangle className="w-10 h-10 text-red-500" />
|
||
</div>
|
||
<h2 className="text-xl font-bold text-gray-900 mb-2">出错了</h2>
|
||
<p className="text-sm text-gray-500 mb-6">
|
||
应用程序遇到了问题，请刷新页面重试
|
||
</p>
|
||
<button
|
||
onClick={() => window.location.reload()}
|
||
className="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl transition-colors font-medium"
|
||
>
|
||
刷新页面
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return this.props.children;
|
||
}
|
||
}
|