fixes

packages/ui/src/interface/board/index.tsx

@@ -65,7 +65,7 @@ const Board: React.FC<BoardProps> = ({ board, id }) => {
           ))}
         </Masonry>
       </View>
-    </View>
+    </Wrapper>
   );
 };
 

packages/ui/src/interface/error/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+type State = {
+  hasError: boolean;
+  error?: unknown;
+};
+
+type Props = {
+  children: React.ReactNode;
+};
+
+class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: unknown) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    console.error('componentDidCatch', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <h1>Something went wrong.</h1>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export { ErrorBoundary };

packages/ui/src/interface/index.ts

@@ -4,3 +4,4 @@ export * from './notifications';
 export * from './widget';
 export * from './board';
 export * from './app';
+export * from './error';

packages/ui/src/interface/widget/index.tsx

@@ -19,6 +19,7 @@ import { DropdownMenu } from '../../base';
 import { useCallback, useMemo, useState } from 'react';
 import { Typography } from '../../typography';
 import { NotificationView } from './notification';
+import { ErrorBoundary } from '../error';
 
 type WidgetProps = {
   id: string;
@@ -129,7 +130,9 @@ const Widget: React.FC<WidgetProps> = ({
             <Dialog.Overlay />
             <Dialog.Content maxWidth="90vw" height="90vh">
               <Dialog.CloseButton />
+              <ErrorBoundary>
                 <WidgetView />
+              </ErrorBoundary>
             </Dialog.Content>
           </Dialog.Portal>
         </Dialog>
@@ -169,7 +172,9 @@ const Widget: React.FC<WidgetProps> = ({
       >
         <Wrapper className={className} $fr>
           <WidgetWrapper $f={1}>
+            <ErrorBoundary>
               <WidgetView />
+            </ErrorBoundary>
           </WidgetWrapper>
         </Wrapper>
       </motion.div>
@@ -179,7 +184,9 @@ const Widget: React.FC<WidgetProps> = ({
           <Dialog.Content>
             <Dialog.Title>Edit Widget</Dialog.Title>
             <Dialog.Description>
+              <ErrorBoundary>
                 <WidgetEditor onSave={onSave} />
+              </ErrorBoundary>
             </Dialog.Description>
           </Dialog.Content>
         </Dialog.Portal>