feat(react)!: Drop support for React 16 (#22665)

Removes React 16 support from `@sentry/react` and `@sentry/gatsby` for
v11. The minimum supported version is now React 17, as already
documented in the v11 migration guide.

Raises the `react` peer dependency range and drops two code paths that
only existed for React 16.

No e2e app targeted React 16 — `react-17` was already the lowest and
stays as the app pinning the new minimum.

closes #21461

Author: chargome

packages/gatsby/package.json

@@ -44,7 +44,7 @@
   },
   "peerDependencies": {
     "gatsby": "^3.0.0 || ^4.0.0 || ^5.0.0",
-    "react": "16.x || 17.x || 18.x"
+    "react": "17.x || 18.x"
   },
   "devDependencies": {
     "@testing-library/react": "^15.0.5",

packages/react/package.json

@@ -41,7 +41,7 @@
     "@sentry/conventions": "^0.16.0"
   },
   "peerDependencies": {
-    "react": "^16.14.0 || 17.x || 18.x || 19.x"
+    "react": "17.x || 18.x || 19.x"
   },
   "devDependencies": {
     "@testing-library/react": "^15.0.5",

packages/react/src/error.ts

@@ -1,15 +1,6 @@
 import { captureException } from '@sentry/browser';
 import { isError } from '@sentry/core/browser';
 import type { ErrorInfo } from 'react';
-import { version } from 'react';
-
-/**
- * See if React major version is 17+ by parsing version string.
- */
-export function isAtLeastReact17(reactVersion: string): boolean {
-  const reactMajor = reactVersion.match(/^([^.]+)/);
-  return reactMajor !== null && parseInt(reactMajor[0]) >= 17;
-}
 
 /**
  * Recurse through `error.cause` chain to set cause on an error.
@@ -47,15 +38,14 @@ export function captureReactException(
   { componentStack }: ErrorInfo,
   hint?: Parameters<typeof captureException>[1],
 ): string {
-  // 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.
+  // Create a stack trace from the componentStack param and link it to the original error
+  // using `error.cause`. Linking errors requires the `LinkedErrors` integration be enabled.
   // See: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#native-component-stacks
   //
   // Although `componentDidCatch` is typed to accept an `Error` object, it can also be invoked
   // with non-error objects. This is why we need to check if the error is an error-like object.
   // See: https://github.com/getsentry/sentry-javascript/issues/6167
-  if (isAtLeastReact17(version) && isError(error) && componentStack) {
+  if (isError(error) && componentStack) {
     const errorBoundaryError = new Error(error.message);
     errorBoundaryError.name = `React ErrorBoundary ${error.name}`;
     errorBoundaryError.stack = componentStack;

packages/react/src/hoist-non-react-statics.ts

@@ -69,15 +69,6 @@ const MEMO_STATICS = {
 const ForwardRefType = Symbol.for('react.forward_ref');
 const MemoType = Symbol.for('react.memo');
 
-/**
- * Check if a component is a Memo component
- */
-function isMemo(component: unknown): boolean {
-  return (
-    typeof component === 'object' && component !== null && (component as { $$typeof?: symbol }).$$typeof === MemoType
-  );
-}
-
 /**
  * Map of React component types to their specific statics
  */
@@ -89,12 +80,6 @@ TYPE_STATICS[MemoType] = MEMO_STATICS;
  * Get the appropriate statics object for a given component
  */
 function getStatics(component: React.ComponentType<unknown>): Record<string, boolean> {
-  // React v16.11 and below
-  if (isMemo(component)) {
-    return MEMO_STATICS;
-  }
-
-  // React v16.12 and above
   const componentType = (component as { $$typeof?: symbol }).$$typeof;
   return (componentType && TYPE_STATICS[componentType]) || REACT_STATICS;
 }

packages/react/src/profiler.tsx

@@ -177,7 +177,6 @@ function withProfiler<P extends Record<string, any>>(
  *
  * `useProfiler` is a React hook that profiles a React component.
  *
- * Requires React 16.8 or above.
  * @param name displayName of component being profiled
  */
 function useProfiler(

packages/react/test/error.test.ts

@@ -1,19 +1,6 @@
 import * as SentryBrowser from '@sentry/browser';
-import { beforeEach, describe, expect, it, test, vi } from 'vitest';
-import { isAtLeastReact17, reactErrorHandler } from '../src/error';
-
-describe('isAtLeastReact17', () => {
-  test.each([
-    ['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.1.0', true],
-    ['React 19', '19.0.0', true],
-  ])('%s', (_: string, input: string, output: ReturnType<typeof isAtLeastReact17>) => {
-    expect(isAtLeastReact17(input)).toBe(output);
-  });
-});
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { reactErrorHandler } from '../src/error';
 
 describe('reactErrorHandler', () => {
   const captureException = vi.spyOn(SentryBrowser, 'captureException');