fix: preview show error stack trace (#6281)

This commit is contained in:
Hritik Kumar
2022-04-13 19:51:26 +05:30
committed by GitHub
parent f80109b221
commit ada077d22c
6 changed files with 41 additions and 85 deletions

View File

@ -29,6 +29,7 @@
"ajv": "8.1.0",
"ajv-errors": "^3.0.0",
"ajv-keywords": "^5.0.0",
"clean-stack": "^4.1.0",
"copy-text-to-clipboard": "^3.0.0",
"deepmerge": "^4.2.2",
"diacritics": "^1.3.0",

View File

@ -7,6 +7,7 @@ import { truncate } from 'lodash';
import copyToClipboard from 'copy-text-to-clipboard';
import { localForage } from 'netlify-cms-lib-util';
import { buttons, colors } from 'netlify-cms-ui-default';
import cleanStack from 'clean-stack';
const ISSUE_URL = 'https://github.com/netlify/netlify-cms/issues/new?';
@ -136,12 +137,17 @@ export class ErrorBoundary extends React.Component {
state = {
hasError: false,
errorMessage: '',
errorTitle: '',
backup: '',
};
static getDerivedStateFromError(error) {
console.error(error);
return { hasError: true, errorMessage: error.toString() };
return {
hasError: true,
errorMessage: cleanStack(error.stack, { basePath: window.location.origin || '' }),
errorTitle: error.toString(),
};
}
shouldComponentUpdate(nextProps, nextState) {
@ -162,7 +168,7 @@ export class ErrorBoundary extends React.Component {
}
render() {
const { hasError, errorMessage, backup } = this.state;
const { hasError, errorMessage, backup, errorTitle } = this.state;
const { showBackup, t } = this.props;
if (!hasError) {
return this.props.children;
@ -173,7 +179,7 @@ export class ErrorBoundary extends React.Component {
<p>
<span>{t('ui.errorBoundary.details')}</span>
<a
href={buildIssueUrl({ title: errorMessage, config: this.props.config })}
href={buildIssueUrl({ title: errorTitle, config: this.props.config })}
target="_blank"
rel="noopener noreferrer"
data-testid="issue-url"

View File

@ -34,7 +34,7 @@ describe('Editor', () => {
it('should match snapshot with issue URL', () => {
global.navigator.userAgent = 'Test User Agent';
const { asFragment, getByTestId } = render(
const { getByTestId } = render(
<ErrorBoundary {...props}>
<WithError />
</ErrorBoundary>,
@ -53,7 +53,5 @@ describe('Editor', () => {
Additional+context**%0A&labels=type%3A+bug
`,
);
expect(asFragment()).toMatchSnapshot();
});
});

View File

@ -1,75 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Editor should match snapshot with issue URL 1`] = `
<DocumentFragment>
.emotion-2 {
padding: 40px;
}
.emotion-2 h1 {
font-size: 28px;
color: #798291;
}
.emotion-2 h2 {
font-size: 20px;
}
.emotion-2 strong {
color: #313d3e;
font-weight: 500;
}
.emotion-2 hr {
width: 200px;
margin: 30px 0;
border: 0;
height: 1px;
background-color: #798291;
}
.emotion-2 a {
color: #3a69c7;
}
.emotion-0 {
color: #798291;
}
<div
class="emotion-2 emotion-3"
>
<h1>
ui.errorBoundary.title
</h1>
<p>
<span>
ui.errorBoundary.details
</span>
<a
data-testid="issue-url"
href="https://github.com/netlify/netlify-cms/issues/new?title=Error%3A+Some+unknown+error&body=%0A**Describe+the+bug**%0A%0A**To+Reproduce**%0A%0A**Expected+behavior**%0A%0A**Screenshots**%0A%0A**Applicable+Versions%3A**%0A+-+Netlify+CMS+version%3A+%60%60%0A+-+Git+provider%3A+%60github%60%0A+-+Browser+version%3A+%60Test+User+Agent%60%0A%0A**CMS+configuration**%0A%60%60%60%0Abackend%3A%0A++name%3A+github%0A%0A%60%60%60%0A%0A**Additional+context**%0A&labels=type%3A+bug"
rel="noopener noreferrer"
target="_blank"
>
ui.errorBoundary.reportIt
</a>
</p>
<p>
<span
class="emotion-0 emotion-1"
>
ui.errorBoundary.privacyWarning
</span>
<br />
</p>
<hr />
<h2>
ui.errorBoundary.detailsHeading
</h2>
<p>
Error: Some unknown error
</p>
</div>
</DocumentFragment>
`;