[8.19] Use RUM label for fatal react errors (#218846) (#222156)

kibanamachine · maryam-saeidi · web-flow · commit b80a55cbe370 · 2025-06-02T17:38:30.000+03:00
# Backport This will backport the following commits from `main` to `8.19`: - [Use RUM label for fatal react errors (#218846)](#218846)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Maryam Saeidi <maryam.saeidi@elastic.co>
diff --git a/src/platform/packages/shared/shared-ux/error_boundary/lib/error_boundary_labels.ts b/src/platform/packages/shared/shared-ux/error_boundary/lib/error_boundary_labels.ts
@@ -0,0 +1,16 @@
+/*
+ * 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".
+ */
+
+export const getErrorBoundaryLabels = (
+  errorType: 'PageFatalReactError' | 'SectionFatalReactError'
+) => {
+  return {
+    errorType,
+  };
+};
diff --git a/src/platform/packages/shared/shared-ux/error_boundary/lib/index.ts b/src/platform/packages/shared/shared-ux/error_boundary/lib/index.ts
@@ -7,4 +7,4 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { mutateError } from './mutate_error';
+export { getErrorBoundaryLabels } from './error_boundary_labels';
diff --git a/src/platform/packages/shared/shared-ux/error_boundary/lib/mutate_error.ts b/src/platform/packages/shared/shared-ux/error_boundary/lib/mutate_error.ts
diff --git a/src/platform/packages/shared/shared-ux/error_boundary/src/services/error_boundary_services.test.tsx b/src/platform/packages/shared/shared-ux/error_boundary/src/services/error_boundary_services.test.tsx
@@ -38,7 +38,7 @@ describe('<KibanaErrorBoundaryProvider>', () => {
     expect(reportEventSpy).toBeCalledWith('fatal-error-react', {
       component_name: 'BadComponent',
       component_stack: expect.any(String),
-      error_message: 'FatalReactError: This is an error to show the test user!',
+      error_message: 'Error: This is an error to show the test user!',
       error_stack: expect.any(String),
     });
   });
@@ -67,7 +67,7 @@ describe('<KibanaErrorBoundaryProvider>', () => {
     expect(reportEventSpy1).toBeCalledWith('fatal-error-react', {
       component_name: 'BadComponent',
       component_stack: expect.any(String),
-      error_message: 'FatalReactError: This is an error to show the test user!',
+      error_message: 'Error: This is an error to show the test user!',
       error_stack: expect.any(String),
     });
   });
diff --git a/src/platform/packages/shared/shared-ux/error_boundary/src/services/error_service.ts b/src/platform/packages/shared/shared-ux/error_boundary/src/services/error_service.ts
@@ -42,9 +42,7 @@ export class KibanaErrorService {
    * or treated with "danger" coloring and include a detailed error message.
    */
   private getIsFatal(error: Error) {
-    const customError: Error & { react_error_type?: string; original_name?: string } = error;
-    const errorName = customError.original_name ?? customError.name;
-    const isChunkLoadError = MATCH_CHUNK_LOADERROR.test(errorName);
+    const isChunkLoadError = MATCH_CHUNK_LOADERROR.test(error.name);
     return !isChunkLoadError; // "ChunkLoadError" is recoverable by refreshing the page
   }
 
diff --git a/src/platform/packages/shared/shared-ux/error_boundary/src/ui/error_boundary.test.tsx b/src/platform/packages/shared/shared-ux/error_boundary/src/ui/error_boundary.test.tsx
@@ -97,7 +97,7 @@ describe('<KibanaErrorBoundary>', () => {
     expect(mockDeps.analytics.reportEvent.mock.calls[0][0]).toBe('fatal-error-react');
     expect(mockDeps.analytics.reportEvent.mock.calls[0][1]).toMatchObject({
       component_name: 'BadComponent',
-      error_message: 'FatalReactError: This is an error to show the test user!',
+      error_message: 'Error: This is an error to show the test user!',
     });
   });
 
@@ -134,15 +134,8 @@ describe('<KibanaErrorBoundary>', () => {
 
     expect(apm.captureError).toHaveBeenCalledTimes(1);
     expect(apm.captureError).toHaveBeenCalledWith(
-      new Error('This is an error to show the test user!')
-    );
-    expect(Object.keys((apm.captureError as jest.Mock).mock.calls[0][0])).toEqual([
-      'react_error_type',
-      'original_name',
-      'name',
-    ]);
-    expect((apm.captureError as jest.Mock).mock.calls[0][0].react_error_type).toEqual(
-      'fatal-error-react'
+      new Error('This is an error to show the test user!'),
+      { labels: { errorType: 'PageFatalReactError' } }
     );
   });
 });
