perf: ignore CancelledError in all queries, and show error message in route pages

src/layouts/app-layout.vue

@@ -17,7 +17,7 @@ import type { AxiosError } from 'axios';
 import { destr } from 'destr';
 import { NBadge, NButton, NDropdown, NFlex, NIcon, NLayout, NLayoutContent, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NScrollbar, type DropdownOption, type MenuOption } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { h, onBeforeMount, onBeforeUnmount, onMounted, ref, type Component, type VNode } from 'vue';
+import { h, onBeforeMount, onBeforeUnmount, onMounted, ref, watch, type Component, type VNode } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 
 const userStore = useUserStore();
@@ -28,7 +28,13 @@ const stompClient = ref<StompClient | null>(null);
 const currentAlarmsStore = useCurrentAlarmsStore();
 const { currentAlarmCount, needReload } = storeToRefs(currentAlarmsStore);
 
-useStationListQuery();
+const { error: stationListQueryError } = useStationListQuery();
+
+watch(stationListQueryError, (newStationListQueryError) => {
+  if (newStationListQueryError) {
+    window.$message.error(newStationListQueryError.message);
+  }
+});
 
 onBeforeMount(() => {
   userStore.userGetInfo().catch((err) => window.$message.error((err as AxiosError).message));