elastic
diff --git a/‎src/platform/packages/shared/shared-ux/error_boundary/index.ts‎
Lines changed: 1 addition & 1 deletion b/‎src/platform/packages/shared/shared-ux/error_boundary/index.ts‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/platform/packages/shared/shared-ux/error_boundary/lib/telemetry_events.ts‎
Lines changed: 16 additions & 0 deletions b/‎src/platform/packages/shared/shared-ux/error_boundary/lib/telemetry_events.ts‎
Lines changed: 16 additions & 0 deletions
diff --git a/‎src/platform/packages/shared/shared-ux/error_boundary/mocks/index.ts‎
Lines changed: 8 additions & 0 deletions b/‎src/platform/packages/shared/shared-ux/error_boundary/mocks/index.ts‎
Lines changed: 8 additions & 0 deletions
diff --git a/‎src/platform/packages/shared/shared-ux/error_boundary/mocks/src/analytics_mock.ts‎
Lines changed: 52 additions & 0 deletions b/‎src/platform/packages/shared/shared-ux/error_boundary/mocks/src/analytics_mock.ts‎
Lines changed: 52 additions & 0 deletions
diff --git a/‎src/platform/packages/shared/shared-ux/error_boundary/mocks/src/bad_component.tsx‎
Lines changed: 2 additions & 2 deletions b/‎src/platform/packages/shared/shared-ux/error_boundary/mocks/src/bad_component.tsx‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎src/platform/packages/shared/shared-ux/error_boundary/mocks/src/chunk_load_error_component.tsx‎
Lines changed: 2 additions & 2 deletions b/‎src/platform/packages/shared/shared-ux/error_boundary/mocks/src/chunk_load_error_component.tsx‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎src/platform/packages/shared/shared-ux/error_boundary/mocks/src/error_boundary_story_controls.tsx‎
Lines changed: 58 additions & 0 deletions b/‎src/platform/packages/shared/shared-ux/error_boundary/mocks/src/error_boundary_story_controls.tsx‎
Lines changed: 58 additions & 0 deletions
diff --git a/‎src/platform/packages/shared/shared-ux/error_boundary/mocks/src/story_services.ts‎
Lines changed: 31 additions & 0 deletions b/‎src/platform/packages/shared/shared-ux/error_boundary/mocks/src/story_services.ts‎
Lines changed: 31 additions & 0 deletions
diff --git a/‎src/platform/packages/shared/shared-ux/error_boundary/mocks/src/storybook.ts‎
Lines changed: 3 additions & 1 deletion b/‎src/platform/packages/shared/shared-ux/error_boundary/mocks/src/storybook.ts‎
Lines changed: 3 additions & 1 deletion
diff --git a/‎src/platform/packages/shared/shared-ux/error_boundary/src/services/error_boundary_services.test.tsx‎ renamed to ‎src/platform/packages/shared/shared-ux/error_boundary/src/services/error_boundary_provider.test.tsx‎
Lines changed: 29 additions & 8 deletions b/‎src/platform/packages/shared/shared-ux/error_boundary/src/services/error_boundary_services.test.tsx‎ renamed to ‎src/platform/packages/shared/shared-ux/error_boundary/src/services/error_boundary_provider.test.tsx‎
Lines changed: 29 additions & 8 deletions
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { KibanaErrorBoundaryProvider } from './src/services/error_boundary_services';
+export { KibanaErrorBoundaryProvider } from './src/services/error_boundary_provider';
 export { KibanaErrorBoundary } from './src/ui/error_boundary';
 export { KibanaSectionErrorBoundary } from './src/ui/section_error_boundary';
 export { ThrowIfError } from './src/ui/throw_if_error';
 
@@ -32,6 +32,22 @@ export const reactFatalErrorSchema = {
       optional: false as const,
     },
   },
