Telemetry improvements

package.json

@@ -45,7 +45,7 @@
     "@nivo/bar": "^0.80.0",
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
-    "@sentry/nextjs": "^8.35.0",
+    "@sentry/nextjs": "^8.47.0",
     "@storybook/addon-controls": "^7.5.3",
     "@storybook/client-api": "^7.5.3",
     "@storybook/testing-react": "^2.0.1",
@@ -54,8 +54,8 @@
     "@xstate/fsm": "^2.0.0",
     "@xstate/inspect": "^0.7.1",
     "@xstate/react": "^3.2.2",
-    "axios": "^1.7.4",
-    "axios-cache-interceptor": "^1",
+    "axios": "^1.7.7",
+    "axios-cache-interceptor": "^1.5.2",
     "better-react-mathjax": "^2.0.1",
     "chakra-dayzed-datepicker": "^0.2.9",
     "clsx": "^1.1.1",
@@ -109,10 +109,10 @@
     "@eslint/js": "^9.17.0",
     "@faker-js/faker": "^6.0.0",
     "@mswjs/interceptors": "^0.19.0",
-    "@playwright/browser-chromium": "^1.39.0",
-    "@playwright/browser-firefox": "^1.39.0",
-    "@playwright/browser-webkit": "^1.39.0",
-    "@playwright/test": "^1.39.0",
+    "@playwright/browser-chromium": "^1.49.1",
+    "@playwright/browser-firefox": "^1.49.1",
+    "@playwright/browser-webkit": "^1.49.1",
+    "@playwright/test": "^1.49.1",
     "@storybook/addon-actions": "^7.5.3",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-links": "^7.5.3",

sentry.client.config.ts

@@ -30,5 +30,6 @@ Sentry.init({
     Sentry.browserTracingIntegration({
       enableInp: true,
     }),
+    Sentry.feedbackIntegration(),
   ],
 });

src/pages/_app.tsx

@@ -1,22 +1,15 @@
-import { ChakraProvider } from '@chakra-ui/react';
-
-import { useCreateQueryClient } from '@/lib/useCreateQueryClient';
-import { MathJaxProvider } from '@/mathjax';
-import { AppState, StoreProvider, useCreateStore, useStore, useStoreApi } from '@/store';
-import { theme } from '@/theme';
+import { AppState, useStore, useStoreApi } from '@/store';
 import { AppMode } from '@/types';
 import { AppProps, NextWebVitalsMetric } from 'next/app';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import 'nprogress/nprogress.css';
-import { FC, memo, ReactElement, useEffect, useMemo } from 'react';
-import { DehydratedState, Hydrate, QueryClientProvider, useQuery, useQueryClient } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { memo, ReactElement, useEffect, useMemo } from 'react';
+import { DehydratedState, useQuery, useQueryClient } from '@tanstack/react-query';
 import { IronSession } from 'iron-session';
 import axios from 'axios';
 import { isNilOrEmpty, notEqual } from 'ramda-adjunct';
 import { useUser } from '@/lib/useUser';
-import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
 import '../styles/styles.css';
 import '../styles/page-loader.css';
 import { logger } from '@/logger';
@@ -27,6 +20,7 @@ import { Layout } from '@/components/Layout';
 import { useIsClient } from '@/lib/useIsClient';
 import api, { checkUserData } from '@/api/api';
 import { userKeys } from '@/api/user/user';
+import { Providers } from '@/providers';
 
 if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled' && process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line @typescript-eslint/no-require-imports
@@ -77,30 +71,6 @@ const NectarApp = memo(({ Component, pageProps }: AppProps): ReactElement => {
 });
 NectarApp.displayName = 'NectarApp';
 
-const Providers: FC<{ pageProps: AppPageProps }> = ({ children, pageProps }) => {
-  const createStore = useCreateStore(pageProps.dehydratedAppState ?? {});
-
-  return (
-    <GoogleReCaptchaProvider reCaptchaKey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY ?? ''}>
-      <MathJaxProvider>
-        <ChakraProvider theme={theme}>
-          <StoreProvider createStore={createStore}>
-            <QCProvider>
-              <Hydrate state={pageProps.dehydratedState}>{children}</Hydrate>
-              <ReactQueryDevtools />
-            </QCProvider>
-          </StoreProvider>
-        </ChakraProvider>
-      </MathJaxProvider>
-    </GoogleReCaptchaProvider>
-  );
-};
-
-const QCProvider: FC = ({ children }) => {
-  const queryClient = useCreateQueryClient();
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
-};
-
 const AppModeRouter = (): ReactElement => {
   const mode = useStore((state) => state.mode);
   const router = useRouter();
@@ -113,7 +83,7 @@ const AppModeRouter = (): ReactElement => {
         void router.replace('/');
       }
     }
-  }, [mode, router.asPath]);
+  }, [mode, router.asPath, isClient, router]);
 
   return <></>;
 };

src/pages/feedback/general.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-misused-promises */
 import {
   AlertStatus,
   Button,
@@ -13,6 +12,7 @@ import {
   Textarea,
   useDisclosure,
 } from '@chakra-ui/react';
+import * as Sentry from '@sentry/nextjs';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useStore } from '@/store';
@@ -41,6 +41,7 @@ import { useGetUserEmail } from '@/lib/useGetUserEmail';
 import { makeSearchParams } from '@/utils/common/search';
 import { parseAPIError } from '@/utils/common/parseAPIError';
 import { useFeedback } from '@/api/feedback/feedback';
