More exception handling for navbarTotalAssetTable

There were some cases that navbarTotalAssetTable's balance value becamse NaN due to unpredictable reasons during asynchronous operations
KnightChaser · Jun 2, 2024 · e7a64cf · e7a64cf
1 parent 0c1034e
commit e7a64cf
Showing 1 changed file with 64 additions and 32 deletions.
diff --git a/frontend/src/components/navbarTotalAssetTable.svelte b/frontend/src/components/navbarTotalAssetTable.svelte
@@ -1,4 +1,4 @@
-<!-- components/navbarTotalAssetTable -->
+<!-- components/navbarTotalAssetTable.svelte -->
 <script>
     import { onMount, onDestroy } from "svelte";
     import { sessionValidityCheck } from "../utils/sessionValidityCheck";
@@ -12,44 +12,76 @@
     let fetchAssetDataAndUpdateIntervalId;
     let navbarTotalAssetTableSetIntervalId;
 
+    // There are possibilities that the total asset value is NaN due to 
+    // the asynchronous nature of the fetchAssetDataAndUpdate function and other unpredictable reasons.
+    // Therefore, we need to handle the case where the total asset value is NaN thoroughly.
     onMount(() => {
-        navbarTotalAssetTableCountUp = new CountUp(
-            totalAssetValueElement,
-            $totalKRW.KRW,
-            {
-                duration: 0.5,
-                separator: ",",
-                decimal: ".",
-                prefix: "₩",
-                startVal: $totalKRW.KRW,
-                plugin: new Odometer({
+        try {
+            navbarTotalAssetTableCountUp = new CountUp(
+                totalAssetValueElement,
+                $totalKRW.KRW,
+                {
                     duration: 0.5,
-                    lastDigitDelay: 0,
-                }),
-            }
-        );
-        navbarTotalAssetTableCountUp.start();
+                    separator: ",",
+                    decimal: ".",
+                    prefix: "₩",
+                    startVal: $totalKRW.KRW,
+                    plugin: new Odometer({
+                        duration: 0.5,
+                        lastDigitDelay: 0,
+                    }),
+                }
+            );
+            navbarTotalAssetTableCountUp.start();
 
-        // Subscribe to store changes to update countup
-        totalKRW.subscribe(($totalKRW) => {
-            navbarTotalAssetTableCountUp.update($totalKRW.KRW);
-        });
+            // Subscribe to store changes to update countup
+            totalKRW.subscribe(($totalKRW) => {
+                try {
+                    if (isNaN($totalKRW.KRW)) {
+                        throw new Error("Retrieved value is NaN");
+                    }
+                    navbarTotalAssetTableCountUp.update($totalKRW.KRW);
+                } catch (error) {
+                    console.error("Error updating total asset value:", error);
+                }
+            });
 
-        fetchAssetDataAndUpdateIntervalId = setInterval(() => {
-            sessionValidityCheck();
-            fetchDataAndUpdate();
-        }, 1000);
+            // Fetch data every 1 second
+            fetchAssetDataAndUpdateIntervalId = setInterval(() => {
+                try {
+                    sessionValidityCheck();
+                    fetchDataAndUpdate();
+                } catch (error) {
+                    console.error("Error fetching data and updating:", error);
+                }
+            }, 1000);
 
-        // Fetch data every 1 second
-        navbarTotalAssetTableSetIntervalId = setInterval(() => {
-            navbarTotalAssetTableCountUp.update($totalKRW.KRW);
-        }, 500);
+            // Fetch data every 1 second
+            navbarTotalAssetTableSetIntervalId = setInterval(() => {
+                try {
+                    if (isNaN($totalKRW.KRW)) {
+                        throw new Error("Retrieved value is NaN");
+                    }
+                    // Prevent the total asset value from being NaN
+                    navbarTotalAssetTableCountUp.update($totalKRW.KRW);
+                } catch (error) {
+                    // If error occurs, leave the log and continue refreshing
+                    console.error("Error updating total asset value:", error);
+                }
+            }, 500);
+        } catch (error) {
+            console.error("Error initializing CountUp:", error);
+        }
     });
     
     onDestroy(() => {
-        navbarTotalAssetTableCountUp.reset();
-        clearInterval(fetchAssetDataAndUpdateIntervalId);
-        clearInterval(navbarTotalAssetTableSetIntervalId);
+        try {
+            navbarTotalAssetTableCountUp.reset();
+            clearInterval(fetchAssetDataAndUpdateIntervalId);
+            clearInterval(navbarTotalAssetTableSetIntervalId);
+        } catch (error) {
+            console.error("Error during component destruction:", error);
+        }
     });
 </script>
 
@@ -59,4 +91,4 @@
         class="text-gray-800 text-lg font-semibold xl"
         bind:this={totalAssetValueElement}
     ></div>
-</div>
+</div>