From b22068841b033fd59b79bada1400661fda4d7ae9 Mon Sep 17 00:00:00 2001 From: human058382928 <162091348+human058382928@users.noreply.github.com> Date: Mon, 11 Nov 2024 09:34:45 -0800 Subject: [PATCH 1/2] catch sentry errors --- src/hooks/useChat.ts | 14 ++++++++++++-- src/hooks/useCrewChat.ts | 13 +++++++++++-- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/src/hooks/useChat.ts b/src/hooks/useChat.ts index 436d5178..166dc714 100644 --- a/src/hooks/useChat.ts +++ b/src/hooks/useChat.ts @@ -1,6 +1,7 @@ import { useState, useEffect, useCallback, useRef } from "react"; import { useToast } from "@/hooks/use-toast"; import { supabase } from "@/utils/supabase/client"; +import * as Sentry from "@sentry/nextjs"; export interface Message { role: "user" | "assistant"; @@ -64,6 +65,7 @@ export function useChat() { }); } catch (error) { console.error("Failed to reset chat history:", error); + Sentry.captureException(error); toast({ title: "Error", description: "Failed to reset chat history.", @@ -144,6 +146,7 @@ export function useChat() { } } catch (error) { console.error("Failed to fetch history:", error); + Sentry.captureException(error); toast({ title: "Error", description: "Failed to load chat history.", @@ -233,15 +236,21 @@ export function useChat() { setIsLoading(false); } } catch (error) { + Sentry.captureException(error); console.error("Error parsing SSE data:", error); } }; - eventSource.onerror = () => { + eventSource.onerror = (error: Event) => { if (isLoading) { setIsLoading(false); } else { - console.error("EventSource failed"); + console.error("EventSource failed", error); + + // Capture the error in Sentry + Sentry.captureException(error); + + // Display a toast notification for the error toast({ title: "Connection Failed", description: "There was a problem with the connection. Please try again.", @@ -264,6 +273,7 @@ export function useChat() { }); } catch (error) { console.error("Error sending message:", error); + Sentry.captureException(error); toast({ title: "Error", description: error instanceof Error ? error.message : "Failed to send message", diff --git a/src/hooks/useCrewChat.ts b/src/hooks/useCrewChat.ts index 359daec2..6121cfba 100644 --- a/src/hooks/useCrewChat.ts +++ b/src/hooks/useCrewChat.ts @@ -1,6 +1,7 @@ import { useState, useEffect, useCallback, useRef } from "react"; import { useToast } from "@/hooks/use-toast"; import { supabase } from "@/utils/supabase/client"; +import * as Sentry from "@sentry/nextjs"; export interface Message { role: "user" | "assistant"; @@ -37,6 +38,7 @@ export function useCrewChat() { }); } catch (error) { console.error("Failed to reset chat history:", error); + Sentry.captureException(error); toast({ title: "Error", description: "Failed to reset chat history.", @@ -123,15 +125,21 @@ export function useCrewChat() { setIsLoading(false); } } catch (error) { + Sentry.captureException(error); console.error("Error parsing SSE data:", error); } }; - eventSource.onerror = () => { + eventSource.onerror = (error: Event) => { if (isLoading) { setIsLoading(false); } else { - console.error("EventSource failed"); + console.error("EventSource failed", error); + + // Capture the error in Sentry + Sentry.captureException(error); + + // Display a toast notification for the error toast({ title: "Connection Failed", description: "There was a problem with the connection. Please try again.", @@ -153,6 +161,7 @@ export function useCrewChat() { setMessages((prev) => [...prev, assistantMessage]); }); } catch (error) { + Sentry.captureException(error); console.error("Error sending message:", error); toast({ title: "Error", From 2294c69b34b50704cb963820d466008294ed2b26 Mon Sep 17 00:00:00 2001 From: human058382928 <162091348+human058382928@users.noreply.github.com> Date: Mon, 11 Nov 2024 09:58:27 -0800 Subject: [PATCH 2/2] capture errors better --- src/hooks/use-toast.ts | 2 +- src/hooks/useChat.ts | 37 +++++++++++++++++++++++-------------- src/hooks/useCrewChat.ts | 37 +++++++++++++++++++++++-------------- 3 files changed, 47 insertions(+), 29 deletions(-) diff --git a/src/hooks/use-toast.ts b/src/hooks/use-toast.ts index bd0c9091..bc95255d 100644 --- a/src/hooks/use-toast.ts +++ b/src/hooks/use-toast.ts @@ -5,7 +5,7 @@ import * as React from "react"; import type { ToastActionElement, ToastProps } from "@/components/ui/toast"; -const TOAST_LIMIT = 1; +const TOAST_LIMIT = 3; const TOAST_REMOVE_DELAY = 1000000; type ToasterToast = ToastProps & { diff --git a/src/hooks/useChat.ts b/src/hooks/useChat.ts index 166dc714..53077790 100644 --- a/src/hooks/useChat.ts +++ b/src/hooks/useChat.ts @@ -241,22 +241,31 @@ export function useChat() { } }; - eventSource.onerror = (error: Event) => { - if (isLoading) { - setIsLoading(false); - } else { - console.error("EventSource failed", error); + eventSource.addEventListener("error", (event: MessageEvent) => { + const errorData = JSON.parse(event.data); + console.error("Received server error:", errorData.message); - // Capture the error in Sentry - Sentry.captureException(error); + toast({ + title: "Server Error", + description: errorData.message, + variant: "destructive", + }); - // Display a toast notification for the error - toast({ - title: "Connection Failed", - description: "There was a problem with the connection. Please try again.", - variant: "destructive", - }); - } + Sentry.captureException(new Error(errorData.message)); + eventSource.close(); + setIsLoading(false); + }); + + eventSource.onerror = (error: Event) => { + console.error("EventSource encountered a generic error:", error); + toast({ + title: "Connection Error", + description: "A connection error occurred. Please try again.", + variant: "destructive", + }); + + Sentry.captureException(error); + setIsLoading(false); }; eventSource.addEventListener("finish", () => { diff --git a/src/hooks/useCrewChat.ts b/src/hooks/useCrewChat.ts index 6121cfba..df6513f8 100644 --- a/src/hooks/useCrewChat.ts +++ b/src/hooks/useCrewChat.ts @@ -130,22 +130,31 @@ export function useCrewChat() { } }; - eventSource.onerror = (error: Event) => { - if (isLoading) { - setIsLoading(false); - } else { - console.error("EventSource failed", error); + eventSource.addEventListener("error", (event: MessageEvent) => { + const errorData = JSON.parse(event.data); + console.error("Received server error:", errorData.message); - // Capture the error in Sentry - Sentry.captureException(error); + toast({ + title: "Server Error", + description: errorData.message, + variant: "destructive", + }); - // Display a toast notification for the error - toast({ - title: "Connection Failed", - description: "There was a problem with the connection. Please try again.", - variant: "destructive", - }); - } + Sentry.captureException(new Error(errorData.message)); + eventSource.close(); + setIsLoading(false); + }); + + eventSource.onerror = (error: Event) => { + console.error("EventSource encountered a generic error:", error); + toast({ + title: "Connection Error", + description: "A connection error occurred. Please try again.", + variant: "destructive", + }); + + Sentry.captureException(error); + setIsLoading(false); }; eventSource.addEventListener("finish", () => {