fix: preview show error stack trace (#6281)

Author: devnamrits

jest.config.js

@@ -11,6 +11,8 @@ module.exports = {
   },
   testURL: 'http://localhost:8080',
   snapshotSerializers: ['jest-emotion'],
-  transformIgnorePatterns: ['node_modules/(?!copy-text-to-clipboard)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!copy-text-to-clipboard|clean-stack|escape-string-regexp)',
+  ],
   testEnvironment: 'jsdom',
 };

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

@@ -6127,6 +6127,13 @@ clean-stack@^2.0.0:
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
   integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
 
+clean-stack@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-4.1.0.tgz#5ce5a2fd19a12aecdce8570daefddb7ac94b6b4e"
+  integrity sha512-dxXQYI7mfQVcaF12s6sjNFoZ6ZPDQuBBLp3QJ5156k9EvUFClUoZ11fo8HnLQO241DDVntHEug8MOuFO5PSfRg==
+  dependencies:
+    escape-string-regexp "5.0.0"
+
 cli-boxes@^2.2.0, cli-boxes@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
@@ -6849,7 +6856,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.7.0:
+create-react-class@^15.5.1, create-react-class@^15.7.0:
   version "15.7.0"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e"
   integrity sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==
@@ -8026,6 +8033,11 @@ [email protected], escape-string-regexp@^1.0.2, escape-string-regexp@^1
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+[email protected]:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
+  integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
+
 escape-string-regexp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
@@ -10303,7 +10315,7 @@ interpret@^2.0.0, interpret@^2.2.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
   integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
 
-invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
+invariant@^2.0.0, invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -15126,7 +15138,19 @@ react-popper@^1.3.7:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
-react-redux@^4.0.0, react-redux@^7.2.0:
+react-redux@^4.0.0:
+  version "4.4.10"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-4.4.10.tgz#ad57bd1db00c2d0aa7db992b360ce63dd0b80ec5"
+  integrity sha512-tjL0Bmpkj75Td0k+lXlF8Fc8a9GuXFv/3ahUOCXExWs/jhsKiQeTffdH0j5byejCGCRL4tvGFYlrwBF1X/Aujg==
+  dependencies:
+    create-react-class "^15.5.1"
+    hoist-non-react-statics "^3.3.0"
+    invariant "^2.0.0"
+    lodash "^4.17.11"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+
+react-redux@^7.2.0:
   version "7.2.8"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de"
   integrity sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw==