1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/app/pages/error/error.component.js
Mark Stacey 560be4b4e3
Add top-level error page (#7889)
Any error caught during a React component render or lifecycle method
will now be caught by the top-level error boundary, which shows the
user this new error page. The error page will display a simple error
message, and will show the details of the error in a collapsible
section.

The caught error is also reported to Sentry.

In development the error will be re-thrown to make it easier to see on
the console, but it is not re-thrown in production.
2020-01-24 17:11:02 -04:00

75 lines
1.8 KiB
JavaScript

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { getEnvironmentType } from '../../../../app/scripts/lib/util'
import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
class ErrorPage extends PureComponent {
static contextTypes = {
t: PropTypes.func.isRequired,
}
static propTypes = {
error: PropTypes.object.isRequired,
}
renderErrorDetail (content) {
return (
<li>
<p>
{content}
</p>
</li>
)
}
renderErrorStack (title, stack) {
return (
<li>
<span>
{title}
</span>
<pre className="error-page__stack">
{stack}
</pre>
</li>
)
}
render () {
const { error } = this.props
const { t } = this.context
const isPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
return (
<section className="error-page">
<h1 className="error-page__header">
{t('errorPageTitle')}
</h1>
<h2 className="error-page__subheader">
{
isPopup
? t('errorPagePopupMessage')
: t('errorPageMessage')
}
</h2>
<section className="error-page__details">
<details>
<summary>
{t('errorDetails')}
</summary>
<ul>
{ error.message ? this.renderErrorDetail(t('errorMessage', [error.message])) : null }
{ error.code ? this.renderErrorDetail(t('errorCode', [error.code])) : null }
{ error.name ? this.renderErrorDetail(t('errorName', [error.name])) : null }
{ error.stack ? this.renderErrorStack(t('errorStack'), error.stack) : null }
</ul>
</details>
</section>
</section>
)
}
}
export default ErrorPage