fix: error boundaries

Author: toto04

package.json

@@ -38,6 +38,7 @@
     "next-themes": "^0.4.6",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
+    "react-error-boundary": "^6.1.0",
     "react-icons": "^5.5.0",
     "react-spinners": "^0.17.0",
     "sonner": "^2.0.7",

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 import { useSuspenseQuery } from "@tanstack/react-query"
 import { Link, useParams } from "@tanstack/react-router"
 import { Suspense } from "react"
+import { ErrorBoundary } from "react-error-boundary"
 import { LuArrowRight, LuHouse } from "react-icons/lu"
 import { useQueries } from "@/hooks/use-queries"
 import { numberToRoman } from "@/utils/strings/numbers"
@@ -41,10 +42,12 @@ export default function PathBreadcrumb() {
       </div>
       {params.id && (
         <Suspense fallback={null}>
-          <div className="flex items-center justify-center gap-2">
-            <LuArrowRight size={18} />
-            <RankingInfo id={params.id} withBadgeOutline />
-          </div>
+          <ErrorBoundary fallback={null}>
+            <div className="flex items-center justify-center gap-2">
+              <LuArrowRight size={18} />
+              <RankingInfo id={params.id} withBadgeOutline />
+            </div>
+          </ErrorBoundary>
         </Suspense>
       )}
     </div>
@@ -63,8 +66,6 @@ export function RankingInfo({
   const q = useQueries()
   const ranking = useSuspenseQuery(q.ranking(id))
 
-  if (ranking.error) return null
-
   const Content = () => (
     <>
       <Badge