Use ErrorBoundary for Peers and refresh to pins on mount

src/components/Peers/PeerCountryCell.tsx

@@ -3,6 +3,7 @@ import { PeerPin } from "./types";
 import { countriesCoordinates } from "./countries";
 import { useQuery } from "@tanstack/react-query";
 import "./PeerCountryCell.css";
+import { useEffect } from "react";
 
 export type Props = {
   address: string;
@@ -24,21 +25,12 @@ export function PeerCountryCell({ address, onPinAdd }: Props) {
 
       return fetch(import.meta.env.VITE_GEO_IP_URL + "/" + ip)
         .then((res) => res.json())
-        .then((json) => {
-          const coordinate = countriesCoordinates.find(
-            (c) => c.iso === json.country
-          );
-
-          if (coordinate) {
-            onPinAdd({
-              lat: parseFloat(coordinate.lat),
-              lng: parseFloat(coordinate.lng),
-            });
-          }
-
-          return coordinate;
-        });
+        .then((json) =>
+          countriesCoordinates.find((c) => c.iso === json.country)
+        );
     },
+    refetchOnMount: true,
+
     queryKey: [address],
 
     // Enable only when the address exists
@@ -56,6 +48,15 @@ export function PeerCountryCell({ address, onPinAdd }: Props) {
     refetchOnWindowFocus: false,
   });
 
+  useEffect(() => {
+    if (data) {
+      onPinAdd({
+        lat: parseFloat(data.lat),
+        lng: parseFloat(data.lng),
+      });
+    }
+  }, [data]);
+
   return (
     <Cell>
       <div className="peerCountry">

src/routes/dashboard/peers.tsx

@@ -9,6 +9,8 @@ import { useCallback, useState } from "react";
 import { PeerPin } from "../../components/Peers/types";
 import "./peers.css";
 import { CodexSdk } from "../../sdk/codex";
+import { ErrorBoundary } from "@sentry/react";
+import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceholder";
 
 // This function accepts the same arguments as DottedMap in the example above.
 const mapJsonString = getMapJSON({ height: 60, grid: "diagonal" });
@@ -102,5 +104,12 @@ const Peers = () => {
 };
 
 export const Route = createFileRoute("/dashboard/peers")({
-  component: Peers,
+  component: () => (
+    <ErrorBoundary
+      fallback={({ error }) => (
+        <ErrorPlaceholder error={error} subtitle="Cannot retrieve the data." />
+      )}>
+      <Peers />
+    </ErrorBoundary>
+  ),
 });