fix: remove Sentry and add ErrorBoundary tests

package.json

@@ -114,7 +114,7 @@
     "babel-loader": "8.2.2",
     "chromedriver": "107.0.3",
     "enzyme": "3.10.0",
-    "enzyme-adapter-react-16": "1.3.0",
+    "enzyme-adapter-react-16": "1.15.7",
     "eslint": "5.16.0",
     "eslint-config-scratch": "6.0.0",
     "eslint-import-resolver-webpack": "0.11.1",

src/containers/error-boundary.jsx

@@ -10,37 +10,36 @@ class ErrorBoundary extends React.Component {
     constructor (props) {
         super(props);
         this.state = {
-            hasError: false,
-            errorId: null
+            error: null,
+            errorInfo: null
         };
     }
 
-    componentDidCatch (error, info) {
-        // Error object may be undefined (IE?)
+    /**
+     * Handle an error caught by this ErrorBoundary component.
+     * @param {Error} error - the error that was caught.
+     * @param {React.ErrorInfo} errorInfo - the React error info associated with the error.
+     */
+    componentDidCatch (error, errorInfo) {
         error = error || {
             stack: 'Unknown stack',
             message: 'Unknown error'
         };
+        errorInfo = errorInfo || {
+            componentStack: 'Unknown component stack'
+        };
 
-        // Log errors to analytics, leaving out browsers that are not in our recommended set
-        if (recommendedBrowser() && window.Sentry) {
-            window.Sentry.withScope(scope => {
-                Object.keys(info).forEach(key => {
-                    scope.setExtra(key, info[key]);
-                });
-                scope.setExtra('action', this.props.action);
-                window.Sentry.captureException(error);
+        // only remember the first error: later errors might just be side effects of that first one
+        if (!this.state.error) {
+            // store error & errorInfo for debugging
+            this.setState({
+                error,
+                errorInfo
             });
         }
 
-        // Display fallback UI
-        this.setState({
-            hasError: true,
-            errorId: window.Sentry ? window.Sentry.lastEventId() : null
-        });
-
-        // Log error locally for debugging as well.
-        log.error(`Unhandled Error: ${error.stack}\nComponent stack: ${info.componentStack}`);
+        // report every error in the console
+        log.error(`Unhandled Error: ${error.stack}\nComponent stack: ${errorInfo.componentStack}`);
     }
 
     handleBack () {
@@ -52,11 +51,10 @@ class ErrorBoundary extends React.Component {
     }
 
     render () {
-        if (this.state.hasError) {
+        if (this.state.error) {
             if (recommendedBrowser()) {
                 return (
                     <CrashMessageComponent
-                        eventId={this.state.errorId}
                         onReload={this.handleReload}
                     />
                 );

src/lib/error-boundary-hoc.jsx

@@ -10,8 +10,8 @@ import ErrorBoundary from '../containers/error-boundary.jsx';
 const ErrorBoundaryHOC = function (action){
     /**
      * The function to be called with a React component to wrap it.
-     * @param {React.Component} WrappedComponent - Component to wrap with an error boundary.
-     * @returns {React.Component} the component wrapped with an error boundary.
+     * @param {React.ComponentType} WrappedComponent - Component to wrap with an error boundary.
+     * @returns {React.ComponentType} the component wrapped with an error boundary.
      */
     return function (WrappedComponent) {
         const ErrorBoundaryWrapper = props => (

src/playground/index.ejs

@@ -6,14 +6,6 @@
     <meta name="google" value="notranslate">
     <link rel="shortcut icon" href="static/favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <% if (htmlWebpackPlugin.options.sentryConfig) { %>
-        <!-- Sentry error logging to help with finding bugs -->
-        <script src="https://cdn.ravenjs.com/3.22.1/raven.min.js" crossorigin="anonymous"></script>
-        <script>
-            Raven.config(<%= htmlWebpackPlugin.options.sentryConfig %>).install();
-        </script>
-        <!-- /Sentry -->
-    <% } %>
   </head>
   <body>
   </body>

test/unit/components/error-boundary-hoc.test.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {Provider} from 'react-redux';
+const {mountWithIntl} = require('../../helpers/intl-helpers.jsx');
+
+import configureStore from 'redux-mock-store';
+
+import CrashMessageComponent from '../../../src/components/crash-message/crash-message.jsx';
+import ErrorBoundary from '../../../src/containers/error-boundary.jsx';
+
+const ChildComponent = () => <div>hello</div>;
+
+describe('ErrorBoundary', () => {
+    const mockStore = configureStore();
+    let store;
+
+    beforeEach(() => {
+        store = mockStore({
+            locales: {
+                isRtl: false,
+                locale: 'en-US'
+            }
+        });
+    });
+
+    test('ErrorBoundary shows children before error and CrashMessageComponent after', () => {
+        const child = <ChildComponent />;
+        const wrapper = mountWithIntl(
+            <Provider store={store}><ErrorBoundary action="test">{child}</ErrorBoundary></Provider>
+        );
+        const errorSite = wrapper.childAt(0).childAt(0);
+
+        // @ts-ignore: 'onReload' prop is absent because this component will only be used for pattern matching
+        const crashMessagePattern = <CrashMessageComponent />;
+
+        expect(wrapper.containsMatchingElement(child)).toBeTruthy();
+        expect(wrapper.containsMatchingElement(crashMessagePattern)).toBeFalsy();
+
+        errorSite.simulateError(new Error('fake error for testing purposes'));
+
+        expect(wrapper.containsMatchingElement(child)).toBeFalsy();
+        expect(wrapper.containsMatchingElement(crashMessagePattern)).toBeTruthy();
+    });
+});

webpack.config.js

@@ -138,8 +138,7 @@ module.exports = [
             new HtmlWebpackPlugin({
                 chunks: ['lib.min', 'gui'],
                 template: 'src/playground/index.ejs',
-                title: 'Scratch 3.0 GUI',
-                sentryConfig: process.env.SENTRY_CONFIG ? '"' + process.env.SENTRY_CONFIG + '"' : null
+                title: 'Scratch 3.0 GUI'
             }),
             new HtmlWebpackPlugin({
                 chunks: ['lib.min', 'blocksonly'],