add logging for error when marking questions as seen

actions/answers/markQuestionAsSeenButNotAnswered.ts

@@ -4,6 +4,7 @@ import { getJwtPayload } from "@/app/actions/jwt";
 import prisma from "@/app/services/prisma";
 import { getRandomInteger } from "@/app/utils/randomUtils";
 import { AnswerStatus, QuestionType } from "@prisma/client";
+import * as Sentry from "@sentry/nextjs";
 
 export async function markQuestionAsSeenButNotAnswered(questionId: number) {
   const payload = await getJwtPayload();
@@ -43,7 +44,13 @@ export async function markQuestionAsSeenButNotAnswered(questionId: number) {
           : 0,
     };
   } catch (error) {
-    console.log("Error in markQuestionAsSeenButNotAnswered", error);
+    Sentry.captureException(error, {
+      extra: {
+        userId,
+      },
+    });
+
+    console.error("Error in markQuestionAsSeenButNotAnswered", error);
     return { hasError: true };
   }
 }

app/components/Deck/Deck.tsx

@@ -20,6 +20,7 @@
 import trackEvent from "@/lib/trackEvent";
 import { QuestionStep } from "@/types/question";
 import { AnswerStatus, QuestionTag, QuestionType, Tag } from "@prisma/client";
+import * as Sentry from "@sentry/nextjs";
 import classNames from "classnames";
 import dayjs from "dayjs";
 import { usePathname } from "next/navigation";
@@ -133,7 +134,7 @@
 
     reset();
     setIsSubmitting(false);
   }, [
     currentQuestionIndex,
     setCurrentQuestionIndex,
     setCurrentQuestionStep,
@@ -150,30 +151,58 @@
   // every time we have a different truthy question.id
   // we mark it as "seen"
   useEffect(() => {
-    const run = async () => {
-      const res = await markQuestionAsSeenButNotAnswered(question.id);
-      if (res?.random) {
-        setRandom(res?.random);
-      }
-      if (!!res?.hasError) {
+    const markQuestionAsSeen = async () => {
+      try {
+        const response = await markQuestionAsSeenButNotAnswered(question.id);
+
+        // NOTICE: if the response comes with an error we just
+        // go to the next question and do nothing
+        // is this the best way to handle this error?
+        if (response?.hasError) {
+          Sentry.captureMessage(
+            `Error calling markQuestionAsSeenButNotAnswered()`,
+            {
+              level: "error",
+              tags: {
+                category: "deck-errors",
+              },
+              extra: {
+                questionId: question.id,
+                deckId: deckId,
+                deckVariant: deckVariant,
+                currentQuestionIndex: currentQuestionIndex,
+              },
+            },
+          );
+
+          handleNextIndex();
+          return;
+        }
+
+        if (response?.random !== undefined) {
+          setRandom(response.random);
+        }
+      } catch (error) {
+        console.error("Error marking question as seen:", error);
         handleNextIndex();
-        return;
       }
     };
 
-    if (!!question?.id) run();
-  }, [question?.id]);
+    if (question?.id) {
+      markQuestionAsSeen();
+    }
+  }, [question?.id, handleNextIndex]);
 
   const handleNoAnswer = useCallback(async () => {
     setIsTimeOutPopUpVisible(false);
     handleNextIndex();
   }, [question, handleNextIndex, setDeckResponse]);
 
   const handleOnDurationRanOut = useCallback(async () => {
     if (isSubmitting) return;
     await markQuestionAsTimedOut(question.id);
     setIsTimeOutPopUpVisible(true);
   }, [question, handleNextIndex, setDeckResponse, isSubmitting]);
 
   const handleSkipQuestion = async () => {
     if (processingSkipQuestion) return;
@@ -268,7 +297,7 @@
 
       handleNextIndex();
     },
     [
       setDeckResponse,
       setCurrentQuestionStep,
       currentQuestionStep,
@@ -282,7 +311,7 @@
 
   const hasReachedEnd = useMemo(
     () => currentQuestionIndex >= questions.length,
     [currentQuestionIndex],
   );
 
   useEffect(() => {

app/hooks/useInterval.ts

@@ -2,8 +2,14 @@ import { useEffect, useRef } from "react";
 
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
 
+// useInterval creates a recurring timer that safely handles callback changes
+// - Stores the callback in a ref to avoid unnecessary interval resets
+// - Only creates/clears the interval when the delay changes
+// - Passing null as delay disables the interval
+// - Uses useIsomorphicLayoutEffect to update the callback reference synchronously
 export function useInterval(callback: () => void, delay: number | null) {
   const savedCallback = useRef(callback);
+
   useIsomorphicLayoutEffect(() => {
     savedCallback.current = callback;
   }, [callback]);
@@ -17,6 +23,9 @@ export function useInterval(callback: () => void, delay: number | null) {
       savedCallback.current();
     }, delay);
 
+    // The cleanup function (returned by the `useEffect`) will be called in these scenarios:
+    // 1. When the component using this hook unmounts
+    // 2. Before the effect runs again if the `delay` dependency changes
     return () => {
       clearInterval(id);
     };