mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-24 11:01:41 +01:00
560be4b4e3
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.
75 lines
1.8 KiB
JavaScript
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
|