Use RUM label for fatal react errors (elastic#218846)

Closes elastic/observability-dev#4463

## Summary

Since we now have support for error labels in RUM
([PR](elastic/apm-agent-rum-js#1594)), this PR
changes the way that we report rum errors to use labels similar to what
we've done for toast errors
([PR](elastic#217948)).



https://github.com/user-attachments/assets/87a06ceb-705c-4c6e-ab26-d3e5874fe5ad


### ⚠️ Note

In local development, the error is captured twice because react bubbles
up the error, but it does not happen in production:
([doc](https://react.dev/reference/react/Component#componentdidcatch-caveats))

> Production and development builds of React slightly differ in the way
componentDidCatch handles errors. In development, the errors will bubble
up to window, which means that any window.onerror or
window.addEventListener('error', callback) will intercept the errors
that have been caught by componentDidCatch. In production, instead, the
errors will not bubble up, which means any ancestor error handler will
only receive errors not explicitly caught by componentDidCatch.

### 🧪 How to test

Add the following to your kibana.yml file:

```
elastic.apm.active: true
elastic.apm.transactionSampleRate: 1.0
elastic.apm.environment: yourName <-- Change to your name
```
<details>
<summary>Throw a fatal react error</summary>

Throw an error in the [alerts
page](https://github.com/elastic/kibana/blob/main/x-pack/solutions/observability/plugins/observability/public/pages/alerts/alerts.tsx)
and visit http://localhost:5601/kibana/app/observability/alerts

</details>

Then visit
[kibana-cloud-apm.elastic.dev](https://kibana-cloud-apm.elastic.dev/app/apm/services/kibana-frontend/errors?comparisonEnabled=true&environment=ENVIRONMENT_ALL&kuery=&latencyAggregationType=avg&offset=1d&rangeFrom=now-1h&rangeTo=now&serviceGroup=&transactionType=page-load)
filtered for `yourName` in the environment.

Author: maryam-saeidi

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/lib/mutate_error.ts

@@ -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_boundary_services.test.tsx

@@ -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/services/error_service.ts

@@ -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.test.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/error_boundary.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.test.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 });