fix(browser-repl): strip ansi codes from syntax errors COMPASS-9921 (#2550)

strip ansi codes from syntax errors in browser-repl

Author: lerouxb

package-lock.json

@@ -113,6 +113,7 @@
     "react-refresh": "^0.14.0",
     "rimraf": "^3.0.2",
     "stream-browserify": "^3.0.0",
+    "strip-ansi": "^6.0.0",
     "util": "^0.12.5",
     "webpack": "^5.99.9",
     "webpack-cli": "^6.0.1",

packages/browser-repl/package.json

@@ -54,6 +54,24 @@ describe('ErrorOutput', function () {
 
       expect(wrapper.text()).to.contain('Something went wrong.');
     });
+
+    it('strips ANSI codes from syntax errors', function () {
+      const error = new SyntaxError('Syntax is wrong');
+      error.stack = `SyntaxError: Syntax is wrong
+\u001b[0m    at new Script (vm.js:79:7)\u001b[0m
+\u001b[0m    at createScript (vm.js:251:10)\u001b[0m
+\u001b[0m    at Object.runInThisContext (vm.js:303:10)\u001b[0m
+\u001b[0m    at ...`;
+      error.message = error.stack;
+
+      const wrapper = mount(<ErrorOutput value={error} />);
+      expect(wrapper.text()).to.deep
+        .equal(`SyntaxError: SyntaxError: Syntax is wrong
+    at new Script (vm.js:79:7)
+    at createScript (vm.js:251:10)
+    at Object.runInThisContext (vm.js:303:10)
+    at ...`);
+    });
   });
 
   describe('expanded', function () {
@@ -69,5 +87,28 @@ describe('ErrorOutput', function () {
       );
       expect(wrapper.text()).not.to.contain('More details about the error');
     });
+
+    it('strips ANSI codes from syntax errors', function () {
+      const error = new SyntaxError('Syntax is wrong');
+      error.stack = `SyntaxError: Syntax is wrong
+\u001b[0m    at new Script (vm.js:79:7)\u001b[0m
+\u001b[0m    at createScript (vm.js:251:10)\u001b[0m
+\u001b[0m    at Object.runInThisContext (vm.js:303:10)\u001b[0m
+\u001b[0m    at ...`;
+      error.message = error.stack;
+
+      const wrapper = mount(<ErrorOutput value={error} />);
+      wrapper.find('svg').simulate('click');
+
+      expect(wrapper.text()).to.deep
+        .equal(`SyntaxError: SyntaxError: Syntax is wrong
+    at new Script (vm.js:79:7)
+    at createScript (vm.js:251:10)
+    at Object.runInThisContext (vm.js:303:10)
+    at ...    at new Script (vm.js:79:7)
+    at createScript (vm.js:251:10)
+    at Object.runInThisContext (vm.js:303:10)
+    at ...`);
+    });
   });
 });

packages/browser-repl/src/components/types/error-output.spec.tsx

@@ -6,6 +6,7 @@ import { css, palette } from '@mongodb-js/compass-components';
 import { SimpleTypeOutput } from './simple-type-output';
 import { Expandable } from '../utils/expandable';
 import type { MongoServerError } from 'mongodb';
+import stripAnsi from 'strip-ansi';
 
 interface ErrorOutputProps {
   value: any;
@@ -31,6 +32,8 @@ export class ErrorOutput extends Component<ErrorOutputProps> {
   renderCollapsed(toggle: () => void): JSX.Element {
     const { name, message, codeName } = this.props.value as MongoServerError;
     const formattedName = name + (codeName ? `[${codeName}]` : '');
+    const strippedMessage =
+      name === 'SyntaxError' ? stripAnsi(message) : message;
     return (
       <div>
         <pre>
@@ -43,14 +46,16 @@ export class ErrorOutput extends Component<ErrorOutputProps> {
           >
             {formattedName || 'Error'}:
           </a>{' '}
-          <span className={messageCss}>{message}</span>
+          <span className={messageCss}>{strippedMessage}</span>
         </pre>
       </div>
     );
   }
 
   formatStack(): string {
-    return this.props.value.stack.split('\n').slice(1).join('\n');
+    const err = this.props.value;
+    const stack = err.name === 'SyntaxError' ? stripAnsi(err.stack) : err.stack;
+    return stack.split('\n').slice(1).join('\n');
   }
 
   formatErrorBugReportInfo(): JSX.Element | undefined {