You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.7 KiB
100 lines
2.7 KiB
import React, { PureComponent } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { getEnvironmentType } from '../../../app/scripts/lib/util';
|
|
import { ENVIRONMENT_TYPE_POPUP } from '../../../shared/constants/app';
|
|
import { SUPPORT_REQUEST_LINK } from '../../helpers/constants/common';
|
|
import {
|
|
EVENT,
|
|
EVENT_NAMES,
|
|
CONTEXT_PROPS,
|
|
} from '../../../shared/constants/metametrics';
|
|
|
|
class ErrorPage extends PureComponent {
|
|
static contextTypes = {
|
|
t: PropTypes.func.isRequired,
|
|
trackEvent: PropTypes.func,
|
|
};
|
|
|
|
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;
|
|
const supportLink = (
|
|
<a
|
|
target="_blank"
|
|
key="metamaskSupportLink"
|
|
rel="noopener noreferrer"
|
|
href={SUPPORT_REQUEST_LINK}
|
|
onClick={() => {
|
|
this.context.trackEvent(
|
|
{
|
|
category: EVENT.CATEGORIES.ERROR,
|
|
event: EVENT_NAMES.SUPPORT_LINK_CLICKED,
|
|
properties: {
|
|
url: SUPPORT_REQUEST_LINK,
|
|
},
|
|
},
|
|
{
|
|
contextPropsIntoEventProperties: [CONTEXT_PROPS.PAGE_TITLE],
|
|
},
|
|
);
|
|
}}
|
|
>
|
|
<span className="error-page__link-text">{this.context.t('here')}</span>
|
|
</a>
|
|
);
|
|
const message = isPopup
|
|
? t('errorPagePopupMessage', [supportLink])
|
|
: t('errorPageMessage', [supportLink]);
|
|
|
|
return (
|
|
<section className="error-page">
|
|
<h1 className="error-page__header">{t('errorPageTitle')}</h1>
|
|
<h2 className="error-page__subheader">{message}</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;
|
|
|