diff --git a/src/platform/packages/shared/shared-ux/error_boundary/src/ui/error_boundary.tsx b/src/platform/packages/shared/shared-ux/error_boundary/src/ui/error_boundary.tsx
@@ -10,7 +10,7 @@
 import { apm } from '@elastic/apm-rum';
 import React from 'react';
 
-import { mutateError } from '../../lib';
+import { getErrorBoundaryLabels } from '../../lib';
 import type { KibanaErrorBoundaryServices } from '../../types';
 import { useErrorBoundary } from '../services';
 import { FatalPrompt, RecoverablePrompt } from './message_components';
@@ -41,10 +41,11 @@ class ErrorBoundaryInternal extends React.Component<
   }
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    const customError = mutateError(error);
-    apm.captureError(customError);
+    apm.captureError(error, {
+      labels: getErrorBoundaryLabels('PageFatalReactError'),
+    });
     console.error('Error caught by Kibana React Error Boundary'); // eslint-disable-line no-console
-    console.error(customError); // eslint-disable-line no-console
+    console.error(error); // eslint-disable-line no-console
 
     const { name, isFatal } = this.props.services.errorService.registerError(error, errorInfo);
     this.setState(() => {
diff --git a/src/platform/packages/shared/shared-ux/error_boundary/src/ui/section_error_boundary.test.tsx b/src/platform/packages/shared/shared-ux/error_boundary/src/ui/section_error_boundary.test.tsx
@@ -93,7 +93,7 @@ describe('<KibanaSectionErrorBoundary>', () => {
     expect(mockDeps.analytics.reportEvent.mock.calls[0][0]).toBe('fatal-error-react');
     expect(mockDeps.analytics.reportEvent.mock.calls[0][1]).toMatchObject({
       component_name: 'BadComponent',
-      error_message: 'FatalReactError: This is an error to show the test user!',
+      error_message: 'Error: This is an error to show the test user!',
     });
   });
 
@@ -130,15 +130,8 @@ describe('<KibanaSectionErrorBoundary>', () => {
 
     expect(apm.captureError).toHaveBeenCalledTimes(1);
     expect(apm.captureError).toHaveBeenCalledWith(
-      new Error('This is an error to show the test user!')
-    );
-    expect(Object.keys((apm.captureError as jest.Mock).mock.calls[0][0])).toEqual([
-      'react_error_type',
-      'original_name',
-      'name',
-    ]);
-    expect((apm.captureError as jest.Mock).mock.calls[0][0].react_error_type).toEqual(
-      'fatal-error-react'
+      new Error('This is an error to show the test user!'),
+      { labels: { errorType: 'SectionFatalReactError' } }
     );
   });
 });
diff --git a/src/platform/packages/shared/shared-ux/error_boundary/src/ui/section_error_boundary.tsx b/src/platform/packages/shared/shared-ux/error_boundary/src/ui/section_error_boundary.tsx
@@ -7,10 +7,10 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { apm } from '@elastic/apm-rum';
 import React from 'react';
+import { apm } from '@elastic/apm-rum';
 
-import { mutateError } from '../../lib';
+import { getErrorBoundaryLabels } from '../../lib';
 import type { KibanaErrorBoundaryServices } from '../../types';
 import { useErrorBoundary } from '../services';
 import { SectionFatalPrompt, SectionRecoverablePrompt } from './message_components';
@@ -65,10 +65,11 @@ class SectionErrorBoundaryInternal extends React.Component<
   }
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
-    const customError = mutateError(error);
-    apm.captureError(customError);
+    apm.captureError(error, {
+      labels: getErrorBoundaryLabels('SectionFatalReactError'),
+    });
     console.error('Error caught by Kibana React Error Boundary'); // eslint-disable-line no-console
-    console.error(customError); // eslint-disable-line no-console
+    console.error(error); // eslint-disable-line no-console
 
     const { name, isFatal } = this.props.services.errorService.registerError(error, errorInfo);
     this.setState({ error, errorInfo, componentName: name, isFatal });
