DBC22-1735: basic error handling

Author: ray-oxd

src/backend/apps/shared/views.py

@@ -41,19 +41,26 @@ class FeedbackSerializer(Serializer):
 class FeedbackView(APIView):
     def post(self, request):
         serializer = FeedbackSerializer(data=request.data, context={"request": request})
-        serializer.is_valid()
-        # score = serializer.fields['recToken'].score
-        # serializer.data['subject']
-
-        send_mail(
-            "DriveBC Feedback message",
-            serializer.data['message'],
-            serializer.data['email'],
-            [env("DRIVEBC_FEEDBACK_EMAIL_DEFAULT")],
-            fail_silently=False,
-        )
 
-        return Response(data={}, status=status.HTTP_200_OK)
+        try:
+            serializer.is_valid()
+
+            # Currently unused but potentially important data
+            # score = serializer.fields['recToken'].score
+            # subject = serializer.data['subject']
+
+            send_mail(
+                "DriveBC Feedback message",
+                serializer.data['message'],
+                serializer.data['email'],
+                [env("DRIVEBC_FEEDBACK_EMAIL_DEFAULT")],
+                fail_silently=False,
+            )
+
+            return Response(data={}, status=status.HTTP_200_OK)
+
+        except Exception:
+            return Response(data={}, status=status.HTTP_400_BAD_REQUEST)
 
 
 class CachedListModelMixin:

src/frontend/src/pages/FeedbackPage.js

@@ -21,19 +21,22 @@ export default function FeedbackPage() {
   const [ email, setEmail ] = useState();
   const [ subject, setSubject ] = useState(0);
   const [ message, setMessage ] = useState();
+  const [ error, setError ] = useState(false);
   const [ success, setSuccess ] = useState(false);
 
   // Recaptcha
   const [ recToken, setRecToken ] = useState();
+  const refreshRecToken = async () => {
+    setRecToken(await executeRecaptcha('feedbackForm'));
+  }
 
   const { executeRecaptcha } = useGoogleReCaptcha();
   const handleReCaptchaVerify = useCallback(async () => {
     if (!executeRecaptcha) { // function not ready yet
       return;
     }
 
-    setRecToken(await executeRecaptcha('feedbackForm'));
-
+    refreshRecToken();
   }, [executeRecaptcha]);
 
   useEffect(() => {
@@ -62,6 +65,10 @@ export default function FeedbackPage() {
     })
     .catch((error) => {
       console.log(error);
+      setError(true);
+
+      // Refresh captcha token on error
+      refreshRecToken();
     });
   };
 
@@ -96,6 +103,10 @@ export default function FeedbackPage() {
             <Button variant="primary" type="submit">
               Send
             </Button>
+
+            {error &&
+              <span>Error on submission. Please try again.</span>
+            }
           </Form>
         </Container>
       }