+import { logger } from '@/logger';
 
 type FormValues = {
   name: string;
@@ -148,6 +149,19 @@ const General: NextPage = () => {
             },
           },
         );
+
+        try {
+          const eventId = Sentry.captureMessage('Feedback submitted');
+          const feedback = {
+            name,
+            email: userEmail ?? 'anonymous',
+            message: comments,
+            associatedEventId: eventId,
+          };
+          Sentry.captureFeedback(feedback);
+        } catch {
+          logger.error('Failed to send feedback to analytics');
+        }
       } catch (e) {
         setFormError(e as Error);
       }

src/providers.tsx

@@ -0,0 +1,98 @@
+import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
+import { MathJaxProvider } from './mathjax';
+import { ChakraProvider } from '@chakra-ui/react';
+import { AppState, StoreProvider, useCreateStore, useStore } from './store';
+import { DehydratedState, Hydrate, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { FC, useEffect } from 'react';
+import { useCreateQueryClient } from './lib/useCreateQueryClient';
+import { logger } from './logger';
+import { theme } from './theme';
+import shallow from 'zustand/shallow';
+import * as Sentry from '@sentry/nextjs';
+import { IADSApiSearchParams } from './api/search/types';
+
+const windowState = {
+  navigationStart: performance?.timeOrigin || performance?.timing?.navigationStart || 0,
+};
+
+type AppPageProps = {
+  dehydratedState: DehydratedState;
+  dehydratedAppState: AppState;
+  [key: string]: unknown;
+};
+
+export const Providers: FC<{ pageProps: AppPageProps }> = ({ children, pageProps }) => {
+  const createStore = useCreateStore(pageProps.dehydratedAppState ?? {});
+
+  return (
+    <GoogleReCaptchaProvider reCaptchaKey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY ?? ''}>
+      <MathJaxProvider>
+        <ChakraProvider theme={theme}>
+          <StoreProvider createStore={createStore}>
+            <QCProvider>
+              <Hydrate state={pageProps.dehydratedState}>
+                <Telemetry />
+                {children}
+              </Hydrate>
+              <ReactQueryDevtools />
+            </QCProvider>
+          </StoreProvider>
+        </ChakraProvider>
+      </MathJaxProvider>
+    </GoogleReCaptchaProvider>
+  );
+};
+
+const QCProvider: FC = ({ children }) => {
+  const queryClient = useCreateQueryClient();
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+};
+
+const Telemetry: FC = () => {
+  const query = useStore((state) => state.query, shallow);
+  const user = useStore((state) => state.user, shallow);
+  const docs = useStore((state) => state.docs.current, shallow);
+  logger.debug({ query, user }, 'Telemetry');
+
+  useEffect(() => {
+    try {
+      if (user) {
+        Sentry.setUser({
+          id: user?.access_token,
+          anonymous: user.anonymous,
+        });
+      }
+
+      if (query) {
+        sendQueryAsTags(query);
+      }
+
+      if (docs && docs.length > 0) {
+        logger.debug({ docs }, 'Telemetry: docs');
+        sendResultsLoaded();
+      }
+    } catch (err) {
+      logger.error({ err }, 'Telemetry: error');
+    }
+  }, [query, user, docs]);
+
+  return <></>;
+};
+
+const sendQueryAsTags = (query: IADSApiSearchParams) => {
+  Object.keys(query).forEach((key) => {
+    const value = JSON.stringify(query[key]);
+    if (Array.isArray(value)) {
+      Sentry.setTag(`query.${key}`, value.join(' | '));
+    } else {
+      Sentry.setTag(`query.${key}`, value);
+    }
+  });
+};
+
+const sendResultsLoaded = () => {
+  const loadedTime = performance.now();
+  const duration = loadedTime - windowState.navigationStart;
+  Sentry.setMeasurement('timing.results.shown', duration, 'millisecond');
+};

src/store/slices/search.ts

@@ -56,13 +56,9 @@ export const searchSlice: StoreSlice<ISearchState & ISearchAction> = (set) => ({
 
   // can only be updated using `submitQuery` which just moves the current query over
   latestQuery: defaultQueryParams,
-
   prevQuery: defaultQueryParams,
-
   numPerPage: APP_DEFAULTS.RESULT_PER_PAGE,
-
   showHighlights: false,
-
   queryAddition: null,
   clearQueryFlag: false,
 

src/store/store.ts

@@ -19,7 +19,6 @@ import { IUserData } from '@/api/user/types';
 
 export const APP_STORAGE_KEY = 'nectar-app-state';
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const createStore = (preloadedState: Partial<AppState> = {}) => {
   const state = (set: NamedSet<AppState>, get: GetState<AppState>) => ({
     ...searchSlice(set, get),
@@ -74,7 +73,7 @@ export const useCreateStore = (incomingState: Partial<AppState> = {}): (() => St
   }
 
   if (process.env.NODE_ENV === 'development') {
-    logger.debug({ msg: 'useCreateStore', incomingState });
+    logger.debug({ incomingState }, 'useCreateStore');
   }
 
   // initialize the store