diff --git a/.changeset/khaki-dryers-hunt.md b/.changeset/khaki-dryers-hunt.md
new file mode 100644
index 000000000000..c8e3586b46b9
--- /dev/null
+++ b/.changeset/khaki-dryers-hunt.md
@@ -0,0 +1,5 @@
+---
+'@modern-js/devtools-client': patch
+---
+
+fix(devtools): unwrap suspense proxy as object
diff --git a/packages/devtools/client/package.json b/packages/devtools/client/package.json
index 9dc1bc80954f..d8ca8f3afd30 100644
--- a/packages/devtools/client/package.json
+++ b/packages/devtools/client/package.json
@@ -63,6 +63,7 @@
     "react-dom": "^18.2.0",
     "react-dom-exp": "npm:react-dom@0.0.0-experimental-51ffd3564-20231025",
     "react-exp": "npm:react@0.0.0-experimental-51ffd3564-20231025",
+    "react-error-boundary": "^4.0.12",
     "react-icons": "^4.11.0",
     "react-is": "^18",
     "react-json-tree": "^0.18.0",
diff --git a/packages/devtools/client/src/components/ErrorFallback/ErrorFallback.tsx b/packages/devtools/client/src/components/ErrorFallback/ErrorFallback.tsx
new file mode 100644
index 000000000000..f0356b35f15b
--- /dev/null
+++ b/packages/devtools/client/src/components/ErrorFallback/ErrorFallback.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { FallbackProps } from 'react-error-boundary';
+import { useRouteError } from '@modern-js/runtime/router';
+import { Box, Heading, Text, TextArea } from '@radix-ui/themes';
+
+export type ErrorFallbackProps = FallbackProps;
+
+export const ErrorFallback: React.FC<ErrorFallbackProps> = props => {
+  const { error } = props;
+  const title =
+    error instanceof Error
+      ? `${error.name}: ${error.message}`
+      : 'Unknown Error';
+  const description =
+    error instanceof Error
+      ? error.stack
+      : Object.prototype.toString.call(error);
+
+  return (
+    <Box p="4">
+      <Heading as="h4" mb="4">
+        <Text as="span">{title}</Text>
+      </Heading>
+      <TextArea disabled style={{ height: '50vh' }}>
+        {description}
+      </TextArea>
+    </Box>
+  );
+};
+
+export const ErrorRouteHandler: React.FC<ErrorFallbackProps> = props => {
+  const error = useRouteError();
+  return <ErrorFallback {...props} error={error} />;
+};
diff --git a/packages/devtools/client/src/components/ErrorFallback/index.ts b/packages/devtools/client/src/components/ErrorFallback/index.ts
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/packages/devtools/client/src/entries/client/routes/config/error.tsx b/packages/devtools/client/src/entries/client/routes/config/error.tsx
new file mode 100644
index 000000000000..fc315e95a4f8
--- /dev/null
+++ b/packages/devtools/client/src/entries/client/routes/config/error.tsx
@@ -0,0 +1,3 @@
+import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+
+export default ErrorRouteHandler;
diff --git a/packages/devtools/client/src/entries/client/routes/context/error.tsx b/packages/devtools/client/src/entries/client/routes/context/error.tsx
new file mode 100644
index 000000000000..fc315e95a4f8
--- /dev/null
+++ b/packages/devtools/client/src/entries/client/routes/context/error.tsx
@@ -0,0 +1,3 @@
+import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+
+export default ErrorRouteHandler;
diff --git a/packages/devtools/client/src/entries/client/routes/context/framework/page.tsx b/packages/devtools/client/src/entries/client/routes/context/framework/page.tsx
index 987e53e2e794..9a9fca1de3ef 100644
--- a/packages/devtools/client/src/entries/client/routes/context/framework/page.tsx
+++ b/packages/devtools/client/src/entries/client/routes/context/framework/page.tsx
@@ -4,7 +4,7 @@ import { $framework } from '../../state';
 import { ObjectInspector } from '@/components/ObjectInspector';
 
 const Page: React.FC = () => {
-  const context = useSnapshot($framework.context);
+  const { context } = useSnapshot($framework);
   return <ObjectInspector data={context} sortObjectKeys={true} />;
 };
 
