Merge pull request #2530 from colbygk/integrate-sentry-webpack

Use sentry webpack instead of Raven

.travis.yml

@@ -76,11 +76,17 @@ env:
   - S3_BUCKET_NAME=${!S3_BUCKET_NAME_VAR}
   - S3_BUCKET_NAME=${S3_BUCKET_NAME:-$S3_BUCKET_NAME_STAGING}
   - S3_LOCAL_DIR=build
-  - SENTRY_DSN_master=https://6cf7e15e06b24ba48b727910bd9e6d9e@app.getsentry.com/54913
-  - SENTRY_DSN_STAGING=https://7e69dd3d620e434490f07ef0e60613f9@app.getsentry.com/58289
+  - SENTRY_DSN_master=https://ebc2f8a6bc7b44ca8fd902fd4f16b3d7@sentry.io/1357122
+  - SENTRY_DSN_STAGING=https://c01014988b0a4f44bbefdf235623c456@sentry.io/1357982
   - SENTRY_DSN_VAR=SENTRY_DSN_$TRAVIS_BRANCH
   - SENTRY_DSN=${!SENTRY_DSN_VAR}
   - SENTRY_DSN=${SENTRY_DSN:-$SENTRY_DSN_STAGING}
+  - SENTRY_ORG=scratch-foundation
+  - SENTRY_PROJECT_master=scratch-30-production
+  - SENTRY_PROJECT_STAGING=scratch-30-staging
+  - SENTRY_PROJECT_VAR=SENTRY_PROJECT_$TRAVIS_BRANCH
+  - SENTRY_PROJECT=${!SENTRY_PROJECT_VAR}
+  - SENTRY_PROJECT=${SENTRY_PROJECT:-$SENTRY_PROJECT_STAGING}
   - SKIP_CLEANUP=true
   - NODE_ENV=production
   - WWW_VERSION=${TRAVIS_COMMIT:0:5}

package.json

@@ -24,6 +24,7 @@
   },
   "homepage": "https://github.com/llk/scratch-www#readme",
   "dependencies": {
+    "@sentry/browser": "4.4.2",
     "bunyan": "1.7.1",
     "clipboard-copy": "2.0.1",
     "compression": "1.6.1",
@@ -31,7 +32,6 @@
     "express-http-proxy": "1.1.0",
     "lodash.defaults": "4.0.1",
     "newrelic": "1.25.4",
-    "raven": "0.10.0",
     "react-helmet": "5.2.0",
     "scratch-docker": "^1.0.2",
     "scratch-parser": "^4.2.0",
@@ -87,7 +87,6 @@
     "po2icu": "0.0.2",
     "postcss-loader": "2.0.10",
     "prop-types": "15.6.0",
-    "raven-js": "3.0.4",
     "react": "16.2.0",
     "react-dom": "16.2.0",
     "react-intl": "2.4.0",

src/components/errorboundary/errorboundary.jsx

@@ -1,5 +1,6 @@
 const PropTypes = require('prop-types');
 const React = require('react');
+const Sentry = require('@sentry/browser');
 
 const CrashMessageComponent = require('../crashmessage/crashmessage.jsx');
 import log from '../../lib/log.js';
@@ -13,16 +14,19 @@ class ErrorBoundary extends React.Component {
         };
     }
 
-    componentDidCatch (error, info) {
+    componentDidCatch (error, errorInfo) {
         // Display fallback UI
+        Sentry.withScope(scope => {
+            Object.keys(errorInfo).forEach(key => {
+                scope.setExtra(key, errorInfo[key]);
+            });
+            Sentry.captureException(error);
+        });
         this.setState({
             hasError: true,
-            errorId: window.Raven ? window.Raven.lastEventId() : null
+            errorId: Sentry.lastEventId()
         });
-        if (window.Raven) {
-            window.Raven.captureException(error, {extra: info});
-        }
-        log.error(`Unhandled Error: ${error}, info: ${info}`);
+        log.error(`Unhandled Error: ${error}, info: ${errorInfo}`);
     }
 
     handleBack () {
@@ -33,7 +37,7 @@ class ErrorBoundary extends React.Component {
         if (this.state.hasError) {
             return (
                 <CrashMessageComponent
-                    eventId={this.state.eventId}
+                    eventId={this.state.errorId}
                     onBack={this.handleBack}
                 />
             );

src/init.js

@@ -1,16 +1,4 @@
 const jar = require('./lib/jar');
-const Raven = require('raven-js');
-
-/**
- * -----------------------------------------------------------------------------
- * Error handling
- * -----------------------------------------------------------------------------
- */
-(() => {
-    if (process.env.SENTRY_DSN !== '') {
-        Raven.config(process.env.SENTRY_DSN).install();
-    }
-})();
 
 /**
  * -----------------------------------------------------------------------------

src/template.ejs

@@ -47,6 +47,7 @@
                 'sampleRate': 10
             });
             ga('send', 'pageview');
+            window.GA_ID = '<%- htmlWebpackPlugin.options.ga_tracker %>';
             /* eslint-enable */
         </script>
     </head>

src/views/preview/project-view.jsx

@@ -35,6 +35,14 @@ const IntlGUI = injectIntl(GUI.default);
 
 const localStorageAvailable = 'localStorage' in window && window.localStorage !== null;
 
+const Sentry = require('@sentry/browser');
+if (`${process.env.SENTRY_DSN}` !== '') {
+    Sentry.init({
+        dsn: `${process.env.SENTRY_DSN}`
+    });
+    window.Sentry = Sentry; // Allow GUI access to Sentry via window
+}
+
 class Preview extends React.Component {
     constructor (props) {
         super(props);

webpack.config.js

@@ -51,7 +51,6 @@ VersionPlugin.prototype.apply = function (compiler) {
 let entry = {
     common: [
         // Vendor
-        'raven-js',
         'react',
         'react-dom',
         'react-intl',
@@ -164,14 +163,14 @@ module.exports = {
         .concat([
             new webpack.DefinePlugin({
                 'process.env.NODE_ENV': '"' + (process.env.NODE_ENV || 'development') + '"',
-                'process.env.SENTRY_DSN': '"' + (process.env.SENTRY_DSN || '') + '"',
                 'process.env.API_HOST': '"' + (process.env.API_HOST || 'https://api.scratch.mit.edu') + '"',
                 'process.env.ASSET_HOST': '"' + (process.env.ASSET_HOST || 'https://assets.scratch.mit.edu') + '"',
                 'process.env.BACKPACK_HOST': '"' + (process.env.BACKPACK_HOST || 'https://backpack.scratch.mit.edu') + '"',
                 'process.env.CLOUDDATA_HOST': '"' + (process.env.CLOUDDATA_HOST || 'clouddata.scratch.mit.edu') + '"',
                 'process.env.PROJECT_HOST': '"' + (process.env.PROJECT_HOST || 'https://projects.scratch.mit.edu') + '"',
                 'process.env.STATIC_HOST': '"' + (process.env.STATIC_HOST || 'https://cdn2.scratch.mit.edu') + '"',
-                'process.env.SCRATCH_ENV': '"' + (process.env.SCRATCH_ENV || 'development') + '"'
+                'process.env.SCRATCH_ENV': '"' + (process.env.SCRATCH_ENV || 'development') + '"',
+                'process.env.SENTRY_DSN': '"' + (process.env.SENTRY_DSN || '') + '"'
             }),
             new webpack.optimize.CommonsChunkPlugin({
                 name: 'common',