+  component_render_min_duration_ms: {
+    type: 'long' as const,
+    _meta: {
+      description:
+        'Minimum duration in milliseconds that the fatal error component stayed rendered (before unmount). A max value of 10,000 (10s) is enforced to prevent excessive, indefinite or indeterminable durations.',
+      optional: false as const,
+    },
+  },
+  has_transient_navigation: {
+    type: 'boolean' as const,
+    _meta: {
+      description:
+        'Indicates if navigation occurred within the transient window (e.g. first 250ms) after the error occurred. This helps identify transient errors, successfully followed by a navigation, that users may not have seen.',
+      optional: false as const,
+    },
+  },
   error_message: {
     type: 'keyword' as const,
     _meta: {
 
@@ -11,3 +11,11 @@ export { BadComponent } from './src/bad_component';
 export { ChunkLoadErrorComponent } from './src/chunk_load_error_component';
 export { getServicesMock } from './src/jest';
 export { KibanaErrorBoundaryStorybookMock } from './src/storybook';
+export { createAnalyticsMock } from './src/analytics_mock';
+export {
+  ControlsBar,
+  Spacer,
+  DocsBlock,
+  StoryActionButton,
+} from './src/error_boundary_story_controls';
+export { createServicesWithAnalyticsMock } from './src/story_services';
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { action } from '@storybook/addon-actions';
+
+export interface TelemetryEvent {
+  type: string;
+  payload: unknown;
+  at: number;
+}
+
+export interface AnalyticsMock {
+  analytics: { reportEvent: (type: string, payload: unknown) => void };
+  getEvents(): TelemetryEvent[];
+  clear(): void;
+  subscribe(cb: (events: TelemetryEvent[]) => void): () => void;
+}
+
+export function createAnalyticsMock(): AnalyticsMock {
+  const events: TelemetryEvent[] = [];
+  const subscribers = new Set<(events: TelemetryEvent[]) => void>();
+  const reportAction = action('Report telemetry event');
+
+  function notify() {
+    subscribers.forEach((cb) => cb([...events]));
+  }
+
+  return {
+    analytics: {
+      reportEvent: (type: string, payload: unknown) => {
+        reportAction(type, payload);
+        events.push({ type, payload, at: Date.now() });
+        notify();
+      },
+    },
+    getEvents: () => [...events],
+    clear: () => {
+      events.splice(0, events.length);
+      notify();
+    },
+    subscribe: (cb) => {
+      subscribers.add(cb);
+      return () => subscribers.delete(cb);
+    },
+  };
+}
@@ -25,8 +25,8 @@ export const BadComponent = () => {
   };
 
   return (
-    <EuiButton onClick={handleClick} data-test-subj="clickForErrorBtn">
-      Click for error
+    <EuiButton color="danger" onClick={handleClick} data-test-subj="clickForErrorBtn">
+      Throw error
     </EuiButton>
   );
 };
@@ -27,8 +27,8 @@ export const ChunkLoadErrorComponent = () => {
   };
 
   return (
-    <EuiButton onClick={handleClick} fill={true} data-test-subj="clickForErrorBtn">
-      Click for error
+    <EuiButton color="danger" onClick={handleClick} fill={true} data-test-subj="clickForErrorBtn">
+      Throw error
     </EuiButton>
   );
 };
@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { EuiButton } from '@elastic/eui';
+
+export const Spacer: React.FC = () => <div style={{ height: 12 }} />;
+
+export const ControlsBar: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>{children}</div>
+);
+
+export const DocsBlock: React.FC<{ title: string; children: React.ReactNode }> = ({
+  title,
+  children,
+}) => (
+  <div style={{ marginTop: 12, padding: 12, border: '1px dashed #ccc', borderRadius: 6 }}>
+    <div style={{ fontWeight: 700, marginBottom: 6 }}>{title}</div>
+    <div style={{ lineHeight: 1.5 }}>{children}</div>
+  </div>
+);
+
+export const StoryActionButton: React.FC<{
+  onClick: () => void;
+  children: React.ReactNode;
+  color?:
+    | 'primary'
+    | 'danger'
+    | 'success'
+    | 'warning'
+    | 'text'
+    | 'accent'
+    | 'accentSecondary'
+    | 'neutral'
+    | 'risk'
+    | undefined;
+  fill?: boolean;
+  disabled?: boolean;
+}> = ({ onClick, children, color = 'danger', fill = true, disabled }) => {
+  return (
+    <EuiButton
+      color={color}
+      onClick={onClick}
+      fill={fill}
+      isDisabled={disabled}
+      style={{ margin: 4 }}
+      size="s"
+    >
+      {children}
+    </EuiButton>
+  );
+};
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { action } from '@storybook/addon-actions';
+import type { AnalyticsMock } from './analytics_mock';
+import { createAnalyticsMock } from './analytics_mock';
+import type { KibanaErrorBoundaryServices } from '../../types';
+import { KibanaErrorService } from '../../src/services/error_service';
+
+export function createServicesWithAnalyticsMock(): {
+  services: KibanaErrorBoundaryServices;
+  mock: AnalyticsMock;
+} {
+  const onClickRefresh = action('Reload window');
+  const mock = createAnalyticsMock();
+  const analytics = mock.analytics;
+
+  return {
+    services: {
+      onClickRefresh,
+      errorService: new KibanaErrorService({ analytics }),
+    },
+    mock,
+  };
+}
@@ -10,6 +10,7 @@
 import { AbstractStorybookMock } from '@kbn/shared-ux-storybook-mock';
 import { action } from '@storybook/addon-actions';
 import { KibanaErrorService } from '../../src/services/error_service';
