elastic
diff --git a/‎src/platform/packages/shared/kbn-unified-doc-viewer/src/components/doc_viewer/__snapshots__/doc_viewer.test.tsx.snap‎
Lines changed: 66 additions & 57 deletions b/‎src/platform/packages/shared/kbn-unified-doc-viewer/src/components/doc_viewer/__snapshots__/doc_viewer.test.tsx.snap‎
Lines changed: 66 additions & 57 deletions
diff --git a/‎src/platform/packages/shared/kbn-unified-doc-viewer/src/components/doc_viewer/__snapshots__/doc_viewer_render_tab.test.tsx.snap‎
Lines changed: 0 additions & 20 deletions b/‎src/platform/packages/shared/kbn-unified-doc-viewer/src/components/doc_viewer/__snapshots__/doc_viewer_render_tab.test.tsx.snap‎
Lines changed: 0 additions & 20 deletions
diff --git a/‎src/platform/packages/shared/kbn-unified-doc-viewer/src/components/doc_viewer/doc_viewer.test.tsx‎
Lines changed: 83 additions & 35 deletions b/‎src/platform/packages/shared/kbn-unified-doc-viewer/src/components/doc_viewer/doc_viewer.test.tsx‎
Lines changed: 83 additions & 35 deletions
diff --git a/‎src/platform/packages/shared/kbn-unified-doc-viewer/src/components/doc_viewer/doc_viewer.tsx‎
Lines changed: 2 additions & 2 deletions b/‎src/platform/packages/shared/kbn-unified-doc-viewer/src/components/doc_viewer/doc_viewer.tsx‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎src/platform/packages/shared/kbn-unified-doc-viewer/src/components/doc_viewer/doc_viewer_error.test.tsx‎
Lines changed: 0 additions & 25 deletions b/‎src/platform/packages/shared/kbn-unified-doc-viewer/src/components/doc_viewer/doc_viewer_error.test.tsx‎
Lines changed: 0 additions & 25 deletions
@@ -8,15 +8,17 @@
  */
 
 import React from 'react';
-import { mount, shallow } from 'enzyme';
 import { act, render, screen } from '@testing-library/react';
-import { findTestSubject } from '@elastic/eui/lib/test';
 import { buildDataTableRecord } from '@kbn/discover-utils';
-import { DocViewer, INITIAL_TAB } from './doc_viewer';
+import { DocViewer, DocViewerProps, INITIAL_TAB } from './doc_viewer';
 import type { DocViewRenderProps } from '../../types';
 import { DocViewsRegistry } from '../..';
 import { dataViewMock, esHitsMockWithSort } from '@kbn/discover-utils/src/__mocks__';
+import { analyticsServiceMock } from '@kbn/core-analytics-browser-mocks';
+import { KibanaErrorBoundaryProvider } from '@kbn/shared-ux-error-boundary';
+import userEvent from '@testing-library/user-event';
 
+const analytics = analyticsServiceMock.createAnalyticsServiceStart();
 const records = esHitsMockWithSort.map((hit) => buildDataTableRecord(hit, dataViewMock));
 
 const mockSetLocalStorage = jest.fn();
@@ -32,58 +34,100 @@ jest.mock('react-use/lib/useLocalStorage', () => {
   });
 });
 
