Merge pull request #35 from Azure-Samples/32-improve-the-exception-handling

Update the application to display the error message in the frontend

Author: pmalarme

src/ai-shopping-cart-service/src/main/resources/application.properties

@@ -1,5 +1,7 @@
 logging.level.org.hibernate.SQL=INFO
 
+server.error.include-message = always
+
 spring.datasource.url=<add your URL here>
 spring.datasource.username=<add your username here>
 spring.datasource.password=<add your password here>

src/frontend/src/components/AiNutritionAnalysis.tsx

@@ -25,14 +25,30 @@ export class AiNutritionAnalysis extends React.Component<AiNutritionAnalysisProp
   };
 
   componentDidMount(): void {
+    let responseOk: boolean = true;
     fetch(`${API_URL}/api/cart-items/ai-nutrition-analysis`)
-      .then((response) => response.json())
-      .then((data) => this.setState({
-        nutriscore: data.nutriscore,
-        explanation: data.explanation,
-        recommendation: data.recommendation,
-        status: Status.LOADED
-      }))
+      .then((response) => {
+        responseOk = response.ok;
+        return response.json()
+      })
+      .then((data) => {
+        if (!responseOk) {
+          this.setState({
+            nutriscore: '',
+            explanation: '',
+            recommendation: '',
+            status: Status.ERROR,
+            errorMessage: data.message,
+          });
+        } else {
+          this.setState({
+            nutriscore: data.nutriscore,
+            explanation: data.explanation,
+            recommendation: data.recommendation,
+            status: Status.LOADED
+          });
+        }
+      })
       .catch((error) => this.setState({
         nutriscore: '',
         explanation: '',

src/frontend/src/components/Top3Recipes.tsx

@@ -28,12 +28,26 @@ export class Top3Recipes extends React.Component<RecipesProps, RecipesState> {
   };
 
   componentDidMount(): void {
+    let responseOk: boolean = true;
     fetch(`${API_URL}/api/cart-items/top-3-recipes`)
-      .then((response) => response.json())
-      .then((data) => this.setState({
-        recipes: data.recipes,
-        status: Status.LOADED
-      }))
+      .then((response) => {
+        responseOk = response.ok;
+        return response.json()
+      })
+      .then((data) => {
+        if (!responseOk) {
+          this.setState({
+            recipes: [] as Array<Recipe>,
+            status: Status.ERROR,
+            errorMessage: data.message
+          });
+        } else {
+          this.setState({
+            recipes: data.recipes,
+            status: Status.LOADED
+          });
+        }
+      })
       .catch((error) => this.setState({
         recipes: [] as Array<Recipe>,
         status: Status.ERROR,
@@ -57,6 +71,9 @@ export class Top3Recipes extends React.Component<RecipesProps, RecipesState> {
   }
 
   getHtmlForRecipes(): Array<JSX.Element> {
+    if (this.state === undefined || this.state.recipes === undefined || this.state.recipes.length === 0) {
+      return [<Card.Text key='no-recipes'>No recipes found</Card.Text>];
+    }
     return this.state.recipes.map((recipe) => this.getRecipeHtml(recipe));
   }