feat: Pois icons ,Add error handling for fetch and database operations

- Added try-catch block in MapComponent.js to handle errors during fetch operation
- Added try-catch block in API route to handle errors during database query

This improves the robustness and error tolerance of the application by ensuring errors are properly caught and logged.

components/MapComponent.js

@@ -1193,15 +1193,23 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   useEffect(() => {
     const fetchPoiData = async () => {
-      const response = await fetch("/api/talas_v5_DB/pois/poi-icons");
+      try {
-      const data = await response.json();
+        const response = await fetch("/api/talas_v5_DB/pois/poi-icons");
-      setPoiData(data);
+        if (!response.ok) {
-      //console.log("poiData icons:", data);
+          throw new Error("Network response was not ok");
+        }
+        const data = await response.json();
+        setPoiData(data);
+        console.log("poiData data:", data);
+        console.log("poiData icons:", poiData);
+      } catch (error) {
+        console.error("Fehler beim Abrufen der poiData:", error);
+      }
     };
 
     fetchPoiData();
   }, []);
-
+  //--------------------------------------------
   useEffect(() => {
     try {
       if (map && poiLayerRef.current && isPoiTypLoaded) {
@@ -2088,13 +2096,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       try {
         const response = await fetch(webserviceGisLinesStatusUrl);
         const data = await response.json();
-        console.log("data.Statis: ", data);
+        //console.log("data.Statis: ", data);
         const colorsByModule = {};
         data.Statis.forEach((item) => {
           colorsByModule[item.Modul] = item.PrioColor;
         });
         setLineColors(colorsByModule);
-        console.log("colorsByModule", colorsByModule);
+        //console.log("colorsByModule", colorsByModule);
       } catch (error) {
         console.error("Fehler beim Abrufen der linesColorApi Daten:", error);
       }
@@ -2104,7 +2112,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   // Überwachen des lineColors Zustandes
   useEffect(() => {
-    console.log("Aktualisierte lineColors", lineColors);
+    //console.log("Aktualisierte lineColors", lineColors);
   }, [lineColors]);
 
   const [linePositions, setLinePositions] = useState([]);

pages/api/talas_v5_DB/pois/poi-icons.js

@@ -2,35 +2,41 @@
 import mysql from "mysql";
 
 const dbConfig = {
-  //host: "10.10.0.13",
-  //host: "localhost",
   host: process.env.DB_HOST,
   user: process.env.DB_USER,
   password: process.env.DB_PASSWORD,
   database: process.env.DB_NAME,
   port: process.env.DB_PORT,
 };
+
 const connection = mysql.createConnection(dbConfig);
+
 connection.connect((err) => {
   if (err) {
     console.error("Fehler beim Verbinden:", err.stack);
     return;
   }
 });
+
 export default function handler(req, res) {
   if (req.method !== "GET") {
     return res.status(405).json({ error: "Nur GET Methode erlaubt" });
   }
 
   const query = `SELECT p.idPoi, i.path
-  FROM poi p
+                 FROM poi p
-  JOIN poiTyp pt ON p.idPoiTyp = pt.idPoiTyp
+                 JOIN poiTyp pt ON p.idPoiTyp = pt.idPoiTyp
-  JOIN poiicons i ON pt.icon = i.idpoiicons;`;
+                 JOIN poiicons i ON pt.icon = i.idpoiicons;`;
+
   connection.query(query, (error, results) => {
-    if (error) {
+    try {
-      console.error("Fehler beim Abrufen der icons:", error);
+      if (error) {
-      return res.status(500).json({ error: "Fehler beim Abrufen der icons" });
+        throw error;
+      }
+      res.json(results);
+    } catch (err) {
+      console.error("Fehler beim Abrufen der icons:", err);
+      res.status(500).json({ error: "Fehler beim Abrufen der icons" });
     }
-    res.json(results);
   });
 }