Correct checks for syntax error

Author: iddan

src/App.tsx

@@ -4,6 +4,7 @@ import './index.css';
 import { queryCode } from './engine';
 import QueryEditor from './QueryEditor';
 import Code, { HighlightedInterval, HighlightedIntervals } from './Code';
+import { isSyntaxError } from './tsquery-util';
 
 const REG_EXPS: Record<string, RegExp> = {
   AllLineBreaks: /\n/g,
@@ -43,7 +44,7 @@ export default function App() {
       const highlightedIntervals = nodes.map((node) => mapNodeToHighlightInterval(node));
       setHighlightedIntervals(highlightedIntervals);
     } catch (error) {
-      if (error instanceof SyntaxError) {
+      if (isSyntaxError(error)) {
         return;
       }
       throw error;

src/QueryEditor.tsx

@@ -3,6 +3,7 @@ import Editor, { EditorProps } from '@monaco-editor/react';
 import type * as Monaco from 'monaco-editor';
 import { tsquery } from '@phenomnomnominal/tsquery';
 import { sanitizeQuery } from './engine';
+import { isSyntaxError } from './tsquery-util';
 
 const MONACO_MODEL_MARKER_OWNER = 'tsquery';
 
@@ -73,7 +74,7 @@ function getSyntaxError(query: string): Error | null {
     tsquery.parse(query);
     return null;
   } catch (error) {
-    if (error instanceof SyntaxError) {
+    if (isSyntaxError(error)) {
       return error;
     }
     throw error;

src/tsquery-util.ts

@@ -0,0 +1,6 @@
+type SyntaxError = Error & { name: 'SyntaxError' };
+
+export function isSyntaxError(error: unknown): error is SyntaxError {
+  // can't rely on instanceof SyntaxError as errors from the esquery parser are not instances of the global SyntaxError
+  return error instanceof Error && error.name === 'SyntaxError';
+}