Use RUM label for fatal react errors

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

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

src/platform/packages/shared/shared-ux/error_boundary/src/services/error_boundary_services.test.tsx

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

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
   }
 

src/platform/packages/shared/shared-ux/error_boundary/src/ui/error_boundary.test.tsx

@@ -96,7 +96,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!',
     });
   });
 
@@ -118,7 +118,7 @@ describe('<KibanaErrorBoundary>', () => {
     ).toBe(true);
     expect(
       mockDeps.analytics.reportEvent.mock.calls[0][1].error_stack.startsWith(
-        'FatalReactError: This is an error to show the test user!'
+        'Error: This is an error to show the test user!'
       )
     ).toBe(true);
   });
@@ -133,15 +133,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' } }
     );
   });
 });

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(() => {

src/platform/packages/shared/shared-ux/error_boundary/src/ui/section_error_boundary.test.tsx

@@ -92,7 +92,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!',
     });
   });
 
@@ -114,7 +114,7 @@ describe('<KibanaSectionErrorBoundary>', () => {
     ).toBe(true);
     expect(
       mockDeps.analytics.reportEvent.mock.calls[0][1].error_stack.startsWith(
-        'FatalReactError: This is an error to show the test user!'
+        'Error: This is an error to show the test user!'
       )
     ).toBe(true);
   });
@@ -129,15 +129,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' } }
     );
   });
 });

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