From 5f1fe572064b71d58d94214a9c4576ed0f14e23f Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Mon, 26 Feb 2018 18:45:55 -0500
Subject: [PATCH] Nicer crash message format
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
fixes #1205.
It doesn’t translate any of the text to avoid a case where translation is causing the error, and fails in the error boundary as well.
---
.../crash-message/crash-message.css | 28 +++++++++++++
.../crash-message/crash-message.jsx | 38 ++++++++++++++++++
src/components/crash-message/reload.svg | Bin 0 -> 1509 bytes
src/containers/error-boundary.jsx | 16 +++-----
4 files changed, 72 insertions(+), 10 deletions(-)
create mode 100644 src/components/crash-message/crash-message.css
create mode 100644 src/components/crash-message/crash-message.jsx
create mode 100644 src/components/crash-message/reload.svg
diff --git a/src/components/crash-message/crash-message.css b/src/components/crash-message/crash-message.css
new file mode 100644
index 000000000..605f7fdab
--- /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 000000000..d5fc45d16
--- /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
GIT binary patch
literal 1509
zcmZ`(%Wm5`5Z(7HSa#C_BE=cL1KR}}pm)=vK%Z+jVr(IbWJs!=&%Z;-iDjTA4488?
zJac$B<m&y?W5bTAAL_1MbC8O&)ZTSf-R{=>$M=sS@b{ZntKqm~r@9*VYi`uxiL-sG
zcl(hdpQB@)P9M6bHCIeALqAX0g%miWGVQSD`*A$nl;!Dkk|!;@epjMWswDbz%FR<#
zw-0|ygcxHvedU{1jK=D<5bVFyrhYqi{SEu}kjA?`GeIJIYrIDPjtRD?_`BPu$9j9-
zp1kWG%VAz4#F=ue$0lvQrl#9gt8$L!VpSUMHn)A+j;SIm#{IdTT$R(O=dAl-lM(ux
zksYh6HUEi1h*@hRzI2CyvtjJJhqUHx*QV!4oINJP?(3#`{+Q>Y|I<)*I;OU(D$d4!
z+Ya|#|G4JUv>{<{g+n^RX%tK#nse~(Y}sVntmp{hS8B+EBtCc5wh_-I-+Y|LV#Q+B
zk9PQTICMRk@DB+F!;1oh_!j}0E|1k=OD>W*pHb^VgACCb7l7U7*r1Hsg`gvw_MwAA
zQ`npp&?(IjG?9akxI}MJfsD~3UcnHr7<0HRm}7FzV6;IQmN`IcZEOK3shqQcWB^DV
zf}c^P5CJv&w1B-d!8#wTr#)P<t+ZgkTW=@PRufxcq}G7ms0><(s2s+^N~4_9aUw=1
zqxaEHDxz1)WN*k{OL_qdG9YRnTy$j71$7df!UzOj2t0v0I*VEGOF3!~7r`Q!ELh7~
z8d~WcS?`GVvJ1+!bQ-~2Ie{o0pa~Q2#h)NGfFerbRkV;y15@O7h|wWhMz>j_M>_F>
zh=W(&ki`r1`gmTFb(AJr50)B0kz1N1L1C<PXo)RM4xig%fs$=XT1Uo^^NVD1$fH-<
z6-(j;y6nmYtRyuaH7ltg=K+I_uArHx^HP)bQHB7<z!Ig#21#e5&@SPr{TGZ^w}DUZ
f$NVC3dRp?OnV**V7STN_cNgF#m?o?IvTptdt7L0$
literal 0
HcmV?d00001
diff --git a/src/containers/error-boundary.jsx b/src/containers/error-boundary.jsx
index 210520bf5..76802763c 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;
}
--
GitLab