From 5b38a07b7e2a28e352e742e94840e69e73b93458 Mon Sep 17 00:00:00 2001
From: Henrik Skog <henrikskog01@gmail.com>
Date: Thu, 5 Sep 2024 23:29:40 +0200
Subject: [PATCH] Capture failed turnstile challenges to sentry (#738)

* Capture failed turnstile challenges to sentry

* Address comments

* prettier

* warning
---
 .../components/Attendance/AttendButton.tsx    | 23 +++++++++++++++----
 .../components/Attendance/CaptchaModal.tsx    |  8 ++++---
 src/pages/_app.tsx                            |  1 +
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/events/components/Attendance/AttendButton.tsx b/src/events/components/Attendance/AttendButton.tsx
index 25d9b268..4432d672 100644
--- a/src/events/components/Attendance/AttendButton.tsx
+++ b/src/events/components/Attendance/AttendButton.tsx
@@ -7,6 +7,8 @@ import { useToast } from 'core/utils/toast/useToast';
 import { unwrapResult } from '@reduxjs/toolkit';
 import style from './attendance.less';
 import { ConfirmModal } from '../../../common/components/Modal';
+import * as Sentry from '@sentry/browser';
+import { getUser } from '../../../authentication/api';
 
 interface IAttendButtonProps {
   eventId: number;
@@ -23,10 +25,7 @@ const FAILED_CAPTCHA_ERROR_TEXT = (
     <ul>
       <li>Last inn siden på nytt og prøv igjen.</li>
       <li>Prøv en annen nettleser. Vi vet at det har vært problemer med Firefox.</li>
-      <li>
-        Hvis du fortsatt får feil, så send en e-post til dotkom@online.ntnu.no så vi melder deg på manuelt. Vi setter pris på om du
-        kan oppgi eventuell feilmelding og hvilken nettleser og operativsystem du bruker for å kunne skjønne bedre hva som går galt.
-      </li>
+      <li>Hvis du fortsatt får feil, så send en e-post til dotkom@online.ntnu.no så vi melder deg på manuelt.</li>
     </ul>
   </>
 );
@@ -44,7 +43,8 @@ const AttendButton: FC<IAttendButtonProps> = (props: IAttendButtonProps) => {
         unwrapResult(action);
         addToast('Du har blitt meldt på arrangementet');
       } catch (err) {
-        addToast(`Noe gikk galt under påmeldelse av arrangement, ERROR: ${err.message}`, { type: 'error' });
+        const errorMessage = err instanceof Error ? err.message : 'Ukjent feil';
+        addToast(`Noe gikk galt under påmeldelse av arrangement, ERROR: ${errorMessage}`, { type: 'error' });
       }
     }
   };
@@ -55,6 +55,19 @@ const AttendButton: FC<IAttendButtonProps> = (props: IAttendButtonProps) => {
       toggleModal={toggleModal}
       setCaptcha={signUp}
       errorText={FAILED_CAPTCHA_ERROR_TEXT}
+      onError={async (error) => {
+        const user = await getUser();
+        Sentry.captureEvent({
+          message: 'User failed turnstile challenge when signing up for event.',
+          level: Sentry.Severity.Warning,
+          extra: {
+            error: error,
+          },
+          user: {
+            id: user?.profile.sub,
+          },
+        });
+      }}
     />
   );
   const onConfirmModalClose = (retValue: boolean) => {
diff --git a/src/events/components/Attendance/CaptchaModal.tsx b/src/events/components/Attendance/CaptchaModal.tsx
index daa7ef1f..f3bc13b4 100644
--- a/src/events/components/Attendance/CaptchaModal.tsx
+++ b/src/events/components/Attendance/CaptchaModal.tsx
@@ -10,10 +10,11 @@ interface ICaptchaModalProps {
   toggleModal: () => void;
   setCaptcha: (token: string | null) => void;
   errorText?: React.ReactNode | string;
+  onError: (error: Error) => void;
 }
 
 const CaptchaModal: FC<ICaptchaModalProps> = (props: ICaptchaModalProps) => {
-  const { showModal, toggleModal, setCaptcha, header, text, errorText } = props;
+  const { showModal, toggleModal, setCaptcha, header, text, errorText, onError } = props;
   const [showErrorText, setShowErrorText] = useState(true);
   const [turnstileError, setTurnstileError] = useState<string | null>(null);
 
@@ -25,8 +26,9 @@ const CaptchaModal: FC<ICaptchaModalProps> = (props: ICaptchaModalProps) => {
     //TODO Do something with unvalid token?
   };
 
-  const onError = (error: Error) => {
+  const _onError = (error: Error) => {
     console.log('Error from captcha failure:', error);
+    onError(error);
     setShowErrorText(true);
     setTurnstileError(error.message || 'Ingen feilmelding');
   };
@@ -39,7 +41,7 @@ const CaptchaModal: FC<ICaptchaModalProps> = (props: ICaptchaModalProps) => {
       <p>{text}</p>
       {showErrorText && <p>{errorText}</p>}
       {turnstileError && <p>Error message: {turnstileError}</p>}
-      <Turnstile sitekey={OW4_TURNSTILE_PUBLIC_KEY} onVerify={validCaptcha} onError={onError} />
+      <Turnstile sitekey={OW4_TURNSTILE_PUBLIC_KEY} onVerify={validCaptcha} onError={_onError} />
     </Modal>
   );
 };
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index fe52354a..e1b7e00d 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -30,6 +30,7 @@ if (__CLIENT__ && __PROD__) {
 
 Sentry.init({
   dsn: OWF_SENTRY_DSN,
+  environment: process.env.NODE_ENV,
 });
 
 type Props = AppProps & ReduxWrapperAppProps<State>;