Capture failed turnstile challenges to sentry (#738)

* Capture failed turnstile challenges to sentry

* Address comments

* prettier

* warning

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 [email protected] 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 [email protected] 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) => {

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>
   );
 };

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>;