feat: Extract raven usage to sdk helper in webpack (#9003)

* feat: Extract raven usage to sdk helper in webpack

* fix: Add raven-js as webpack dep

* ref: Remove unused if

* ref: Fix if

* ref: Remove raven and sdk from provide plugin

* ref: Use default export

* fix: Remove test code

* fix: Spread args correctly, Call captureException

.storybook/webpack.config.js

@@ -68,7 +68,6 @@ module.exports = {
       jQuery: 'jquery',
       'window.jQuery': 'jquery',
       'root.jQuery': 'jquery',
-      Raven: 'raven-js',
       underscore: 'underscore',
       _: 'underscore',
     }),

package.json

@@ -59,7 +59,7 @@
     "po-catalog-loader": "2.0.0",
     "prop-types": "^15.6.0",
     "query-string": "2.4.2",
-    "raven-js": "3.23.2",
+    "raven-js": "^3.26.3",
     "react": "16.3.2",
     "react-addons-css-transition-group": "15.6.2",
     "react-autosize-textarea": "3.0.2",

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

@@ -1,5 +1,4 @@
-import Raven from 'raven-js';
-
+import sdk from 'app/utils/sdk';
 import {Client} from 'app/api';
 import GroupActions from 'app/actions/groupActions';
 import {buildUserId, buildTeamId} from 'app/utils';
@@ -83,7 +82,7 @@ export function assignToActor({id, actor}) {
       break;
 
     default:
-      Raven.captureException('Unknown assignee type', {
+      sdk.captureException('Unknown assignee type', {
         extra: {actor},
       });
   }

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

@@ -1,7 +1,7 @@
-import Raven from 'raven-js';
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import sdk from 'app/utils/sdk';
 import Avatar from 'app/components/avatar';
 import MemberListStore from 'app/stores/memberListStore';
 import TeamStore from 'app/stores/teamStore';
@@ -27,7 +27,7 @@ class ActorAvatar extends React.Component {
       return <Avatar team={team} hasTooltip {...props} />;
     }
 
-    Raven.captureException('Unknown avatar type', {
+    sdk.captureException('Unknown avatar type', {
       extra: {actor},
     });
     return null;

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

@@ -1,8 +1,8 @@
 import {isEqual} from 'lodash';
 import PropTypes from 'prop-types';
-import Raven from 'raven-js';
 import React from 'react';
 
+import sdk from 'app/utils/sdk';
 import {Client} from 'app/api';
 import {t} from 'app/locale';
 import AsyncComponentSearchInput from 'app/components/asyncComponentSearchInput';
@@ -150,7 +150,7 @@ class AsyncComponent extends React.Component {
 
   handleError(error, [stateKey]) {
     if (error && error.responseText) {
-      Raven.captureBreadcrumb({
+      sdk.captureBreadcrumb({
         message: error.responseText,
         category: 'xhr',
         level: 'error',

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import Raven from 'raven-js';
 import React from 'react';
+import sdk from 'app/utils/sdk';
 
 import {MENU_CLOSE_DELAY} from 'app/constants';
 
@@ -74,7 +74,7 @@ class DropdownMenu extends React.Component {
 
     if (!this.dropdownActor) {
       // Log an error, should be lower priority
-      Raven.captureException(new Error('DropdownMenu does not have "Actor" attached'), {
+      sdk.captureException(new Error('DropdownMenu does not have "Actor" attached'), {
         level: 'warning',
       });
     }
@@ -143,7 +143,7 @@ class DropdownMenu extends React.Component {
         }, MENU_CLOSE_DELAY);
       }
     } catch (err) {
-      Raven.captureException(err, {
+      sdk.captureException(err, {
         event: e,
         toElement: e.toElement,
         relatedTarget: e.relatedTarget,

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

@@ -1,9 +1,9 @@
 import {browserHistory} from 'react-router';
 import PropTypes from 'prop-types';
-import Raven from 'raven-js';
 import React from 'react';
 import styled from 'react-emotion';
 
+import sdk from 'app/utils/sdk';
 import {t} from 'app/locale';
 import Alert from 'app/components/alert';
 import DetailedError from 'app/components/errors/detailedError';
@@ -42,7 +42,7 @@ class ErrorBoundary extends React.Component {
 
   componentDidCatch(error, errorInfo) {
     this.setState({error});
-    Raven.captureException(error, {extra: errorInfo});
+    sdk.captureException(error, {extra: errorInfo});
   }
 
   render() {

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

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
+import sdk from 'app/utils/sdk';
 import {t} from 'app/locale';
 import InlineSvg from 'app/components/inlineSvg';
 import Button from 'app/components/buttons/button';
@@ -24,7 +25,6 @@ class DetailedError extends React.Component {
   };
 
   componentDidMount() {
-    // window.Raven.lastEventId() may not be immediatly true, so double-check after raven has time to send an error
     setTimeout(() => {
       this.forceUpdate();
     }, 100);
@@ -32,9 +32,7 @@ class DetailedError extends React.Component {
 
   openFeedback(e) {
     e.preventDefault();
-    if (window.Raven) {
-      window.Raven.lastEventId() && window.Raven.showReportDialog();
-    }
+    sdk.lastEventId() && sdk.showReportDialog();
   }
 
   render() {
@@ -65,12 +63,11 @@ class DetailedError extends React.Component {
 
               {!hideSupportLinks && (
                 <div className="detailed-error-support-links">
-                  {window.Raven &&
-                    window.Raven.lastEventId() && (
-                      <Button priority="link" onClick={this.openFeedback}>
-                        {t('Fill out a report')}
-                      </Button>
-                    )}
+                  {sdk.lastEventId() && (
+                    <Button priority="link" onClick={this.openFeedback}>
+                      {t('Fill out a report')}
+                    </Button>
+                  )}
                   <a href="https://status.sentry.io/">{t('Service status')}</a>
 
                   <a href="https://sentry.io/support/">{t('Contact support')}</a>

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

@@ -1,6 +1,6 @@
 import {isString} from 'lodash';
-import Raven from 'raven-js';
 
+import sdk from 'app/utils/sdk';
 import {defined} from 'app/utils';
 
 export function escapeQuotes(v) {
@@ -44,7 +44,7 @@ export function getCurlCommand(data) {
         if (isString(data.data)) {
           result += ' \\\n --data "' + escapeQuotes(data.data) + '"';
         } else {
-          Raven.captureMessage('Unknown event data', {
+          sdk.captureMessage('Unknown event data', {
             extra: data,
           });
         }

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-import Raven from 'raven-js';
 import React from 'react';
 
+import sdk from 'app/utils/sdk';
 import {t} from 'app/locale';
 import LoadingError from 'app/components/loadingError';
 import LoadingIndicator from 'app/components/loadingIndicator';
@@ -67,7 +67,7 @@ class LazyLoad extends React.Component {
   handleFetchError = error => {
     // eslint-disable-next-line no-console
     console.error(error);
-    Raven.captureException(error, {fingerprint: ['webpack', 'error loading chunk']});
+    sdk.captureException(error, {fingerprint: ['webpack', 'error loading chunk']});
     this.setState({
       error,
     });