diff --git a/packages/devtools/client/src/entries/client/routes/error.tsx b/packages/devtools/client/src/entries/client/routes/error.tsx
new file mode 100644
index 000000000000..fc315e95a4f8
--- /dev/null
+++ b/packages/devtools/client/src/entries/client/routes/error.tsx
@@ -0,0 +1,3 @@
+import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+
+export default ErrorRouteHandler;
diff --git a/packages/devtools/client/src/entries/client/routes/headers/error.tsx b/packages/devtools/client/src/entries/client/routes/headers/error.tsx
new file mode 100644
index 000000000000..fc315e95a4f8
--- /dev/null
+++ b/packages/devtools/client/src/entries/client/routes/headers/error.tsx
@@ -0,0 +1,3 @@
+import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+
+export default ErrorRouteHandler;
diff --git a/packages/devtools/client/src/entries/client/routes/layout.module.scss b/packages/devtools/client/src/entries/client/routes/layout.module.scss
index 4d99a8b90543..842f4367c635 100644
--- a/packages/devtools/client/src/entries/client/routes/layout.module.scss
+++ b/packages/devtools/client/src/entries/client/routes/layout.module.scss
@@ -13,7 +13,6 @@
 
 .inner-right {
   padding-top: var(--breadcrumb-height);
-  background-color: var(--gray-2);
 }
 
 .container {
@@ -28,6 +27,7 @@
   width: var(--navigator-width);
   border-right: solid 1px var(--gray-3);
   padding: var(--space-1) 0;
+  background-color: var(--gray-1);
 }
 
 .breadcrumbs {
diff --git a/packages/devtools/client/src/entries/client/routes/overview/error.tsx b/packages/devtools/client/src/entries/client/routes/overview/error.tsx
new file mode 100644
index 000000000000..fc315e95a4f8
--- /dev/null
+++ b/packages/devtools/client/src/entries/client/routes/overview/error.tsx
@@ -0,0 +1,3 @@
+import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+
+export default ErrorRouteHandler;
diff --git a/packages/devtools/client/src/entries/client/routes/pages/error.tsx b/packages/devtools/client/src/entries/client/routes/pages/error.tsx
new file mode 100644
index 000000000000..fc315e95a4f8
--- /dev/null
+++ b/packages/devtools/client/src/entries/client/routes/pages/error.tsx
@@ -0,0 +1,3 @@
+import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+
+export default ErrorRouteHandler;
diff --git a/packages/devtools/client/src/entries/client/routes/react/error.tsx b/packages/devtools/client/src/entries/client/routes/react/error.tsx
new file mode 100644
index 000000000000..fc315e95a4f8
--- /dev/null
+++ b/packages/devtools/client/src/entries/client/routes/react/error.tsx
@@ -0,0 +1,3 @@
+import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+
+export default ErrorRouteHandler;
diff --git a/packages/devtools/client/src/styles/theme.scss b/packages/devtools/client/src/styles/theme.scss
index 4afd2cbab297..0c53f57d61c0 100644
--- a/packages/devtools/client/src/styles/theme.scss
+++ b/packages/devtools/client/src/styles/theme.scss
@@ -1,6 +1,10 @@
 @import '@radix-ui/themes/styles.css';
 @import './breakpoints.scss';
 
+:root {
+  --color-page-background: var(--gray-2) !important;
+}
+
 button {
   cursor: pointer;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 93abaace4b36..2b306030a288 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1440,6 +1440,9 @@ importers:
       react-dom-exp:
         specifier: npm:react-dom@0.0.0-experimental-51ffd3564-20231025
         version: /react-dom@0.0.0-experimental-51ffd3564-20231025(react@18.2.0)
+      react-error-boundary:
+        specifier: ^4.0.12
+        version: 4.0.12(react@18.2.0)
       react-exp:
         specifier: npm:react@0.0.0-experimental-51ffd3564-20231025
         version: /react@0.0.0-experimental-51ffd3564-20231025
@@ -29014,6 +29017,15 @@ packages:
       react-is: 18.1.0
     dev: false
 
+  /react-error-boundary@4.0.12(react@18.2.0):
+    resolution: {integrity: sha512-kJdxdEYlb7CPC1A0SeUY38cHpjuu6UkvzKiAmqmOFL21VRfMhOcWxTCBgLVCO0VEMh9JhFNcVaXlV4/BTpiwOA==}
+    peerDependencies:
+      react: '>=16.13.1'
+    dependencies:
+      '@babel/runtime': 7.23.2
+      react: 18.2.0
+    dev: true
+
   /react-fast-compare@3.2.0:
     resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==}