fix(devtools): add error boundary wrapper for each tabs

.changeset/khaki-dryers-hunt.md

@@ -0,0 +1,5 @@
+---
+'@modern-js/devtools-client': patch
+---
+
+fix(devtools): unwrap suspense proxy as object

packages/devtools/client/package.json

@@ -63,6 +63,7 @@
     "react-dom": "^18.2.0",
     "react-dom-exp": "npm:[email protected]",
     "react-exp": "npm:[email protected]",
+    "react-error-boundary": "^4.0.12",
     "react-icons": "^4.11.0",
     "react-is": "^18",
     "react-json-tree": "^0.18.0",

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} />;
+};

packages/devtools/client/src/entries/client/routes/config/error.tsx

@@ -0,0 +1,3 @@
+import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+
+export default ErrorRouteHandler;

packages/devtools/client/src/entries/client/routes/context/error.tsx

@@ -0,0 +1,3 @@
+import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+
+export default ErrorRouteHandler;

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} />;
 };
 

packages/devtools/client/src/entries/client/routes/error.tsx

@@ -0,0 +1,3 @@
+import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+
+export default ErrorRouteHandler;

packages/devtools/client/src/entries/client/routes/headers/error.tsx

@@ -0,0 +1,3 @@
+import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+
+export default ErrorRouteHandler;

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 {

packages/devtools/client/src/entries/client/routes/overview/error.tsx

@@ -0,0 +1,3 @@
+import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+
+export default ErrorRouteHandler;

packages/devtools/client/src/entries/client/routes/pages/error.tsx

@@ -0,0 +1,3 @@
+import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+
+export default ErrorRouteHandler;

packages/devtools/client/src/entries/client/routes/react/error.tsx

@@ -0,0 +1,3 @@
+import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+
+export default ErrorRouteHandler;

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