ref: Use @sentry/react (#19366)

* ref: uninstall @sentry/browser and add @sentry/react

* feat: use @sentry/react Profiler instead of built in Profiler

package.json

@@ -21,8 +21,8 @@
     "@emotion/core": "^10.0.27",
     "@emotion/styled": "^10.0.27",
     "@sentry/apm": "5.18.0",
-    "@sentry/browser": "5.18.0",
     "@sentry/integrations": "5.18.0",
+    "@sentry/react": "5.18.0",
     "@sentry/release-parser": "^0.6.0",
     "@sentry/rrweb": "^0.1.1",
     "@sentry/utils": "5.18.0",

src/sentry/static/sentry/app/actionCreators/globalSelection.tsx

@@ -1,9 +1,9 @@
 import * as ReactRouter from 'react-router';
-import * as Sentry from '@sentry/browser';
 import isInteger from 'lodash/isInteger';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import qs from 'query-string';
+import * as Sentry from '@sentry/react';
 
 import {
   DATE_TIME,

src/sentry/static/sentry/app/actionCreators/group.jsx

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 import {Client} from 'app/api';
 import {buildUserId, buildTeamId} from 'app/utils';

src/sentry/static/sentry/app/actionCreators/members.tsx

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 import {Client} from 'app/api';
 import {Member} from 'app/types';

src/sentry/static/sentry/app/actionCreators/organization.tsx

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 import {Client} from 'app/api';
 import {addErrorMessage} from 'app/actionCreators/indicator';

src/sentry/static/sentry/app/actionCreators/release.tsx

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 import ReleaseActions from 'app/actions/releaseActions';
 import {Client} from 'app/api';

src/sentry/static/sentry/app/actionCreators/repositories.tsx

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 import RepositoryActions from 'app/actions/repositoryActions';
 import {Client} from 'app/api';

src/sentry/static/sentry/app/api.tsx

@@ -1,7 +1,7 @@
 import isUndefined from 'lodash/isUndefined';
 import isNil from 'lodash/isNil';
 import $ from 'jquery';
-import {Severity} from '@sentry/browser';
+import {Severity} from '@sentry/react';
 
 import {
   PROJECT_MOVED,

src/sentry/static/sentry/app/bootstrap.tsx

@@ -12,13 +12,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Reflux from 'reflux';
 import * as Router from 'react-router';
-import * as Sentry from '@sentry/browser';
-import {ExtraErrorData} from '@sentry/integrations';
-import {Integrations} from '@sentry/apm';
 import SentryRRWeb from '@sentry/rrweb';
 import createReactClass from 'create-react-class';
 import jQuery from 'jquery';
 import moment from 'moment';
+import {Integrations} from '@sentry/apm';
+import {ExtraErrorData} from '@sentry/integrations';
+import * as Sentry from '@sentry/react';
 
 import {metric} from 'app/utils/analytics';
 import {init as initApiSentryClient} from 'app/utils/apiSentryClient';

src/sentry/static/sentry/app/components/activity/note/inputWithStorage.jsx

@@ -1,7 +1,7 @@
 import debounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
 import React from 'react';
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 import NoteInput from 'app/components/activity/note/input';
 import localStorage from 'app/utils/localStorage';

src/sentry/static/sentry/app/components/assistant/guideAnchor.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Reflux from 'reflux';
 import styled from '@emotion/styled';
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 import {
   closeGuide,

src/sentry/static/sentry/app/components/asyncComponent.tsx

@@ -1,9 +1,9 @@
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 import React from 'react';
-import * as Sentry from '@sentry/browser';
 import {RouteComponentProps} from 'react-router/lib/Router';
 import {WithRouterProps} from 'react-router/lib/withRouter';
+import * as Sentry from '@sentry/react';
 
 import {Client} from 'app/api';
 import {t} from 'app/locale';
@@ -15,15 +15,7 @@ import RouteError from 'app/views/routeError';
 import {metric} from 'app/utils/analytics';
 import getRouteStringFromRoutes from 'app/utils/getRouteStringFromRoutes';
 
-type AsyncComponentProps = {
-  /**
-   * Optional sentry APM profiling.
-   *
-   * NOTE: we don't decorate `AsyncComponent` but rather the subclass so we can
-   *       get its component name
-   */
-  finishProfile?: () => void;
-} & Partial<RouteComponentProps<{}, {}>>;
+type AsyncComponentProps = Partial<RouteComponentProps<{}, {}>>;
 
 type AsyncComponentState = {
   loading: boolean;
@@ -167,11 +159,6 @@ export default class AsyncComponent<
         },
       });
       this._measurement.hasMeasured = true;
-
-      // sentry apm profiling
-      if (typeof this.props.finishProfile === 'function') {
-        this.props.finishProfile();
-      }
     }
 
     // Re-fetch data when router params change.

src/sentry/static/sentry/app/components/avatar/actorAvatar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 import SentryTypes from 'app/sentryTypes';
 import UserAvatar from 'app/components/avatar/userAvatar';

src/sentry/static/sentry/app/components/dropdownMenu.tsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 import {MENU_CLOSE_DELAY} from 'app/constants';
 

src/sentry/static/sentry/app/components/errorBoundary.tsx

@@ -2,7 +2,7 @@ import {browserHistory} from 'react-router';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from '@emotion/styled';
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 import {t} from 'app/locale';
 import Alert from 'app/components/alert';

src/sentry/static/sentry/app/components/errors/detailedError.tsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 import {t} from 'app/locale';
 import InlineSvg from 'app/components/inlineSvg';

src/sentry/static/sentry/app/components/events/interfaces/spans/spanTree.tsx

@@ -159,7 +159,7 @@ class SpanTree extends React.Component<PropType> {
 
     // hide gap spans (i.e. "missing instrumentation" spans) for browser js transactions,
     // since they're not useful to indicate
-    const shouldIncludeGap = !isJavaScriptSDK(event.sdk?.name);
+    const shouldIncludeGap = !isBrowserJavaScriptSDK(event.sdk?.name);
 
     const isValidGap =
       typeof previousSiblingEndTimestamp === 'number' &&
@@ -356,12 +356,14 @@ const TraceViewContainer = styled('div')`
   border-bottom-right-radius: 3px;
 `;
 
-function isJavaScriptSDK(sdkName?: string): boolean {
+function isBrowserJavaScriptSDK(sdkName?: string): boolean {
   if (!sdkName) {
     return false;
   }
   // based on https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/version.ts
-  return sdkName.toLowerCase() === 'sentry.javascript.browser';
+  return ['sentry.javascript.browser', 'sentry.javascript.react'].includes(
+    sdkName.toLowerCase()
+  );
 }
 
 export default SpanTree;

src/sentry/static/sentry/app/components/events/interfaces/utils.jsx

@@ -1,7 +1,7 @@
 import isEmpty from 'lodash/isEmpty';
 import isString from 'lodash/isString';
-import * as Sentry from '@sentry/browser';
 import queryString from 'query-string';
+import * as Sentry from '@sentry/react';
 
 import {FILTER_MASK} from 'app/constants';
 import {defined} from 'app/utils';

src/sentry/static/sentry/app/components/lazyLoad.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from '@emotion/styled';
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 import {isWebpackChunkLoadingError} from 'app/utils';
 import {t} from 'app/locale';

src/sentry/static/sentry/app/components/links/link.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Link as RouterLink} from 'react-router';
 import {Location, LocationDescriptor} from 'history';
-import * as Sentry from '@sentry/browser';
 import styled from '@emotion/styled';
 import isPropValid from '@emotion/is-prop-valid';
+import * as Sentry from '@sentry/react';
 
 type AnchorProps = React.HTMLProps<HTMLAnchorElement>;
 

src/sentry/static/sentry/app/components/loadingIndicator.tsx

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-
-import withProfiler from 'app/utils/withProfiler';
+import {withProfiler} from '@sentry/react';
 
 type Props = {
   overlay?: boolean;
@@ -17,7 +16,6 @@ type Props = {
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
-  finishProfile: () => void;
 };
 
 function LoadingIndicator(props: Props) {
@@ -82,4 +80,6 @@ LoadingIndicator.propTypes = {
   hideSpinner: PropTypes.bool,
 };
 
-export default withProfiler(LoadingIndicator);
+export default withProfiler(LoadingIndicator, {
+  hasUpdateSpan: false,
+});

src/sentry/static/sentry/app/components/organizations/timeRangeSelector/dateRange/index.jsx

@@ -4,9 +4,9 @@ import 'react-date-range/dist/theme/default.css';
 import {DateRangePicker} from 'react-date-range';
 import PropTypes from 'prop-types';
 import React from 'react';
-import * as Sentry from '@sentry/browser';
 import moment from 'moment';
 import styled from '@emotion/styled';
+import * as Sentry from '@sentry/react';
 
 import {addErrorMessage} from 'app/actionCreators/indicator';
 import {analytics} from 'app/utils/analytics';

src/sentry/static/sentry/app/components/search/sources/apiSource.jsx

@@ -3,7 +3,7 @@ import debounce from 'lodash/debounce';
 import {withRouter} from 'react-router';
 import PropTypes from 'prop-types';
 import React from 'react';
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 import {Client} from 'app/api';
 import {createFuzzySearch} from 'app/utils/createFuzzySearch';

src/sentry/static/sentry/app/components/smartSearchBar/index.tsx

@@ -3,10 +3,10 @@ import {browserHistory} from 'react-router';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Reflux from 'reflux';
-import * as Sentry from '@sentry/browser';
 import createReactClass from 'create-react-class';
 import debounce from 'lodash/debounce';
 import styled from '@emotion/styled';
+import * as Sentry from '@sentry/react';
 
 import {addErrorMessage} from 'app/actionCreators/indicator';
 import {trackAnalyticsEvent} from 'app/utils/analytics';

src/sentry/static/sentry/app/components/u2f/u2finterface.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import u2f from 'u2f-api';
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 import ConfigStore from 'app/stores/configStore';
 import {t, tct} from 'app/locale';

src/sentry/static/sentry/app/stores/hookStore.tsx

@@ -1,6 +1,6 @@
 import Reflux from 'reflux';
 import isUndefined from 'lodash/isUndefined';
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 import {Hooks, HookName} from 'app/types/hooks';
 

src/sentry/static/sentry/app/translations.tsx

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 // zh-cn => zh_CN
 function convertToDjangoLocaleFormat(language: string) {

src/sentry/static/sentry/app/utils/apiSentryClient.tsx

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 let hub;
 

src/sentry/static/sentry/app/utils/apm.tsx

@@ -1,6 +1,6 @@
-import * as Sentry from '@sentry/browser';
 import * as Router from 'react-router';
 import {createMemoryHistory} from 'history';
+import * as Sentry from '@sentry/react';
 
 import getRouteStringFromRoutes from 'app/utils/getRouteStringFromRoutes';
 

src/sentry/static/sentry/app/utils/eventWaiter.tsx

@@ -1,5 +1,5 @@
-import * as Sentry from '@sentry/browser';
 import React from 'react';
+import * as Sentry from '@sentry/react';
 
 import {analytics} from 'app/utils/analytics';
 import {Client} from 'app/api';

src/sentry/static/sentry/app/utils/handleXhrErrorResponse.tsx

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 export default function handleXhrErrorResponse(message: string) {
   return (resp: JQueryXHR) => {

src/sentry/static/sentry/app/utils/logging.tsx

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 
 export function logException(ex: Error, context: any): void {
   Sentry.withScope(scope => {