Skip to content

Commit

Permalink
ref(react): Stop using parseSemvar (#4270)
Browse files Browse the repository at this point in the history
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).
  • Loading branch information
AbhiPrasad authored Dec 13, 2021
1 parent 582d678 commit 626102f
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 4 deletions.
9 changes: 6 additions & 3 deletions packages/react/src/errorboundary.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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;
Expand Down
22 changes: 21 additions & 1 deletion packages/react/test/errorboundary.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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);
});
});

0 comments on commit 626102f

Please sign in to comment.