ref(react): Stop using parseSemvar (#4270)

We don't need the bloated method from utils, just make our own. This helps save on bundle size when user's use the `ErrorBoundary` component (which is very common).

Author: AbhiPrasad

packages/react/src/errorboundary.tsx

@@ -1,9 +1,12 @@
 import { captureException, ReportDialogOptions, Scope, showReportDialog, withScope } from '@sentry/browser';
-import { logger, parseSemver } from '@sentry/utils';
+import { logger } from '@sentry/utils';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import * as React from 'react';
 
-const reactVersion = parseSemver(React.version);
+export function isAtLeastReact17(version: string): boolean {
+  const major = version.match(/^([^.]+)/);
+  return major !== null && parseInt(major[0]) >= 17;
+}
 
 export const UNKNOWN_COMPONENT = 'unknown';
 
@@ -71,7 +74,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
       // If on React version >= 17, create stack trace from componentStack param and links
       // to to the original error using `error.cause` otherwise relies on error param for stacktrace.
       // Linking errors requires the `LinkedErrors` integration be enabled.
-      if (reactVersion.major && reactVersion.major >= 17) {
+      if (isAtLeastReact17(React.version)) {
         const errorBoundaryError = new Error(error.message);
         errorBoundaryError.name = `React ErrorBoundary ${errorBoundaryError.name}`;
         errorBoundaryError.stack = componentStack;

packages/react/test/errorboundary.test.tsx

@@ -3,7 +3,13 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import * as React from 'react';
 import { useState } from 'react';
 
-import { ErrorBoundary, ErrorBoundaryProps, UNKNOWN_COMPONENT, withErrorBoundary } from '../src/errorboundary';
+import {
+  ErrorBoundary,
+  ErrorBoundaryProps,
+  isAtLeastReact17,
+  UNKNOWN_COMPONENT,
+  withErrorBoundary,
+} from '../src/errorboundary';
 
 const mockCaptureException = jest.fn();
 const mockShowReportDialog = jest.fn();
@@ -326,3 +332,17 @@ describe('ErrorBoundary', () => {
     });
   });
 });
+
+describe('isAtLeastReact17', () => {
+  test.each([
+    ['React 15 with no patch', '15.0', false],
+    ['React 15 with no patch and no minor', '15.5', false],
+    ['React 16', '16.0.4', false],
+    ['React 17', '17.0.0', true],
+    ['React 17 with no patch', '17.4', true],
+    ['React 17 with no patch and no minor', '17', true],
+    ['React 18', '18.0.0', true],
+  ])('%s', (_: string, input: string, output: ReturnType<typeof isAtLeastReact17>) => {
+    expect(isAtLeastReact17(input)).toBe(output);
+  });
+});