fix: preview show error stack trace (#6281)

packages/netlify-cms-core/package.json

@@ -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",

packages/netlify-cms-core/src/components/UI/ErrorBoundary.js

@@ -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"

packages/netlify-cms-core/src/components/UI/__tests__/ErrorBoundary.spec.js

@@ -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();
   });
 });

packages/netlify-cms-core/src/components/UI/__tests__/__snapshots__/ErrorBoundary.spec.js.snap

@@ -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>
-`;