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

src/composables/query/alarm/use-line-alarm-counts-query.ts

@@ -2,7 +2,7 @@ import { LINE_ALARM_COUNTS_QUERY_KEY } from '@/constants';
 import { useLineAlarmCountsStore } from '@/stores/line-alarm-counts';
 import { useQueryControlStore } from '@/stores/query-control';
 import { useStationStore } from '@/stores/station';
-import { useMutation, useQuery } from '@tanstack/vue-query';
+import { isCancelledError, useMutation, useQuery } from '@tanstack/vue-query';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import dayjs from 'dayjs';
@@ -101,8 +101,11 @@ function useStationAlarmCountsMutation() {
       });
     },
     onError: (error, { station }) => {
-      console.error(`获取车站 ${station.name} 设备告警数据失败:`, error);
-      lineAlarmCounts.value[station.code] = createEmptyStationAlarmCounts();
+      if (!isCancelledError(error)) {
+        console.error(`获取车站 ${station.name} 设备告警数据失败:`, error);
+        lineAlarmCounts.value[station.code] = createEmptyStationAlarmCounts();
+        throw error;
+      }
     },
   });
 }

src/composables/query/device/use-line-devices-query.ts

@@ -1,7 +1,7 @@
 import { DeviceType } from '@/enums/device-type';
 import { useQueryControlStore } from '@/stores/query-control';
 import { useStationStore } from '@/stores/station';
-import { useMutation, useQuery } from '@tanstack/vue-query';
+import { isCancelledError, useMutation, useQuery } from '@tanstack/vue-query';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import type { StationDevices } from './domains';
@@ -84,8 +84,11 @@ function useStationDevicesMutation() {
       });
     },
     onError: (error, { station }) => {
-      console.error(`获取车站 ${station.name} 设备数据失败:`, error);
-      lineDevices.value[station.code] = createEmptyStationDevices();
+      if (!isCancelledError(error)) {
+        console.error(`获取车站 ${station.name} 设备数据失败:`, error);
+        lineDevices.value[station.code] = createEmptyStationDevices();
+        throw error;
+      }
     },
   });
 }

src/composables/query/station/use-station-list-query.ts

@@ -4,7 +4,7 @@ import { STATION_LIST_QUERY_KEY } from '@/constants';
 import { useQueryControlStore } from '@/stores/query-control';
 import { useStationStore } from '@/stores/station';
 import { getAppEnvConfig } from '@/utils/env';
-import { useMutation, useQuery } from '@tanstack/vue-query';
+import { isCancelledError, useMutation, useQuery } from '@tanstack/vue-query';
 import axios from 'axios';
 import dayjs from 'dayjs';
 import { storeToRefs } from 'pinia';
@@ -60,5 +60,10 @@ function useStationListMutation() {
         stationList.value.splice(0, stationList.value.length, ...stations);
       }
     },
+    onError: (error) => {
+      if (!isCancelledError(error)) {
+        throw error;
+      }
+    },
   });
 }

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));

src/pages/dashboard-page.vue

@@ -20,8 +20,8 @@ const { lineDevices } = storeToRefs(lineDevicesStore);
 const lineAlarmCountsStore = useLineAlarmCountsStore();
 const { lineAlarmCounts } = storeToRefs(lineAlarmCountsStore);
 
-const { isFetching: lineDevicesFetching } = useLineDevicesQuery();
-const { isFetching: lineAlarmCountsFetching } = useLineAlarmCountsQuery();
+const { isFetching: lineDevicesFetching, error: lineDevicesQueryError } = useLineDevicesQuery();
+const { isFetching: lineAlarmCountsFetching, error: lineAlarmCountsQueryError } = useLineAlarmCountsQuery();
 const layoutStore = useLayoutStore();
 const { stationLayoutGridCols } = storeToRefs(layoutStore);
 
@@ -40,6 +40,15 @@ watch(
   },
 );
 
+watch([lineDevicesQueryError, lineAlarmCountsQueryError], ([newLineDevicesQueryError, newLineAlarmCountsQueryError]) => {
+  if (newLineDevicesQueryError) {
+    window.$message.error(newLineDevicesQueryError.message);
+  }
+  if (newLineAlarmCountsQueryError) {
+    window.$message.error(newLineAlarmCountsQueryError.message);
+  }
+});
+
 const selectedStation = ref<Station>();
 const offlineDeviceTreeModalShow = ref(false);
 const deviceAlarmTreeModalShow = ref(false);

src/pages/device-page.vue

@@ -13,7 +13,7 @@ import DeviceTree from '@/components/device-page/device-tree.vue';
 import DeviceRenderer from '@/components/device-page/device-renderer.vue';
 
 // 数据获取
-const { isFetching: lineDevicesFetching } = useLineDevicesQuery();
+const { isFetching: lineDevicesFetching, error: lineDevicesQueryError } = useLineDevicesQuery();
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
 const lineDevicesStore = useLineDevicesStore();
@@ -47,6 +47,12 @@ watch(
     immediate: true,
   },
 );
+
+watch(lineDevicesQueryError, (newLineDevicesQueryError) => {
+  if (newLineDevicesQueryError) {
+    window.$message.error(newLineDevicesQueryError.message);
+  }
+});
 </script>
 
 <template>