From 6a946b99fc4cb26a819f680df513c95dfd4b4a39 Mon Sep 17 00:00:00 2001 From: Colby Gutierrez-Kraybill Date: Thu, 20 Dec 2018 11:29:28 -0500 Subject: [PATCH 1/7] 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 | 4 ++-- src/components/errorboundary/errorboundary.jsx | 18 +++++++++++------- src/init.js | 12 ------------ src/template.ejs | 3 +++ src/views/preview/project-view.jsx | 8 ++++++++ webpack.config.js | 10 +++++++--- 6 files changed, 31 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index d1eb30868..0d6a7488f 100644 --- a/package.json +++ b/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", diff --git a/src/components/errorboundary/errorboundary.jsx b/src/components/errorboundary/errorboundary.jsx index b2964d181..cb0212937 100644 --- a/src/components/errorboundary/errorboundary.jsx +++ b/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 ( ); diff --git a/src/init.js b/src/init.js index 0954c5315..d7f9984bb 100644 --- a/src/init.js +++ b/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(); - } -})(); /** * ----------------------------------------------------------------------------- diff --git a/src/template.ejs b/src/template.ejs index 418cf490f..88984bf01 100644 --- a/src/template.ejs +++ b/src/template.ejs @@ -8,6 +8,8 @@ + Scratch - <%= htmlWebpackPlugin.options.title %> + @@ -47,6 +49,7 @@ 'sampleRate': 10 }); ga('send', 'pageview'); + window.GA_ID = '<%- htmlWebpackPlugin.options.ga_tracker %>'; /* eslint-enable */ diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx index 6f6db92b4..1706367dd 100644 --- a/src/views/preview/project-view.jsx +++ b/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); diff --git a/webpack.config.js b/webpack.config.js index b278d4d18..80d691742 100644 --- a/webpack.config.js +++ b/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', From 827a91ade0b3ab9ea357a012ec68b039fc0619c4 Mon Sep 17 00:00:00 2001 From: Colby Gutierrez-Kraybill Date: Thu, 20 Dec 2018 12:59:59 -0500 Subject: [PATCH 2/7] Fix up incorrect title insert --- src/template.ejs | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/template.ejs b/src/template.ejs index 88984bf01..dc46b019e 100644 --- a/src/template.ejs +++ b/src/template.ejs @@ -8,8 +8,6 @@ - Scratch - <%= htmlWebpackPlugin.options.title %> - From 95658d06b85e22d5c53bf2b888846f3617fd49ce Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Thu, 20 Dec 2018 13:38:22 -0500 Subject: [PATCH 3/7] Fix indentation for linting --- src/components/errorboundary/errorboundary.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/errorboundary/errorboundary.jsx b/src/components/errorboundary/errorboundary.jsx index cb0212937..90bd7b368 100644 --- a/src/components/errorboundary/errorboundary.jsx +++ b/src/components/errorboundary/errorboundary.jsx @@ -17,10 +17,10 @@ class ErrorBoundary extends React.Component { componentDidCatch (error, errorInfo) { // Display fallback UI Sentry.withScope(scope => { - Object.keys(errorInfo).forEach(key => { - scope.setExtra(key, errorInfo[key]); - }); - Sentry.captureException(error); + Object.keys(errorInfo).forEach(key => { + scope.setExtra(key, errorInfo[key]); + }); + Sentry.captureException(error); }); this.setState({ hasError: true, From dcb03a05268ae8f21bb97c272b4de0b2dba9f024 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Thu, 20 Dec 2018 13:48:38 -0500 Subject: [PATCH 4/7] Fix lint whitespace --- src/views/preview/project-view.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx index 1706367dd..e2eaff047 100644 --- a/src/views/preview/project-view.jsx +++ b/src/views/preview/project-view.jsx @@ -40,7 +40,7 @@ if (`${process.env.SENTRY_DSN}` !== '') { Sentry.init({ dsn: `${process.env.SENTRY_DSN}` }); - window.Sentry = Sentry; // Allow GUI access to Sentry via window + window.Sentry = Sentry; // Allow GUI access to Sentry via window } class Preview extends React.Component { From 6c42f70d645bc934294922ca8b49df3b59ecaf59 Mon Sep 17 00:00:00 2001 From: Colby Gutierrez-Kraybill Date: Thu, 20 Dec 2018 14:08:32 -0500 Subject: [PATCH 5/7] Add sentry auth, org and project dynamic configuration info --- .travis.yml | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index 4385e0ab4..478f9ce09 100644 --- a/.travis.yml +++ b/.travis.yml @@ -76,11 +76,22 @@ 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_AUTH_master=${SENTRY_AUTH_MASTER} + - SENTRY_AUTH_STAGING=${SENTRY_AUTH_STAGING} + - SENTRY_AUTH_VAR=SENTRY_AUTH_$TRAVIS_BRANCH + - SENTRY_AUTH=${!SENTRY_AUTH_VAR} + - SENTRY_AUTH_TOKEN=${SENTRY_AUTH:-$SENTRY_AUTH_STAGING} + - 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} From 155c13820ea2f1486a777b991f04d08016db5349 Mon Sep 17 00:00:00 2001 From: Colby Gutierrez-Kraybill Date: Thu, 20 Dec 2018 14:15:00 -0500 Subject: [PATCH 6/7] Only use SENTRY_AUTH_TOKEN in the environment variables set in travis gui --- .travis.yml | 5 ----- 1 file changed, 5 deletions(-) diff --git a/.travis.yml b/.travis.yml index 478f9ce09..ba3fa1ca6 100644 --- a/.travis.yml +++ b/.travis.yml @@ -76,11 +76,6 @@ env: - S3_BUCKET_NAME=${!S3_BUCKET_NAME_VAR} - S3_BUCKET_NAME=${S3_BUCKET_NAME:-$S3_BUCKET_NAME_STAGING} - S3_LOCAL_DIR=build - - SENTRY_AUTH_master=${SENTRY_AUTH_MASTER} - - SENTRY_AUTH_STAGING=${SENTRY_AUTH_STAGING} - - SENTRY_AUTH_VAR=SENTRY_AUTH_$TRAVIS_BRANCH - - SENTRY_AUTH=${!SENTRY_AUTH_VAR} - - SENTRY_AUTH_TOKEN=${SENTRY_AUTH:-$SENTRY_AUTH_STAGING} - SENTRY_DSN_master=https://ebc2f8a6bc7b44ca8fd902fd4f16b3d7@sentry.io/1357122 - SENTRY_DSN_STAGING=https://c01014988b0a4f44bbefdf235623c456@sentry.io/1357982 - SENTRY_DSN_VAR=SENTRY_DSN_$TRAVIS_BRANCH From 93e9f950c2cd999e0c3e8f491ce2c77b8e302857 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Thu, 20 Dec 2018 15:14:28 -0500 Subject: [PATCH 7/7] Remove webpack step for now --- package.json | 1 - webpack.config.js | 5 ----- 2 files changed, 6 deletions(-) diff --git a/package.json b/package.json index 0d6a7488f..78f9c483b 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,6 @@ "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", diff --git a/webpack.config.js b/webpack.config.js index 80d691742..476359ba1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -4,7 +4,6 @@ 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'); @@ -159,10 +158,6 @@ module.exports = { .concat(process.env.NODE_ENV === 'production' ? [ new webpack.optimize.UglifyJsPlugin({ sourceMap: true - }), - new SentryWebpackPlugin({ - include: '.', - ignore: ['node_modules', 'webpack.config.js'] }) ] : []) .concat([