feat: implement try/catch blocks on calls to fetch guild, channel, and messages

components/MessageArea.vue

@@ -56,10 +56,16 @@ const messagesType = ref<Record<string, "normal" | "grouped">>({});
 const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference
 const timeFormat = getPreferredTimeFormat()
 
-const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
+let messagesRes: MessageResponse[] | undefined;
+
+try {
+	messagesRes = await fetchWithApi(
 		`${props.channelUrl}/messages`,
 		{ query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } }
 	);
+} catch (error) {
+	console.error("Failed to fetch messages:", error);
+}
 
 const firstMessageByUsers = ref<Record<string, MessageResponse | undefined>>({});
 const previousMessage = ref<MessageResponse>();

pages/servers/[serverId]/channels/[channelId].vue

@@ -16,8 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { GuildMemberResponse } from '~/types/interfaces';
+import type { ChannelResponse, GuildMemberResponse, GuildResponse } from '~/types/interfaces';
-
 
 const route = useRoute();
 const { fetchGuild, fetchChannel } = useApi()
@@ -27,8 +26,20 @@ const guildId = route.params.serverId as string
 
 const channelUrlPath = `channels/${channelId}`;
 
-const guild = await fetchGuild(guildId)
+let guild: GuildResponse | undefined;
-const channel = await fetchChannel(channelId)
+let channel: ChannelResponse | undefined;
+
+try {
+	guild = await fetchGuild(guildId)
+} catch (error) {
+	console.error("Failed to fetch guild:", error);
+}
+
+try {
+	channel = await fetchChannel(channelId)
+} catch (error) {
+	console.error("Failed to fetch channel:", error);
+}
 
 const { fetchMeMember } = useApi();
 const me = useState<GuildMemberResponse | undefined>("me");