Update to new sentry API pattern

Use current Sentry browser package and forward errorId into eventId
Fix up errorInfo reference
Put Sentry on the window object for GUI to use
Remove unneeded reference to old style Raven and raven-js
Move Sentry webpack config into production only

Add GA tracker ID to window

Allows scratch-gui to use same GA id

package.json

@@ -24,6 +24,8 @@
   },
   "homepage": "https://github.com/llk/scratch-www#readme",
   "dependencies": {
+    "@sentry/browser": "4.4.2",
+    "@sentry/webpack-plugin": "1.6.2",
     "bunyan": "1.7.1",
     "clipboard-copy": "2.0.1",
     "compression": "1.6.1",
@@ -31,7 +33,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 +88,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

@@ -8,6 +8,8 @@
         <meta http-equiv="x-ua-compatible" content="ie=edge">
         <meta name="viewport" content="width=<%= htmlWebpackPlugin.options.viewportWidth %>, initial-scale=1">
 
+        <title>Scratch - <%= htmlWebpackPlugin.options.title %></title>
+        
         <!-- Prevent mobile Safari from making phone numbers -->
         <meta name="format-detection" content="telephone=no">
 
@@ -47,6 +49,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

@@ -4,6 +4,7 @@ const defaults = require('lodash.defaults');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const gitsha = require('git-bundle-sha');
 const path = require('path');
+const SentryWebpackPlugin = require('@sentry/webpack-plugin');
 const webpack = require('webpack');
 
 let routes = require('./src/routes.json');
@@ -51,7 +52,6 @@ VersionPlugin.prototype.apply = function (compiler) {
 let entry = {
     common: [
         // Vendor
-        'raven-js',
         'react',
         'react-dom',
         'react-intl',
@@ -159,19 +159,23 @@ module.exports = {
         .concat(process.env.NODE_ENV === 'production' ? [
             new webpack.optimize.UglifyJsPlugin({
                 sourceMap: true
+            }),
+            new SentryWebpackPlugin({
+                include: '.',
+                ignore: ['node_modules', 'webpack.config.js']
             })
         ] : [])
         .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',