feat: implement sentry and resolve console error in the console to av…

…oid unnecessary logs in sentry, also log information to provide more data case profiling failded (#193)

apps/eo_web/dist/manifest.json

@@ -18,7 +18,7 @@
     "css": [
       "assets/main-17ed8018.css"
     ],
-    "file": "assets/main-6aa514b9.js",
+    "file": "assets/main-40e0c178.js",
     "isEntry": true,
     "src": "src/main.tsx"
   }

apps/eo_web/package.json

@@ -19,6 +19,7 @@
     "@headlessui/react": "^1.7.13",
     "@hookform/resolvers": "^3.6.0",
     "@react-oauth/google": "^0.9.0",
+    "@sentry/react": "^8.13.0",
     "@tanstack/react-query": "^4.29.3",
     "@tanstack/react-query-devtools": "^5.45.1",
     "autoprefixer": "^10.4.14",

apps/eo_web/src/App.tsx

@@ -3,9 +3,12 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ToastContainer } from "react-toastify";
 
 import { env } from "./env";
+
+import "./configs/env";
+
 import { Router } from "./router";
-import "react-toastify/dist/ReactToastify.css";
 
+import "react-toastify/dist/ReactToastify.css";
 
 const queryClient = new QueryClient();
 type Hosts =
@@ -37,6 +40,8 @@ interface EnvironmentsConfigs {
   ROI_CALCULATOR_FORM: string;
   WEB_APP_URL: string;
   CHECKOUT_FORM_ID: string;
+  VITE_SENTRY_DSN_PUBLIC: string;
+  VITE_ENV: string;
 }
 
 declare global {
@@ -67,7 +72,7 @@ function App() {
         draggable
         pauseOnHover
       />
-      {env.VITE_APP_ENV === "local" && (
+      {env.VITE_APP_ENV === "localhost" && (
         <ReactQueryDevtools initialIsOpen={false} />
       )}
     </QueryClientProvider>

apps/eo_web/src/api/useApi.ts

@@ -134,11 +134,8 @@ export const useApi = () => {
       authHeader,
     );
 
-  const eligibleEmail = async (email: string) =>
-    await apiElixir.post<LaravelSuccessBase<unknown> | LaravelErrorValidation>(
-      "/v2/profiles/eligible",
-      { email },
-    );
+  const eligibleEmail = (email: string) =>
+    apiLaravel.post<void>(`/api/profiles/eligible`, { email });
 
   const surveyStatus = async (email: string, phase: string) =>
     await apiElixir.get<{ active: boolean }>(

apps/eo_web/src/api/useProfile.ts

@@ -0,0 +1,24 @@
+import { useQuery, type UseQueryOptions } from "@tanstack/react-query";
+
+import { useApi } from "~/api/useApi";
+
+const useProfilesKeys = {
+  eligibleEmailQuery: (email: string) => ["eligibleEmail", email],
+};
+
+export const useProfile = () => {
+  const { eligibleEmail } = useApi();
+  const useEligibleEmailQuery = (
+    email: string,
+    extraConfig: Partial<UseQueryOptions>,
+  ) =>
+    useQuery({
+      queryKey: useProfilesKeys.eligibleEmailQuery(email),
+      queryFn: () => eligibleEmail(email),
+      ...extraConfig,
+    });
+
+  return {
+    useEligibleEmailQuery,
+  };
+};

apps/eo_web/src/components/Carousel.tsx

@@ -4,19 +4,15 @@ import { type Swiper as SwiperType } from "swiper";
 import { A11y, Navigation, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 
-import { useIsDesktop, useIsMobile } from "~/hooks/useIsMobile";
-// Import Swiper styles
+import { useIsDesktop, useIsMobile } from "~/hooks/useIsMobile"; // Import Swiper styles
 import "swiper/css";
 import "swiper/css/pagination";
-import React, { Fragment, useRef } from "react";
+
+import React, { useId, useRef } from "react";
 
 import { tw } from "@eo/shared";
 import { icons } from "@eo/ui";
 
-
-
-
-
 export interface EoCarouselProps {
   children: React.ReactNode[];
 }
@@ -25,6 +21,7 @@ export const EoCarousel = ({ children }: EoCarouselProps) => {
   const isMobile = useIsMobile();
   const isDesktop = useIsDesktop();
   const swiperRef = useRef<SwiperType>();
+  const id = useId();
 
   return (
     <div className="relative mx-auto my-0 flex flex-row items-center justify-center md:max-w-[1440px]">
@@ -59,11 +56,9 @@ export const EoCarousel = ({ children }: EoCarouselProps) => {
         >
           {children.map((item, key) => {
             return (
-              <Fragment key={`${key}`}>
-                <SwiperSlide>
-                  <div className="mb-12">{item}</div>
-                </SwiperSlide>
-              </Fragment>
+              <SwiperSlide key={`${id}-${key}`}>
+                <div className="mb-12">{item}</div>
+              </SwiperSlide>
             );
           })}
         </Swiper>

apps/eo_web/src/components/FAQs.tsx

@@ -1,12 +1,11 @@
-import React from "react";
+import React, { useId } from "react";
 
 import { Typography } from "@eo/ui";
 
 import { cOrgFaqs, inovaFaqs, paidFaqs, pilotFaqs } from "~/copy/copy";
 import { Flows, type FlowType } from "~/stores/useProfilingStore";
 import { Collapsible } from "./Collapsible";
 
-
 interface FAQsProps {
   flow?: FlowType;
 }
@@ -24,10 +23,7 @@ const flowsWithCOrgFaqs: FlowType[] = [
   Flows.stupid_cancer,
 ];
 
-const flowsWithInovaFaqs: FlowType[] = [
-  Flows.inova,
-  Flows.uva,
-];
+const flowsWithInovaFaqs: FlowType[] = [Flows.inova, Flows.uva];
 
 const getFAQCopies = (flow?: FlowType) => {
   if (flow && flowsWithCOrgFaqs.includes(flow)) return cOrgFaqs;
@@ -39,6 +35,7 @@ const getFAQCopies = (flow?: FlowType) => {
 
 export const FAQs = ({ flow }: FAQsProps) => {
   const faqList = getFAQCopies(flow);
+  const faqId = useId();
 
   return (
     <section className="px-6 py-12 md:mx-0 md:my-[100px]">
@@ -52,7 +49,7 @@ export const FAQs = ({ flow }: FAQsProps) => {
         </Typography>
         <div className="flex flex-col gap-6">
           {faqList.map(({ title, content }) => (
-            <Collapsible key={title} title={title} active={false}>
+            <Collapsible key={`${title}-${faqId}`} title={title} active={false}>
               <Typography className="text-[18px] leading-[26px] text-gray-800">
                 {content}
               </Typography>

apps/eo_web/src/components/HowEOWorks.tsx

@@ -11,7 +11,6 @@ import {
 import { Flows, type FlowType } from "~/stores/useProfilingStore";
 import { EoCarousel } from "./Carousel";
 
-
 interface HowEOWorksProps {
   flow?: FlowType;
 }
@@ -37,9 +36,9 @@ export const HowEOWorks = ({ flow }: HowEOWorksProps) => {
           : "How EO Care Plans Work"}
       </Typography>
       <EoCarousel>
-        {carouselItems.map(({ title, content, step, icon: Icon }) => (
+        {carouselItems.map(({ title, content, step, icon: Icon }, index) => (
           <article
-            key={step}
+            key={`${title}-${step}-${index}`}
             className="mx-auto my-0 flex h-auto w-auto max-w-[361px] flex-col items-center justify-center gap-2 md:flex-none md:items-start"
           >
             <div className="flex h-[70.13px] w-[70.13px] flex-row items-center justify-center rounded-full bg-electric-blue fill-gray-50">

apps/eo_web/src/env.ts

@@ -1,11 +1,12 @@
 import { omit } from "lodash/fp";
-import { ZodError, z } from "zod";
+import { z, ZodError } from "zod"; // We've defined here the validations & schema for making sure the env vars ARE correct.
 
 // We've defined here the validations & schema for making sure the env vars ARE correct.
 const defaultValidation = z.string().min(1, "Env Var is not defined");
 const envSchema = z.object({
   VITE_APP_ENV: defaultValidation,
   VITE_APP_URL: defaultValidation,
+  VITE_SENTRY_DSN_PUBLIC: z.string().nullish(),
 });
 
 type EnvValues = z.infer<typeof envSchema>;

apps/eo_web/src/helpers/sentry.ts

@@ -0,0 +1,48 @@
+import React from "react";
+import * as Sentry from "@sentry/react";
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType,
+} from "react-router-dom";
+
+import { env } from "~/env";
+
+
+const sentryDns =
+  window.data.getEnv("VITE_SENTRY_DSN_PUBLIC") ?? env.VITE_SENTRY_DSN_PUBLIC;
+
+if (sentryDns) {
+  Sentry.init({
+    environment: window.data.getEnv("VITE_ENV") ?? env.VITE_APP_ENV,
+    dsn: sentryDns,
+    integrations: [
+      Sentry.reactRouterV6BrowserTracingIntegration({
+        useEffect: React.useEffect,
+        useLocation,
+        useNavigationType,
+        createRoutesFromChildren,
+        matchRoutes,
+      }),
+      Sentry.replayIntegration({
+        // Additional SDK configuration goes in here, for example:
+        maskAllText: true,
+        blockAllMedia: true,
+      }),
+    ],
+    // Performance Monitoring
+    tracesSampleRate: 1.0, //  Capture 100% of the transactions
+    // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+    tracePropagationTargets: [
+      "localhost",
+      "www.eo.care",
+      "partner.eo.care",
+      "eo-marketing-06cbaf66a5b1fbfeecb0ca9525.webflow.io",
+      "eo-marketing.webflow.io",
+    ],
+    // Session Replay
+    replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+    replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+  });
+}

apps/eo_web/src/main.tsx

@@ -1,9 +1,12 @@
+import "./helpers/sentry";
 import "vite/modulepreload-polyfill";
+
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 
 import App from "./App";
+
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(

apps/eo_web/src/router/Router.tsx

@@ -16,12 +16,16 @@ import { Home } from "~/screens/Home";
 import { Login } from "~/screens/Login";
 import { PrePlan } from "~/screens/PrePlan";
 import { PrePlanV2 } from "~/screens/PrePlanV2";
+import { ProfilingOne } from "~/screens/profiling/ProfilingOne";
+import { ProfilingOneRedirect } from "~/screens/profiling/ProfilingOneRedirect";
+import { ProfilingTwo } from "~/screens/profiling/ProfilingTwo";
+import { ProfilingTwoRedirect } from "~/screens/profiling/ProfilingTwoRedirect";
 import { ProfilingIntroQuestions } from "~/screens/ProfilingIntroQuestions";
 import { ProfilingThankYou } from "~/screens/ProfilingThankYou";
-import { ROICalculator } from "~/screens/ROICalculator";
 import { RecoveryPassword } from "~/screens/RecoveryPassword";
 import { Register } from "~/screens/Register";
 import { RegisterComplete } from "~/screens/RegisterComplete";
+import { ROICalculator } from "~/screens/ROICalculator";
 import { RoiCalculatorThankYou } from "~/screens/RoiCalculatorThankYou";
 import { Profiling as SeniorProfiling } from "~/screens/Senior/Profiling";
 import { SeniorSurveyForm } from "~/screens/Senior/SeniorSurveyForm";
@@ -30,10 +34,6 @@ import { StartPlan } from "~/screens/StartPlan";
 import { UnavailableZipCode } from "~/screens/UnavailableZipCode";
 import { UserRolSelector } from "~/screens/UserRolSelector";
 import { ZipCodeValidation } from "~/screens/ZipCodeValidation";
-import { ProfilingOne } from "~/screens/profiling/ProfilingOne";
-import { ProfilingOneRedirect } from "~/screens/profiling/ProfilingOneRedirect";
-import { ProfilingTwo } from "~/screens/profiling/ProfilingTwo";
-import { ProfilingTwoRedirect } from "~/screens/profiling/ProfilingTwoRedirect";
 import { ProtectedRoute } from "./ProtectedRoute";