Add missing error handling

src/components/settings/DeviceSetting.tsx

@@ -20,6 +20,8 @@ import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarC
 import { ActiveDevice, DEFAULT_DEVICE } from '@/util/device.ts';
 import { Select } from '@/components/atoms/Select.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 export const DeviceSetting = () => {
     const { t } = useTranslation();
@@ -41,6 +43,7 @@ export const DeviceSetting = () => {
         metadata,
         settings: { devices },
         loading,
+        request: { error, refetch },
     } = useMetadataServerSettings();
 
     const { activeDevice, setActiveDevice } = useContext(ActiveDevice);
@@ -67,6 +70,16 @@ export const DeviceSetting = () => {
         return <LoadingPlaceholder />;
     }
 
+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('DeviceSetting::refetch'))}
+            />
+        );
+    }
+
     return (
         <List>
             <MutableListSetting