Frontend error handling for openai api failing

UniversityOfHelsinkiCS · Mar 17, 2023 · d00ac68 · d00ac68
1 parent 0254e8a
commit d00ac68
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 6 deletions.
diff --git a/src/client/App.tsx b/src/client/App.tsx
@@ -13,7 +13,7 @@ const App = () => {
 
   return (
     <ThemeProvider theme={theme}>
-      <SnackbarProvider>
+      <SnackbarProvider preventDuplicate>
         <Box
           sx={{
             minHeight: '100vh',

diff --git a/src/client/components/ResultPage/Openai/CourseCompletion.tsx b/src/client/components/ResultPage/Openai/CourseCompletion.tsx
@@ -1,21 +1,35 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Box, Button, Typography, TextField } from '@mui/material'
+import { enqueueSnackbar } from 'notistack'
 
 import useOpenaiCompletion from '../../../hooks/useOpenaiCompletion'
 import LoadingProgress from './LoadingProgress'
 import styles from '../styles'
 
 const classes = styles.cardStyles
 
-const CompletionResult = ({ courseName }: { courseName: string }) => {
+const CompletionResult = ({
+  courseName,
+  setShowCompletion,
+}: {
+  courseName: string
+  setShowCompletion: React.Dispatch<React.SetStateAction<boolean>>
+}) => {
   const { t } = useTranslation()
   const prompt = t('openai:courseCompletionPrompt', { courseName })
 
   const { completion, isLoading } = useOpenaiCompletion(prompt, 'course')
 
   if (isLoading) return <LoadingProgress />
 
+  if (!completion) {
+    enqueueSnackbar(t('openai:apiErrorMessage'), { variant: 'error' })
+    setShowCompletion(false)
+
+    return null
+  }
+
   return (
     <Box sx={classes.outerBox}>
       <Typography variant="body1" p={3} whiteSpace="pre-line">
@@ -52,7 +66,12 @@ const CourseCompletion = () => {
           {t('openai:send')}
         </Button>
       </Box>
-      {showCompletion && <CompletionResult courseName={courseName} />}
+      {showCompletion && (
+        <CompletionResult
+          courseName={courseName}
+          setShowCompletion={setShowCompletion}
+        />
+      )}
     </Box>
   )
 }

diff --git a/src/client/components/ResultPage/Openai/DimensionCompletion.tsx b/src/client/components/ResultPage/Openai/DimensionCompletion.tsx
@@ -10,6 +10,8 @@ import {
   MenuItem,
 } from '@mui/material'
 import { UseFormWatch, FieldValues } from 'react-hook-form'
+import { enqueueSnackbar } from 'notistack'
+
 import useOpenaiCompletion from '../../../hooks/useOpenaiCompletion'
 import useSurvey from '../../../hooks/useSurvey'
 import LoadingProgress from './LoadingProgress'
@@ -21,8 +23,10 @@ const classes = styles.cardStyles
 
 const CompletionResult = ({
   dimension,
+  setShowCompletion,
 }: {
   dimension: DimensionSelectionData
+  setShowCompletion: React.Dispatch<React.SetStateAction<boolean>>
 }) => {
   const { t, i18n } = useTranslation()
 
@@ -44,6 +48,13 @@ const CompletionResult = ({
 
   if (isLoading) return <LoadingProgress />
 
+  if (!completion) {
+    enqueueSnackbar(t('openai:apiErrorMessage'), { variant: 'error' })
+    setShowCompletion(false)
+
+    return null
+  }
+
   return (
     <Box sx={classes.outerBox}>
       <Typography variant="body1" p={3} whiteSpace="pre-line">
@@ -107,6 +118,7 @@ const DimensionCompletion = ({
       {showCompletion && (
         <CompletionResult
           dimension={dimensions.find(({ id }) => id === dimensionId)}
+          setShowCompletion={setShowCompletion}
         />
       )}
     </Box>

diff --git a/src/client/locales/en.json b/src/client/locales/en.json
@@ -55,7 +55,8 @@
     "dimensionSelect": "Dimension",
     "dimensionCompletionPrompt": "How can I support the topic \"{{dimensionName}}\" in a university course? Give 3 examples using the software {{recommendations}}?",
     "send": "Send",
-    "or": " or "
+    "or": " or ",
+    "apiErrorMessage": "No response from the server"
   },
   "admin": {
     "selectDimension": "Valitse oppimismuoto",

diff --git a/src/client/locales/fi.json b/src/client/locales/fi.json
@@ -54,7 +54,8 @@
     "dimensionSelect": "Oppimismuoto",
     "dimensionCompletionPrompt": "Kuinka voin tukea aihetta \"{{dimensionName}}\" yliopistokurssilla? Anna 3 esimerkkiä käyttäen ohjelmistoa {{recommendations}}?",
     "send": "Lähetä",
-    "or": " tai "
+    "or": " tai ",
+    "apiErrorMessage": "Palvelimeen ei saatu yhteyttä"
   },
   "admin": {
     "selectDimension": "Valitse oppimismuoto",

diff --git a/src/client/locales/sv.json b/src/client/locales/sv.json
@@ -53,7 +53,8 @@
     "dimensionSelect": "Oppimismuoto",
     "dimensionCompletionPrompt": "Kuinka voin tukea aihetta \"{{dimensionName}}\" yliopistokurssilla? Anna 3 esimerkkiä käyttäen ohjelmistoa {{recommendations}}?",
     "send": "Lähetä",
-    "or": " tai "
+    "or": " tai ",
+    "apiErrorMessage": "Palvelimeen ei saatu yhteyttä"
   },
   "admin": {
     "selectDimension": "Valitse oppimismuoto",