feat: add error boundary

src/components/PageComponents/Map/NodeDetail.tsx

@@ -1,8 +1,8 @@
-import { Separator } from "../../UI/Seperator.tsx";
-import { H5 } from "@app/components/UI/Typography/H5.tsx";
+import { Separator } from "@app/components/UI/Seperator.tsx";
+import { Heading } from "@app/components/UI/Typography/Heading.tsx";
 import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
-import { formatQuantity } from "../../../core/utils/string.ts";
-import { Avatar } from "../../UI/Avatar.tsx";
+import { formatQuantity } from "@app/core/utils/string.ts";
+import { Avatar } from "@components/UI/Avatar.tsx";
 import { Mono } from "@components/generic/Mono.tsx";
 import { TimeAgo } from "@components/generic/TimeAgo.tsx";
 import { Protobuf } from "@meshtastic/core";
@@ -34,7 +34,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
     <div className="dark:text-slate-900 p-1">
       <div className="flex gap-2">
         <div className="flex flex-col items-center gap-2 min-w-6 pt-1">
-          <Avatar text={node.user?.shortName} />
+          <Avatar text={node.user?.shortName ?? "UNK"} />
 
           <div>
             {node.user?.publicKey && node.user?.publicKey.length > 0
@@ -64,24 +64,23 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
         </div>
 
         <div>
-          <H5>{name}</H5>
+          <Heading as="h5">{name}</Heading>
 
           {hardwareType !== "UNSET" && <Subtle>{hardwareType}</Subtle>}
 
           {!!node.deviceMetrics?.batteryLevel && (
             <div
               className="flex items-center gap-1"
-              title={`${
-                node.deviceMetrics?.voltage?.toPrecision(3) ?? "Unknown"
-              } volts`}
+              title={`${node.deviceMetrics?.voltage?.toPrecision(3) ?? "Unknown"
+                } volts`}
             >
               {node.deviceMetrics?.batteryLevel > 100
                 ? <BatteryChargingIcon size={22} />
                 : node.deviceMetrics?.batteryLevel > 80
-                ? <BatteryFullIcon size={22} />
-                : node.deviceMetrics?.batteryLevel > 20
-                ? <BatteryMediumIcon size={22} />
-                : <BatteryLowIcon size={22} />}
+                  ? <BatteryFullIcon size={22} />
+                  : node.deviceMetrics?.batteryLevel > 20
+                    ? <BatteryMediumIcon size={22} />
+                    : <BatteryLowIcon size={22} />}
               <Subtle aria-label="Battery">
                 {node.deviceMetrics?.batteryLevel > 100
                   ? "Charging"

src/components/PageComponents/Messages/Message.tsx

@@ -146,7 +146,7 @@ export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => {
           {!lastMsgSameUser
             ? (
               <div className="flex place-items-center gap-2 mb-1">
-                <Avatar text={messageUser?.shortName} />
+                <Avatar text={messageUser?.shortName ?? "UNK"} />
                 <div className="flex flex-col">
                   <span className="font-medium text-slate-900 dark:text-white truncate">
                     {messageUser?.longName}