chore(website): surface internal errors in playground (#5462)

typescript-eslint · Aug 10, 2022 · b6e5413 · b6e5413
1 parent 3637f8b
commit b6e5413
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 15 deletions.
diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx
@@ -7,7 +7,7 @@ import IconExternalLink from '@theme/IconExternalLink';
 import styles from './ErrorsViewer.module.css';
 
 export interface ErrorsViewerProps {
-  readonly value?: ErrorGroup[];
+  readonly value?: ErrorGroup[] | Error;
 }
 
 export interface ErrorBlockProps {
@@ -100,6 +100,17 @@ export default function ErrorsViewer({
     setIsLocked(false);
   }, [value]);
 
+  if (value && !Array.isArray(value)) {
+    return (
+      <div className={styles.list}>
+        <div className="margin-top--sm">
+          <h4>ESLint internal error</h4>
+          {value?.stack}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={styles.list}>
       {value?.map(({ group, uri, items }) => {

diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
@@ -66,7 +66,7 @@ function Playground(): JSX.Element {
   const [esAst, setEsAst] = useState<TSESTree.Program | null>();
   const [tsAst, setTsAST] = useState<SourceFile | null>();
   const [scope, setScope] = useState<Record<string, unknown> | null>();
-  const [markers, setMarkers] = useState<ErrorGroup[]>();
+  const [markers, setMarkers] = useState<ErrorGroup[] | Error>();
   const [ruleNames, setRuleNames] = useState<RuleDetails[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [tsVersions, setTSVersion] = useState<readonly string[]>([]);

diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx
@@ -127,21 +127,27 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
 
       webLinter.updateParserOptions(jsx, sourceType);
 
-      const messages = webLinter.lint(code);
+      try {
+        const messages = webLinter.lint(code);
 
-      const markers = parseLintResults(messages, codeActions, ruleId =>
-        sandboxInstance.monaco.Uri.parse(webLinter.rulesUrl.get(ruleId) ?? ''),
-      );
+        const markers = parseLintResults(messages, codeActions, ruleId =>
+          sandboxInstance.monaco.Uri.parse(
+            webLinter.rulesUrl.get(ruleId) ?? '',
+          ),
+        );
 
-      sandboxInstance.monaco.editor.setModelMarkers(
-        tabs.code,
-        'eslint',
-        markers,
-      );
+        sandboxInstance.monaco.editor.setModelMarkers(
+          tabs.code,
+          'eslint',
+          markers,
+        );
 
-      // fallback when event is not preset, ts < 4.0.5
-      if (!sandboxInstance.monaco.editor.onDidChangeMarkers) {
-        updateMarkers();
+        // fallback when event is not preset, ts < 4.0.5
+        if (!sandboxInstance.monaco.editor.onDidChangeMarkers) {
+          updateMarkers();
+        }
+      } catch (e) {
+        onMarkersChange(e as Error);
       }
 
       onEsASTChange(webLinter.storedAST);

diff --git a/packages/website/src/components/editor/types.ts b/packages/website/src/components/editor/types.ts
@@ -11,6 +11,6 @@ export interface CommonEditorProps extends ConfigModel {
   readonly onTsASTChange: (value: undefined | SourceFile) => void;
   readonly onEsASTChange: (value: undefined | TSESTree.Program) => void;
   readonly onScopeChange: (value: undefined | Record<string, unknown>) => void;
-  readonly onMarkersChange: (value: ErrorGroup[]) => void;
+  readonly onMarkersChange: (value: ErrorGroup[] | Error) => void;
   readonly onSelect: (position: Monaco.Position | null) => void;
 }