diff --git a/config-ui/src/App.tsx b/config-ui/src/App.tsx
index 433c7a16fd81..11757250e680 100644
--- a/config-ui/src/App.tsx
+++ b/config-ui/src/App.tsx
@@ -16,11 +16,8 @@
  *
  */
 
-import { useEffect } from 'react';
 import { createBrowserRouter, Navigate, RouterProvider, json } from 'react-router-dom';
 
-import { useAppDispatch, useAppSelector } from '@/app/hook';
-import { init, selectStatus } from '@/features';
 import { PageLoading } from '@/components';
 import {
   ConnectionHomePage,
@@ -103,17 +100,4 @@ const router = createBrowserRouter([
   },
 ]);
 
-export const App = () => {
-  const dispatch = useAppDispatch();
-  const status = useAppSelector(selectStatus);
-
-  useEffect(() => {
-    dispatch(init());
-  }, []);
-
-  if (['idle', 'loading'].includes(status)) {
-    return <PageLoading />;
-  }
-
-  return <RouterProvider router={router} fallbackElement={<PageLoading />} />;
-};
+export const App = () => <RouterProvider router={router} fallbackElement={<PageLoading />} />;
diff --git a/config-ui/src/features/connections/slice.ts b/config-ui/src/features/connections/slice.ts
index f0494f929aaf..1d8126bebe42 100644
--- a/config-ui/src/features/connections/slice.ts
+++ b/config-ui/src/features/connections/slice.ts
@@ -35,9 +35,17 @@ const initialState: {
 };
 
 export const init = createAsyncThunk('connections/init', async () => {
+  const getConnections = async (plugin: string) => {
+    try {
+      return API.connection.list(plugin);
+    } catch {
+      return [];
+    }
+  };
+
   const res = await Promise.all(
     PluginConfig.map(async ({ plugin }) => {
-      const connections = await API.connection.list(plugin);
+      const connections = await getConnections(plugin);
       return connections.map((connection) => transformConnection(plugin, connection));
     }),
   );
diff --git a/config-ui/src/routes/layout/layout.tsx b/config-ui/src/routes/layout/layout.tsx
index de136ae4d404..b1c9a67a01e6 100644
--- a/config-ui/src/routes/layout/layout.tsx
+++ b/config-ui/src/routes/layout/layout.tsx
@@ -16,12 +16,14 @@
  *
  */
 
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useLoaderData, Outlet, useNavigate, useLocation } from 'react-router-dom';
 import { CSSTransition } from 'react-transition-group';
 import { Menu, MenuItem, Navbar, Alignment } from '@blueprintjs/core';
 
-import { Logo, ExternalLink, IconButton } from '@/components';
+import { useAppDispatch, useAppSelector } from '@/app/hook';
+import { PageLoading, Logo, ExternalLink, IconButton } from '@/components';
+import { init, selectStatus } from '@/features';
 import { DOC_URL } from '@/release';
 import { TipsContextProvider, TipsContextConsumer } from '@/store';
 
@@ -42,10 +44,21 @@ export const Layout = () => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
 
+  const dispatch = useAppDispatch();
+  const status = useAppSelector(selectStatus);
+
   const menu = useMenu();
 
   const tipsRef = useRef(null);
 
+  useEffect(() => {
+    dispatch(init());
+  }, []);
+
+  if (['idle', 'loading'].includes(status)) {
+    return <PageLoading />;
+  }
+
   const handlePushPath = (it: MenuItemType) => {
     if (!it.target) {
       navigate(it.path);