refactor: enhance error handling and performance tracking across components
- Improve localStorage access in ActivityFeed, ChatWidget, and AdminPage with try-catch blocks to handle potential errors gracefully. - Update performance tracking in AnalyticsProvider and analytics.ts to ensure robust error handling and prevent failures from affecting user experience. - Refactor Web Vitals tracking to include error handling for observer initialization and data collection. - Ensure consistent handling of hydration mismatches in components like BackgroundBlobs and ChatWidget to improve rendering reliability.
This commit is contained in:
@@ -20,21 +20,47 @@ interface Message {
|
||||
}
|
||||
|
||||
export default function ChatWidget() {
|
||||
// Prevent hydration mismatch by only rendering after mount
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [inputValue, setInputValue] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [conversationId, setConversationId] = useState(() => {
|
||||
// Generate or retrieve conversation ID
|
||||
if (typeof window !== "undefined") {
|
||||
const [conversationId, setConversationId] = useState<string>("default");
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
// Generate or retrieve conversation ID only on client
|
||||
try {
|
||||
const stored = localStorage.getItem("chatSessionId");
|
||||
if (stored) return stored;
|
||||
const newId = crypto.randomUUID();
|
||||
if (stored) {
|
||||
setConversationId(stored);
|
||||
return;
|
||||
}
|
||||
|
||||
// Generate UUID with fallback for browsers without crypto.randomUUID
|
||||
let newId: string;
|
||||
if (typeof crypto !== "undefined" && crypto.randomUUID) {
|
||||
newId = crypto.randomUUID();
|
||||
} else {
|
||||
// Fallback UUID generation
|
||||
newId = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
||||
const r = Math.random() * 16 | 0;
|
||||
const v = c === 'x' ? r : (r & 0x3 | 0x8);
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
localStorage.setItem("chatSessionId", newId);
|
||||
return newId;
|
||||
setConversationId(newId);
|
||||
} catch (error) {
|
||||
// localStorage might be disabled or full
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.warn('Failed to access localStorage for chat session:', error);
|
||||
}
|
||||
setConversationId(`session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`);
|
||||
}
|
||||
return "default";
|
||||
});
|
||||
}, []);
|
||||
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
@@ -62,22 +88,55 @@ export default function ChatWidget() {
|
||||
// Load messages from localStorage
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
const stored = localStorage.getItem("chatMessages");
|
||||
if (stored) {
|
||||
try {
|
||||
const parsed = JSON.parse(stored);
|
||||
setMessages(
|
||||
parsed.map((m: Message) => ({
|
||||
...m,
|
||||
text: decodeHtmlEntities(m.text), // Decode HTML entities when loading
|
||||
timestamp: new Date(m.timestamp),
|
||||
})),
|
||||
);
|
||||
} catch (e) {
|
||||
console.error("Failed to load chat history", e);
|
||||
try {
|
||||
const stored = localStorage.getItem("chatMessages");
|
||||
if (stored) {
|
||||
try {
|
||||
const parsed = JSON.parse(stored);
|
||||
setMessages(
|
||||
parsed.map((m: Message) => ({
|
||||
...m,
|
||||
text: decodeHtmlEntities(m.text), // Decode HTML entities when loading
|
||||
timestamp: new Date(m.timestamp),
|
||||
})),
|
||||
);
|
||||
} catch (e) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.error("Failed to parse chat history", e);
|
||||
}
|
||||
// Clear corrupted data
|
||||
try {
|
||||
localStorage.removeItem("chatMessages");
|
||||
} catch {
|
||||
// Ignore cleanup errors
|
||||
}
|
||||
// Add welcome message
|
||||
setMessages([
|
||||
{
|
||||
id: "welcome",
|
||||
text: "Hi! I'm Dennis's AI assistant. Ask me anything about his skills, projects, or experience! 🚀",
|
||||
sender: "bot",
|
||||
timestamp: new Date(),
|
||||
},
|
||||
]);
|
||||
}
|
||||
} else {
|
||||
// Add welcome message
|
||||
setMessages([
|
||||
{
|
||||
id: "welcome",
|
||||
text: "Hi! I'm Dennis's AI assistant. Ask me anything about his skills, projects, or experience! 🚀",
|
||||
sender: "bot",
|
||||
timestamp: new Date(),
|
||||
},
|
||||
]);
|
||||
}
|
||||
} else {
|
||||
// Add welcome message
|
||||
} catch (error) {
|
||||
// localStorage might be disabled
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.warn("Failed to load chat history from localStorage:", error);
|
||||
}
|
||||
// Add welcome message anyway
|
||||
setMessages([
|
||||
{
|
||||
id: "welcome",
|
||||
@@ -93,7 +152,14 @@ export default function ChatWidget() {
|
||||
// Save messages to localStorage
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined" && messages.length > 0) {
|
||||
localStorage.setItem("chatMessages", JSON.stringify(messages));
|
||||
try {
|
||||
localStorage.setItem("chatMessages", JSON.stringify(messages));
|
||||
} catch (error) {
|
||||
// localStorage might be full or disabled
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.warn("Failed to save chat messages to localStorage:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [messages]);
|
||||
|
||||
@@ -204,6 +270,11 @@ export default function ChatWidget() {
|
||||
]);
|
||||
};
|
||||
|
||||
// Don't render until mounted to prevent hydration mismatch
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Chat Button */}
|
||||
|
||||
Reference in New Issue
Block a user