diff --git a/packages/compass-collection/src/components/collection-tab.tsx b/packages/compass-collection/src/components/collection-tab.tsx index ebfc9cc911..3f038ef6f6 100644 --- a/packages/compass-collection/src/components/collection-tab.tsx +++ b/packages/compass-collection/src/components/collection-tab.tsx @@ -85,9 +85,35 @@ type CollectionTabProps = Omit & ConnectionTabConnectedProps & ConnectionTabExpectedProps; +function WithErrorBoundary({ + children, + name, + type, +}: { + children: React.ReactNode; + name: string; + type: 'content' | 'header'; +}) { + const { log, mongoLogId } = useLogger('COMPASS-COLLECTION-TAB-UI'); + return ( + { + log.error( + mongoLogId(1001000107), + 'Collection Workspace', + 'Rendering collection tab failed', + { name, type, error: error.stack, errorInfo } + ); + }} + > + {children} + + ); +} + function useCollectionTabs(props: CollectionMetadata) { const pluginTabs = useCollectionSubTabs(); - const { log, mongoLogId } = useLogger('COMPASS-COLLECTION-TAB-UI'); return pluginTabs.map(({ name, Content, Provider, Header }) => { // `pluginTabs` never change in runtime so it's safe to call the hook here // eslint-disable-next-line react-hooks/rules-of-hooks @@ -95,26 +121,18 @@ function useCollectionTabs(props: CollectionMetadata) { return { name, content: ( - { - log.error( - mongoLogId(1001000107), - 'Collection Workspace', - 'Rendering collection tab failed', - { name, error: error.stack, errorInfo } - ); - }} - > + - + ), title: ( - -
- + + +
+ + ), }; });