From b6e5413fb12c2b1943a288b514f864c339380388 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Wed, 10 Aug 2022 23:10:42 +0800
Subject: [PATCH] chore(website): surface internal errors in playground (#5462)

---
 .../website/src/components/ErrorsViewer.tsx   | 13 +++++++-
 .../website/src/components/Playground.tsx     |  2 +-
 .../src/components/editor/LoadedEditor.tsx    | 30 +++++++++++--------
 .../website/src/components/editor/types.ts    |  2 +-
 4 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx
index 6d7621d096a..10a19922fdb 100644
--- 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
index d5fade82343..d86893bb56c 100644
--- 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
index f325fb91e6d..65de546a25a 100644
--- 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
index 7b904b4bf5f..fd790946069 100644
--- 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;
 }