+const WrappedDocViewer = (props: DocViewerProps) => (
+  <KibanaErrorBoundaryProvider analytics={analytics}>
+    <DocViewer {...props} />
+  </KibanaErrorBoundaryProvider>
+);
+
 describe('<DocViewer />', () => {
   test('Render <DocViewer/> with 3 different tabs', () => {
     const registry = new DocViewsRegistry();
-    registry.add({ id: 'function', order: 10, title: 'Render function', render: jest.fn() });
+    registry.add({
+      id: 'function',
+      order: 10,
+      title: 'Render function',
+      component: jest.fn(() => null),
+    });
     registry.add({
       id: 'component',
       order: 20,
       title: 'React component',
       component: () => <div>test</div>,
     });
-    // @ts-expect-error This should be invalid and will throw an error when rendering
-    registry.add({ id: 'invalid', order: 30, title: 'Invalid doc view' });
+    registry.add({
+      id: 'invalid',
+      order: 30,
+      title: 'Invalid doc view',
+      component: () => {
+        throw new Error('Invalid');
+      },
+    });
 
     const renderProps = { hit: {} } as DocViewRenderProps;
 
-    const wrapper = shallow(<DocViewer docViews={registry.getAll()} {...renderProps} />);
+    const { container } = render(
+      <WrappedDocViewer docViews={registry.getAll()} {...renderProps} />
+    );
 
-    expect(wrapper).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
-  test('Render <DocViewer/> with 1 tab displaying error message', () => {
-    function SomeComponent() {
-      // this is just a placeholder
-      return null;
-    }
-
+  test('Render <DocViewer/> with 1 tab displaying error message', async () => {
+    const errorMsg = 'Catch me if you can!';
     const registry = new DocViewsRegistry();
     registry.add({
       id: 'component',
       order: 10,
       title: 'React component',
-      component: SomeComponent,
+      component: () => {
+        throw new Error(errorMsg);
+      },
     });
-
     const renderProps = {
       hit: buildDataTableRecord({ _index: 't', _id: '1' }),
     } as DocViewRenderProps;
-    const errorMsg = 'Catch me if you can!';
+    render(<WrappedDocViewer docViews={registry.getAll()} {...renderProps} />);
+    expect(screen.getByTestId('sectionErrorBoundaryPromptBody')).toBeInTheDocument();
+    await userEvent.click(screen.getByText('Show details'));
+    expect(screen.getByText(new RegExp(`${errorMsg}`))).toBeInTheDocument();
+  });
 
-    const wrapper = mount(<DocViewer docViews={registry.getAll()} {...renderProps} />);
-    const error = new Error(errorMsg);
-    wrapper.find(SomeComponent).simulateError(error);
-    const errorMsgComponent = findTestSubject(wrapper, 'docViewerError');
-    expect(errorMsgComponent.text()).toMatch(new RegExp(`${errorMsg}`));
+  test('should not prevent rendering of other tabs when one tab throws an error', async () => {
+    const registry = new DocViewsRegistry();
+    registry.add({
+      id: 'valid',
+      order: 10,
+      title: 'Valid doc view',
+      component: () => <div>Valid</div>,
+    });
+    registry.add({
+      id: 'error',
+      order: 20,
+      title: 'Error doc view',
+      component: () => {
+        throw new Error('Invalid');
+      },
+    });
+    const renderProps = {
+      hit: buildDataTableRecord({ _index: 't', _id: '1' }),
+    } as DocViewRenderProps;
+    render(<WrappedDocViewer docViews={registry.getAll()} {...renderProps} />);
+    expect(screen.queryByTestId('sectionErrorBoundaryPromptBody')).not.toBeInTheDocument();
+    await userEvent.click(screen.getByText('Error doc view'));
+    expect(screen.getByTestId('sectionErrorBoundaryPromptBody')).toBeInTheDocument();
+    await userEvent.click(screen.getByText('Valid doc view'));
+    expect(screen.queryByTestId('sectionErrorBoundaryPromptBody')).not.toBeInTheDocument();
   });
 
   test('should save active tab to local storage', () => {
     const registry = new DocViewsRegistry();
-    registry.add({ id: 'test1', order: 10, title: 'Render function', render: jest.fn() });
-    registry.add({ id: 'test2', order: 20, title: 'Render function', render: jest.fn() });
+    registry.add({ id: 'test1', order: 10, title: 'Render function', component: jest.fn() });
+    registry.add({ id: 'test2', order: 20, title: 'Render function', component: jest.fn() });
 
-    render(<DocViewer docViews={registry.getAll()} hit={records[0]} dataView={dataViewMock} />);
+    render(
+      <WrappedDocViewer docViews={registry.getAll()} hit={records[0]} dataView={dataViewMock} />
+    );
 
     expect(screen.getByTestId('docViewerTab-test1').getAttribute('aria-selected')).toBe('true');
     expect(screen.getByTestId('docViewerTab-test2').getAttribute('aria-selected')).toBe('false');
@@ -107,12 +151,14 @@ describe('<DocViewer />', () => {
 
   test('should restore active tab from local storage', () => {
     const registry = new DocViewsRegistry();
-    registry.add({ id: 'test1', order: 10, title: 'Render function', render: jest.fn() });
-    registry.add({ id: 'test2', order: 20, title: 'Render function', render: jest.fn() });
+    registry.add({ id: 'test1', order: 10, title: 'Render function', component: jest.fn() });
+    registry.add({ id: 'test2', order: 20, title: 'Render function', component: jest.fn() });
 
     mockTestInitialLocalStorageValue = 'kbn_doc_viewer_tab_test2';
 
-    render(<DocViewer docViews={registry.getAll()} hit={records[0]} dataView={dataViewMock} />);
+    render(
+      <WrappedDocViewer docViews={registry.getAll()} hit={records[0]} dataView={dataViewMock} />
+    );
 
     expect(screen.getByTestId('docViewerTab-test1').getAttribute('aria-selected')).toBe('false');
     expect(screen.getByTestId('docViewerTab-test2').getAttribute('aria-selected')).toBe('true');
@@ -122,12 +168,14 @@ describe('<DocViewer />', () => {
 
   test('should not restore a tab from local storage if unavailable', () => {
     const registry = new DocViewsRegistry();
-    registry.add({ id: 'test1', order: 10, title: 'Render function', render: jest.fn() });
-    registry.add({ id: 'test2', order: 20, title: 'Render function', render: jest.fn() });
+    registry.add({ id: 'test1', order: 10, title: 'Render function', component: jest.fn() });
+    registry.add({ id: 'test2', order: 20, title: 'Render function', component: jest.fn() });
 
     mockTestInitialLocalStorageValue = 'kbn_doc_viewer_tab_test3';
 
-    render(<DocViewer docViews={registry.getAll()} hit={records[0]} dataView={dataViewMock} />);
+    render(
+      <WrappedDocViewer docViews={registry.getAll()} hit={records[0]} dataView={dataViewMock} />
+    );
 
     expect(screen.getByTestId('docViewerTab-test1').getAttribute('aria-selected')).toBe('true');
     expect(screen.getByTestId('docViewerTab-test2').getAttribute('aria-selected')).toBe('false');
@@ -139,12 +187,12 @@ describe('<DocViewer />', () => {
     const initialTabId = 'test2';
 
     const registry = new DocViewsRegistry();
-    registry.add({ id: 'test1', order: 10, title: 'Render 1st Tab', render: jest.fn() });
-    registry.add({ id: initialTabId, order: 20, title: 'Render 2nd Tab', render: jest.fn() });
-    registry.add({ id: 'test3', order: 30, title: 'Render 3rd Tab', render: jest.fn() });
+    registry.add({ id: 'test1', order: 10, title: 'Render 1st Tab', component: jest.fn() });
+    registry.add({ id: initialTabId, order: 20, title: 'Render 2nd Tab', component: jest.fn() });
+    registry.add({ id: 'test3', order: 30, title: 'Render 3rd Tab', component: jest.fn() });
 
     render(
-      <DocViewer
+      <WrappedDocViewer
         docViews={registry.getAll()}
         initialTabId={initialTabId}
         hit={records[0]}
 
@@ -36,16 +36,16 @@ export const DocViewer = forwardRef<DocViewerApi, DocViewerInternalProps>(
   ({ docViews, initialTabId, ...renderProps }, ref) => {
     const tabs = docViews
       .filter(({ enabled }) => enabled) // Filter out disabled doc views
-      .map(({ id, title, render, component }: DocView) => ({
+      .map(({ id, title, component }: DocView) => ({
         id: getFullTabId(id), // `id` value is used to persist the selected tab in localStorage
         name: title,
         content: (
           <DocViewerTab
+            key={id}
             id={id}
             title={title}
             component={component}
             renderProps={renderProps}
-            render={render}
           />
         ),
         ['data-test-subj']: `docViewerTab-${id}`,