Merge pull request #30 from Gurubase/task/sentry-errors

Add sentry error logging in slug page

src/gurubase-frontend/src/app/not-found.js

@@ -1,14 +1,31 @@
-import Link from "next/link";
+"use client";
 
+import Link from "next/link";
+import { useEffect } from "react";
 import { SolarHomeBold } from "@/components/Icons";
+import { useAppSelector, useAppDispatch } from "@/redux/hooks";
+import { setNotFoundContext } from "@/redux/slices/mainFormSlice";
+import { reportErrorToSentry } from "@/utils/sentry";
 
 export default function NotFound() {
-  // if (
-  //   process.env.NEXT_PUBLIC_SENTRY_AUTH_TOKEN &&
-  //   process.env.NEXT_PUBLIC_NODE_ENV === "production"
-  // ) {
-  //   Sentry.captureException(new Error("404 - Page Not Found (Root)"));
-  // }
+  const dispatch = useAppDispatch();
+  const notFoundContext = useAppSelector(
+    (state) => state.mainForm.notFoundContext
+  );
+
+  useEffect(() => {
+    const reportError = async () => {
+      if (
+        process.env.NEXT_PUBLIC_NODE_ENV === "production" &&
+        notFoundContext
+      ) {
+        await reportErrorToSentry("404 - Page Not Found", notFoundContext);
+        dispatch(setNotFoundContext(null));
+      }
+    };
+
+    reportError();
+  }, [notFoundContext, dispatch]);
 
   return (
     <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 guru-sm:px-4">
@@ -28,4 +45,4 @@ export default function NotFound() {
       </Link>
     </div>
   );
-}
+}

src/gurubase-frontend/src/components/ResultClient.js

@@ -1,5 +1,6 @@
 "use client";
 
+import * as Sentry from "@sentry/nextjs";
 import { notFound, redirect, useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 
@@ -24,7 +25,8 @@ import {
   setSlugPageRendered,
   setStreamError,
   setStreamingStatus,
-  setWaitingForFirstChunk
+  setWaitingForFirstChunk,
+  setNotFoundContext
 } from "@/redux/slices/mainFormSlice";
 import { bingeRedirection } from "@/utils/bingeRedirection";
 import { getStream } from "@/utils/clientActions";
@@ -348,6 +350,24 @@ export const ResultClient = ({
       //console.log("set has fetched to true");
     } else {
       if (!isInitializing) {
+        // Set not found context before calling notFound
+        dispatch(
+          setNotFoundContext({
+            errorType: "404",
+            component: "ResultClient",
+            reason: `Will try to stream but it is not suitable.`,
+            question,
+            description,
+            prompt_tokens,
+            completion_tokens,
+            answer_length,
+            user_intent,
+            slug,
+            dirty,
+            isInitializing,
+            hasFetched
+          })
+        );
         notFound();
       }
     }
@@ -369,7 +389,25 @@ export const ResultClient = ({
 
   // if window is undefined it mean it is server side rendering and instantContent is not available so redirect to not found page
   if (typeof window === "undefined" && !instantContent && !dirty) {
-    return redirect("/not-found");
+    // Set not found context for server-side case
+    dispatch(
+      setNotFoundContext({
+        errorType: "404",
+        component: "ResultClient",
+        reason: `No content exists while js is disabled.`,
+        dirty,
+        instantContent,
+        slug,
+        question,
+        description,
+        prompt_tokens,
+        completion_tokens,
+        answer_length,
+        user_intent,
+        user_question
+      })
+    );
+    notFound();
   }
 
   const triggerStreamUpdate = (summaryData) => {
@@ -427,4 +465,4 @@ export const ResultClient = ({
       />
     </main>
   );
-};
+};

src/gurubase-frontend/src/redux/slices/mainFormSlice.js

@@ -37,7 +37,8 @@ const initialState = {
   dateUpdated: null,
   followUpQuestions: [],
   treeData: null,
-  bingeOutdated: false
+  bingeOutdated: false,
+  notFoundContext: null
 };
 
 const mainFormSlice = createSlice({
@@ -178,6 +179,9 @@ const mainFormSlice = createSlice({
     },
     setBingeMapRefreshTrigger: (state, action) => {
       state.bingeMapRefreshTrigger = action.payload;
+    },
+    setNotFoundContext: (state, action) => {
+      state.notFoundContext = action.payload;
     }
   }
 });
@@ -217,6 +221,7 @@ export const {
   resetErrors,
   setQuestionUpdate,
   setFollowUpQuestions,
-  setBingeInfo
+  setBingeInfo,
+  setNotFoundContext
 } = mainFormSlice.actions;
-export default mainFormSlice.reducer;
+export default mainFormSlice.reducer;

src/gurubase-frontend/src/utils/sentry.js

@@ -0,0 +1,16 @@
+import * as Sentry from "@sentry/nextjs";
+
+export const reportErrorToSentry = async (error, context) => {
+  try {
+    const errorObject = new Error(error);
+
+    Sentry.captureException(errorObject, {
+      tags: {
+        ...context,
+        environment: process.env.NEXT_PUBLIC_NODE_ENV
+      }
+    });
+  } catch (error) {
+    // console.error("[Sentry] Failed to report error:", error);
+  }
+};