+import { createAnalyticsMock } from './analytics_mock';
 import type { KibanaErrorBoundaryServices } from '../../types';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -27,7 +28,8 @@ export class KibanaErrorBoundaryStorybookMock extends AbstractStorybookMock<
 
   getServices(params: Params = {}): KibanaErrorBoundaryServices {
     const onClickRefresh = action('Reload window');
-    const analytics = { reportEvent: action('Report telemetry event') };
+    const mock = createAnalyticsMock();
+    const analytics = mock.analytics;
 
     return {
       ...params,
 
@@ -14,6 +14,7 @@ import { analyticsServiceMock } from '@kbn/core-analytics-browser-mocks';
 import type { KibanaErrorBoundaryProviderDeps } from '../../types';
 import { KibanaErrorBoundary, KibanaErrorBoundaryProvider } from '../..';
 import { BadComponent } from '../../mocks';
+import { TRANSIENT_NAVIGATION_WINDOW_MS } from './error_service';
 import userEvent from '@testing-library/user-event';
 
 describe('<KibanaErrorBoundaryProvider>', () => {
@@ -26,34 +27,40 @@ describe('<KibanaErrorBoundaryProvider>', () => {
   it('creates a context of services for KibanaErrorBoundary', async () => {
     const reportEventSpy = jest.spyOn(analytics!, 'reportEvent');
 
-    const { findByTestId } = render(
+    const { findByTestId, unmount } = render(
       <KibanaErrorBoundaryProvider analytics={analytics}>
         <KibanaErrorBoundary>
           <BadComponent />
         </KibanaErrorBoundary>
       </KibanaErrorBoundaryProvider>
     );
     await userEvent.click(await findByTestId('clickForErrorBtn'));
+    unmount(); // Unmount to commit/report the error
+
+    // Wait for the error to be reported/committed
+    await new Promise((resolve) => setTimeout(resolve, 1.5 * TRANSIENT_NAVIGATION_WINDOW_MS));
 
     expect(reportEventSpy).toBeCalledWith('fatal-error-react', {
       component_name: 'BadComponent',
       component_stack: expect.any(String),
       error_message: 'Error: This is an error to show the test user!',
       error_stack: expect.any(String),
+      component_render_min_duration_ms: expect.any(Number),
+      has_transient_navigation: expect.any(Boolean),
     });
   });
 
   it('uses higher-level context if available', async () => {
-    const reportEventSpy1 = jest.spyOn(analytics!, 'reportEvent');
+    const reportEventParentSpy = jest.spyOn(analytics!, 'reportEvent');
 
-    const analytics2 = analyticsServiceMock.createAnalyticsServiceStart();
-    const reportEventSpy2 = jest.spyOn(analytics2, 'reportEvent');
+    const analyticsChild = analyticsServiceMock.createAnalyticsServiceStart();
+    const reportEventChildSpy = jest.spyOn(analyticsChild, 'reportEvent');
 
-    const { findByTestId } = render(
+    const { findByTestId, unmount } = render(
       <KibanaErrorBoundaryProvider analytics={analytics}>
         <KibanaErrorBoundary>
           Hello world
-          <KibanaErrorBoundaryProvider analytics={analytics2}>
+          <KibanaErrorBoundaryProvider analytics={analyticsChild}>
             <KibanaErrorBoundary>
               <BadComponent />
             </KibanaErrorBoundary>
@@ -63,12 +70,26 @@ describe('<KibanaErrorBoundaryProvider>', () => {
     );
     await userEvent.click(await findByTestId('clickForErrorBtn'));
 
-    expect(reportEventSpy2).not.toBeCalled();
-    expect(reportEventSpy1).toBeCalledWith('fatal-error-react', {
+    // Wait for nav to settle
+    await new Promise((resolve) => setTimeout(resolve, TRANSIENT_NAVIGATION_WINDOW_MS));
+
+    unmount(); // Unmount to commit/report the error
+
+    // Wait for the error to be reported/committed
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    expect(reportEventParentSpy).not.toBeCalled();
+    expect(reportEventChildSpy).toBeCalledWith('fatal-error-react', {
       component_name: 'BadComponent',
       component_stack: expect.any(String),
       error_message: 'Error: This is an error to show the test user!',
       error_stack: expect.any(String),
+      has_transient_navigation: expect.any(Boolean),
+      component_render_min_duration_ms: expect.any(Number),
     });
+    expect(
+      (reportEventChildSpy.mock.calls[0][1] as Record<string, unknown>)
+        .component_render_min_duration_ms
+    ).toBeGreaterThanOrEqual(250);
   });
 });