diff --git a/src/components/crash-message/crash-message.css b/src/components/crash-message/crash-message.css new file mode 100644 index 0000000000000000000000000000000000000000..605f7fdab9e745a602bdb1d9ed32aa123de1b819 --- /dev/null +++ b/src/components/crash-message/crash-message.css @@ -0,0 +1,28 @@ +@import "../../css/colors.css"; +@import "../../css/units.css"; +@import "../../css/typography.css"; + +.crash-wrapper { + background-color: $motion-primary; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.body { + width: 35%; + color: white; + text-align: center; +} + +.reloadButton { + border: 1px solid $motion-primary; + border-radius: 0.25rem; + padding: 0.5rem 2rem; + background: white; + color: $motion-primary; + font-weight: bold; + font-size: 0.875rem; + cursor: pointer; +} diff --git a/src/components/crash-message/crash-message.jsx b/src/components/crash-message/crash-message.jsx new file mode 100644 index 0000000000000000000000000000000000000000..d5fc45d163072d6394c5da665ee6427b6d0159a4 --- /dev/null +++ b/src/components/crash-message/crash-message.jsx @@ -0,0 +1,38 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import Box from '../box/box.jsx'; + +import styles from './crash-message.css'; +import reloadIcon from './reload.svg'; + +const CrashMessage = props => ( + <div className={styles.crashWrapper}> + <Box className={styles.body}> + <img + className={styles.reloadIcon} + src={reloadIcon} + /> + <h2> + Oops! Something went wrong. + </h2> + <p> + We are so sorry, but it looks like Scratch has crashed. This bug has been + automatically reported to the Scratch Team. Please refresh your page to try + again. + + </p> + <button + className={styles.reloadButton} + onClick={props.onReload} + > + Reload + </button> + </Box> + </div> +); + +CrashMessage.propTypes = { + onReload: PropTypes.func.isRequired +}; + +export default CrashMessage; diff --git a/src/components/crash-message/reload.svg b/src/components/crash-message/reload.svg new file mode 100644 index 0000000000000000000000000000000000000000..b74601fac9d4aaaaf53b50a26411b86949c2e5f3 Binary files /dev/null and b/src/components/crash-message/reload.svg differ diff --git a/src/containers/error-boundary.jsx b/src/containers/error-boundary.jsx index 210520bf51bddc91260132c78900cf941e6a5646..76802763c37fbc115ec1c3b33efd732e6facb233 100644 --- a/src/containers/error-boundary.jsx +++ b/src/containers/error-boundary.jsx @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import platform from 'platform'; import BrowserModalComponent from '../components/browser-modal/browser-modal.jsx'; +import CrashMessageComponent from '../components/crash-message/crash-message.jsx'; import log from '../lib/log.js'; import analytics from '../lib/analytics'; @@ -28,21 +29,16 @@ class ErrorBoundary extends React.Component { window.history.back(); } + handleReload () { + window.location.reload(); + } + render () { if (this.state.hasError) { if (platform.name === 'IE') { return <BrowserModalComponent onBack={this.handleBack} />; } - return ( - <div style={{margin: '2rem'}}> - <h1>Oops! Something went wrong.</h1> - <p> - We are so sorry, but it looks like Scratch has crashed. This bug has been - automatically reported to the Scratch Team. Please refresh your page to try - again. - </p> - </div> - ); + return <CrashMessageComponent onReload={this.handleReload} />; } return this.props.children; }