[FatalReactError] Send additional metrics with Error Telemetry Event to understand transient, non-breaking errors. (#234589)

## Summary

This PR improves the React error boundary telemetry in Shared UX to
correctly classify and measure short-lived (“transient”) errors.

## Problem

Historically, we could not reliably distinguish between:

* A momentary Error Boundary that appears briefly and then disappears, a
probable false positive due to immediate user navigation or recovery.
* A “seen” error UI that remained on screen long enough to be considered
a user-visible failure (validly Fatal).

This made it difficult to detect transient errors that users likely did
not see, and possibly should not be reported as Fatal errors to
telemetry (or alerted for).

### What this PR does

Adds two telemetry fields to `REACT_FATAL_ERROR_EVENT_TYPE`:

* `component_render_min_duration_ms`: Minimum time the error boundary UI
component remained mounted.
    -  Helps identify truly momentary/transient error experiences
* `has_transient_navigation`: A boolean that is `true` only if a
navigation occurred within the first `TRANSIENT_NAVIGATION_WINDOW_MS`
(e.g. 250ms) after the error appeared.
- Enables analysis of transient errors that coincide with user or
programmatic navigation (e.g., route change after an error render)

#### Refactored Error Reporting Logic

To accurately capture `has_transient_navigation`, an error is not
reported immediately. Instead, it is first enqueued and held for a brief
time window (default 250ms) to determine if a transient navigation has
occurred. The error report is only committed after this window elapses,
ensuring `has_transient_navigation` has been correctly determined. A
commit is triggered as a result of any user action which unmounts the
error boundary (provided `TRANSIENT_NAVIGATION_WINDOW_MS` has elapsed
otherwise it'll wait), or automatically after 10 seconds.

This waiting period for classification does not affect
`component_render_min_duration_ms`, which accurately measures the
component's actual on-screen render time.

- `TRANSIENT_NAVIGATION_WINDOW_MS` (default 250ms) define the nav
settlement window.
- `DEFAULT_MAX_ERROR_DURATION_MS` (default 10s) max time the error is
held from reporting to determine `component_render_min_duration_ms`. So
`component_render_min_duration_ms` maxes out at 10s.

#### Example Payload

```json
{
  "component_name": "KibanaSectionErrorBoundary",
  "component_stack": "...",
  "error_message": "Error: ...",
  "error_stack": "...",
  "component_render_min_duration_ms": 103,
  "has_transient_navigation": true
}
```

## How to Test / Reproduce

Since it's hard to reproduce such transient errors in Dev env, two
reproducible error scenarios have been simulated in the commit
`564007eb91704558a67e3474cdb116c0418a908a`. You can check out that
commit and reproduce the scenarios.

**Tip** to see the reported Fatal Error payload, you can add a log point
in
http://localhost:5601/entry:core/node_modules/@elastic/ebt/client/src/analytics_client/analytics_client.js
at L46 with content `'reporting event', eventType, eventData`:

<img width="600" alt="image"
src="https://github.com/user-attachments/assets/9fb56722-4c2b-418e-8690-80c7e05a35d9"
/>



### A) Logs app router issue

(was fixed by
[#194580](https://github.com/elastic/kibana/pull/194580/files#diff-65b7459bd6dcaafd801e69ddd217d7e977391ef8398526de737132b919c23c52))

After checking out [the
commit](564007e),
visit `http://localhost:5601/<proxy>/app/logs`


https://github.com/user-attachments/assets/e885e945-4ba9-499e-aeb2-afc9482e31e0



### B) Demo transient scenarios (in Kibana)

After checking out the same
[commit](564007e),
visit Observability Onboarding page
`http://localhost:5601/<proxy>/app/observabilityOnboarding` as shown in
the following video:



https://github.com/user-attachments/assets/85897472-af10-46b9-8792-ee5fadf40426



### C) Storybook

A comprehensive story with docs/comments has been added for an
elaborated reproduction of the scenarios.

Run via `yarn run storybook shared_ux`, visit `localhost:9001` and
consult the following videos:



https://github.com/user-attachments/assets/2615863b-9055-4618-a679-5468d75f7725



https://github.com/user-attachments/assets/bb82817f-52fd-48eb-ae8d-86400373c20c



### D) Reproducing the known error in prod scenario

Most number of transient errors in prod were reported by the scenario
demonstrated in the following video where user's nav attempts in quick
succession would raise this error.


https://github.com/user-attachments/assets/670c6912-c706-4a32-967a-fbc870e92923

As show above, it was reproducible before, but after
[this](#220313) fix, it should be
quite hard to reproduce. The metrics added in this PR will make it
easier to identify such errors if they are still being reported, and
could possibly be filtered out based on the values of those metrics.

To reproduce this in Storybook, use the following story which allows to
perform a navigation in close succession to the error boundary
rendering:


https://github.com/user-attachments/assets/c5d1a82a-19f4-477b-a969-d756ff57c7c3

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>

Author: 3 people

src/platform/packages/shared/shared-ux/error_boundary/index.ts

@@ -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';

src/platform/packages/shared/shared-ux/error_boundary/lib/telemetry_events.ts

@@ -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: {

src/platform/packages/shared/shared-ux/error_boundary/mocks/index.ts

@@ -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';

src/platform/packages/shared/shared-ux/error_boundary/mocks/src/analytics_mock.ts

@@ -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);
+    },
+  };
+}

src/platform/packages/shared/shared-ux/error_boundary/mocks/src/bad_component.tsx

@@ -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>
   );
 };

src/platform/packages/shared/shared-ux/error_boundary/mocks/src/chunk_load_error_component.tsx

@@ -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>
   );
 };

src/platform/packages/shared/shared-ux/error_boundary/mocks/src/error_boundary_story_controls.tsx

@@ -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>
+  );
+};

src/platform/packages/shared/shared-ux/error_boundary/mocks/src/story_services.ts

@@ -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,
+  };
+}

src/platform/packages/shared/shared-ux/error_boundary/mocks/src/storybook.ts

@@ -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,

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

@@ -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);
   });
 });