feat(core) : Truncate the cause message to a maxLengthValue of 250

packages/react/src/errorboundary.tsx

@@ -1,6 +1,6 @@
 import type { ReportDialogOptions, Scope } from '@sentry/browser';
 import { captureException, getCurrentHub, showReportDialog, withScope } from '@sentry/browser';
-import { isError, logger } from '@sentry/utils';
+import { isError, logger, truncate } from '@sentry/utils';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import * as React from 'react';
 
@@ -10,6 +10,7 @@ export function isAtLeastReact17(version: string): boolean {
 }
 
 export const UNKNOWN_COMPONENT = 'unknown';
+const MAX_VALUE_LENGTH = 250;
 
 export type FallbackRender = (errorData: {
   error: Error;
@@ -66,7 +67,7 @@ const INITIAL_STATE = {
   eventId: null,
 };
 
-function setCause(error: Error & { cause?: Error }, cause: Error): void {
+export function setCause(error: Error & { cause?: Error }, cause: Error): void {
   const seenErrors = new WeakMap<Error, boolean>();
 
   function recurse(error: Error & { cause?: Error }, cause: Error): void {
@@ -79,6 +80,7 @@ function setCause(error: Error & { cause?: Error }, cause: Error): void {
       seenErrors.set(error, true);
       return recurse(error.cause, cause);
     }
+    cause.message = truncate(cause.message, MAX_VALUE_LENGTH);
     error.cause = cause;
   }
 

packages/react/test/errorboundary.test.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useState } from 'react';
 
 import type { ErrorBoundaryProps } from '../src/errorboundary';
-import { ErrorBoundary, isAtLeastReact17, UNKNOWN_COMPONENT, withErrorBoundary } from '../src/errorboundary';
+import { ErrorBoundary, isAtLeastReact17, setCause, UNKNOWN_COMPONENT, withErrorBoundary } from '../src/errorboundary';
 
 const mockCaptureException = jest.fn();
 const mockShowReportDialog = jest.fn();
@@ -382,6 +382,42 @@ describe('ErrorBoundary', () => {
       expect(cause.name).not.toContain('React ErrorBoundary');
     });
 
+    it('should truncate cause.message to maxLengthValue = 250 ', () => {
+      const mockOnError = jest.fn();
+
+      function CustomBam(): JSX.Element {
+        const error = new Error('Error example');
+        // The cause message with 620 characters
+        const cause = new Error('This is a very long cause message that exceeds 250 characters '.repeat(10));
+        setCause(error, cause);
+        throw error;
+      }
+
+      render(
+        <TestApp fallback={<p>You have hit an error</p>} onError={mockOnError} errorComp={<CustomBam />}>
+          <h1>children</h1>
+        </TestApp>,
+      );
+
+      expect(mockOnError).toHaveBeenCalledTimes(0);
+      expect(mockCaptureException).toHaveBeenCalledTimes(0);
+
+      const btn = screen.getByTestId('errorBtn');
+      fireEvent.click(btn);
+
+      expect(mockCaptureException).toHaveBeenCalledTimes(1);
+      expect(mockCaptureException).toHaveBeenLastCalledWith(expect.any(Error), {
+        contexts: { react: { componentStack: expect.any(String) } },
+      });
+
+      expect(mockOnError.mock.calls[0][0]).toEqual(mockCaptureException.mock.calls[0][0]);
+
+      const error = mockCaptureException.mock.calls[0][0];
+      const cause = error.cause;
+      // We need to make sure that the length of the cause message is 253 (3 characters of etc sign (...) in the truncate function)
+      expect(cause.message).toHaveLength(253);
+    });
+
     it('calls `beforeCapture()` when an error occurs', () => {
       const mockBeforeCapture = jest.fn();