diff --git a/src/editors/sharedComponents/ErrorBoundary/ErrorPage.jsx b/src/editors/sharedComponents/ErrorBoundary/ErrorPage.jsx
index c67e6fa56..49621fef9 100644
--- a/src/editors/sharedComponents/ErrorBoundary/ErrorPage.jsx
+++ b/src/editors/sharedComponents/ErrorBoundary/ErrorPage.jsx
@@ -1,62 +1,48 @@
-import React, { Component } from 'react';
+import React from 'react';
import PropTypes from 'prop-types';
import {
Button, Container, Row, Col,
} from '@edx/paragon';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import messages from './messages';
/**
* An error page that displays a generic message for unexpected errors. Also contains a "Try
* Again" button to refresh the page.
- *
- * @memberof module:React
- * @extends {Component}
*/
-class ErrorPage extends Component {
- /* istanbul ignore next */
- reload() {
- global.location.reload();
- }
-
- render() {
- const { message } = this.props;
- return (
-
-
-
-
-
-
- {message && (
-
- )}
-
-
-
-
- );
- }
-}
+export const ErrorPage = ({
+ message,
+ // injected
+ intl,
+}) => (
+
+
+
+
+ {intl.formatMessage(messages.unexpectedError)}
+
+ {message && (
+
+ )}
+
+
+
+
+);
ErrorPage.propTypes = {
message: PropTypes.string,
+ // injected
+ intl: intlShape.isRequired,
};
ErrorPage.defaultProps = {
message: null,
};
-export default ErrorPage;
+export default injectIntl(ErrorPage);
diff --git a/src/editors/sharedComponents/ErrorBoundary/index.test.jsx b/src/editors/sharedComponents/ErrorBoundary/index.test.jsx
index ed4c8c674..5e4f10a64 100644
--- a/src/editors/sharedComponents/ErrorBoundary/index.test.jsx
+++ b/src/editors/sharedComponents/ErrorBoundary/index.test.jsx
@@ -10,6 +10,9 @@ jest.mock('@edx/frontend-platform/logging', () => ({
logError: jest.fn(),
}));
+// stubbing this to avoid needing to inject a stubbed intl into an internal component
+jest.mock('./ErrorPage', () => () =>
);
+
describe('ErrorBoundary', () => {
it('should render children if no error', () => {
const component = (
diff --git a/src/editors/sharedComponents/ErrorBoundary/messages.js b/src/editors/sharedComponents/ErrorBoundary/messages.js
new file mode 100644
index 000000000..f292b7408
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorBoundary/messages.js
@@ -0,0 +1,13 @@
+export const messages = {
+ unexpectedError: {
+ id: 'unexpected.error.message.text',
+ defaultMessage: 'An unexpected error occurred. Please click the button below to refresh the page.',
+ description: 'error message when an unexpected error occurs',
+ },
+ unexpectedErrorButtonLabel: {
+ id: 'unexpected.error.button.text',
+ defaultMessage: 'Try again',
+ description: 'text for button that tries to reload the app by refreshing the page',
+ },
+};
+export default messages;