with error boundary

mongodb-js · Sep 20, 2024 · f032ff1 · f032ff1
1 parent 49cfe1d
commit f032ff1
Showing 1 changed file with 34 additions and 16 deletions.
diff --git a/packages/compass-collection/src/components/collection-tab.tsx b/packages/compass-collection/src/components/collection-tab.tsx
@@ -85,36 +85,54 @@ type CollectionTabProps = Omit<CollectionTabOptions, 'tabId'> &
   ConnectionTabConnectedProps &
   ConnectionTabExpectedProps;
 
+function WithErrorBoundary({
+  children,
+  name,
+  type,
+}: {
+  children: React.ReactNode;
+  name: string;
+  type: 'content' | 'header';
+}) {
+  const { log, mongoLogId } = useLogger('COMPASS-COLLECTION-TAB-UI');
+  return (
+    <ErrorBoundary
+      key={name}
+      onError={(error: Error, errorInfo: unknown) => {
+        log.error(
+          mongoLogId(1001000107),
+          'Collection Workspace',
+          'Rendering collection tab failed',
+          { name, type, error: error.stack, errorInfo }
+        );
+      }}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+}
+
 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
     Provider.useActivate(props);
     return {
       name,
       content: (
-        <ErrorBoundary
-          key={name}
-          onError={(error: Error, errorInfo: unknown) => {
-            log.error(
-              mongoLogId(1001000107),
-              'Collection Workspace',
-              'Rendering collection tab failed',
-              { name, error: error.stack, errorInfo }
-            );
-          }}
-        >
+        <WithErrorBoundary name={name} type="content">
           <Provider {...props}>
             <Content {...props} />
           </Provider>
-        </ErrorBoundary>
+        </WithErrorBoundary>
       ),
       title: (
-        <Provider {...props}>
-          <Header />
-        </Provider>
+        <WithErrorBoundary name={name} type="header">
+          <Provider {...props}>
+            <Header />
+          </Provider>
+        </WithErrorBoundary>
       ),
     };
   });