feat: implement ErrorBoundary component for enhanced error handling in HomePage #deploy

Author: myselfshravan

src/components/ErrorBoundary.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { Switch } from '@headlessui/react'
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="my-2 rounded-md bg-red-50 p-4 dark:bg-red-900/20">
+          <div className="flex flex-col items-center justify-center">
+            <h3 className="mb-2 text-lg font-semibold text-red-800 dark:text-red-200">
+              Unable to Load Data
+            </h3>
+            <p className="mb-4 text-center text-red-700 dark:text-red-300">
+              {this.state.error?.message ||
+                'An error occurred while loading the data. Please try switching semesters or try again.'}
+            </p>
+            <div className="flex flex-col items-center gap-4">
+              <div className="flex items-center gap-2">
+                <p className="text-sm font-semibold">Try switching semester:</p>
+                <Switch
+                  checked={this.props.enabled}
+                  onChange={this.props.onToggle}
+                  className={`${
+                    this.props.enabled
+                      ? 'bg-blue-600'
+                      : 'bg-white dark:bg-gray-500'
+                  } relative inline-flex h-6 w-11 items-center rounded-full`}
+                >
+                  <span
+                    className={`${
+                      this.props.enabled ? 'translate-x-6' : 'translate-x-1'
+                    } inline-block h-4 w-4 transform rounded-full bg-gray-200 transition dark:bg-white`}
+                  />
+                </Switch>
+                <span className="text-sm">
+                  {this.props.enabled ? 'Even' : 'Odd'} Sem
+                </span>
+              </div>
+              <button
+                onClick={this.props.onRetry}
+                className="rounded bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700"
+              >
+                Try Again
+              </button>
+            </div>
+          </div>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

src/pages/minisis.jsx

@@ -25,6 +25,7 @@ import { BadgeCheck, Target, TrendingUp } from 'lucide-react'
 import { Switch } from '@headlessui/react'
 import AcademicHistory from '@/components/AcademicHistory'
 import LoginHistory from '@/components/LoginHistory'
+import ErrorBoundary from '@/components/ErrorBoundary'
 
 if (!firebase.apps.length) {
   firebase.initializeApp(firebaseConfig)
@@ -747,18 +748,29 @@ function HomePage() {
         apiurl = 'https://reconnect-msrit.vercel.app/test'
       }
       const response = await fetch(apiurl)
-      if (!response.ok) {
-        if (response.status === 500) {
-          const error = new Error(
-            'Server error: This endpoint is currently inactive. Try switching the semester toggle to use a different endpoint.'
-          )
-          error.isEndpointError = true
-          throw error
+      let data;
+      try {
+        if (!response.ok) {
+          if (response.status === 500) {
+            const error = new Error(
+              'Server error: This endpoint is currently inactive. Try switching the semester toggle to use a different endpoint.'
+            )
+            error.isEndpointError = true
+            // Throw error to be caught by error boundary
+            throw error
+          }
+          const resp = await response.json()
+          throw new Error(resp.error || 'Failed to fetch data.')
         }
-        const resp = await response.json()
-        throw new Error(resp.error || 'Failed to fetch data.')
+        data = await response.json()
+      } catch (error) {
+        // Set error state and clear data
+        setStudentData(null)
+        setError(error.message || 'An unexpected error occurred')
+        setHasError(true)
+        // Re-throw the error to be caught by error boundary
+        throw error
       }
-      const data = await response.json()
       localStorage.setItem('usn', currentUsn)
       localStorage.setItem('dob', currentDob)
       localStorage.setItem('studentData', JSON.stringify(data))
@@ -1068,6 +1080,15 @@ function HomePage() {
           ) : (
             <section className="flex w-full items-center justify-center bg-indigo-50 pb-8 dark:bg-gray-900 sm:py-2">
               <div className="max-w-3xl lg:mx-auto lg:w-full">
+                <ErrorBoundary 
+                  enabled={enabled}
+                  onToggle={(value) => {
+                    setEnabled(value)
+                    localStorage.setItem('semesterToggle', value)
+                    handleFetchData(usn, dob)
+                  }}
+                  onRetry={() => handleFetchData(usn, dob)}
+                >
                 {studentData && (
                   <>
                     <div className="my-2 rounded-md shadow-md dark:bg-gray-800">
@@ -1255,6 +1276,7 @@ function HomePage() {
                     )}
                   </>
                 )}
+                </ErrorBoundary>
                 <div className="mt-4 flex justify-center gap-4">
                   <button
                     onClick={handleReload}