Highlight erroring line

src/components/big-interactive-pages/editor.tsx

@@ -14,6 +14,7 @@ import Help from '../popups-etc/help'
 import { collapseRanges } from '../../lib/codemirror/util'
 import { defaultExampleCode } from '../../lib/examples'
 import MigrateToast from '../popups-etc/migrate-toast'
+import { highlightError, clearErrorHighlight } from '../../lib/engine/3-editor/error'
 
 interface EditorProps {
  persistenceState: Signal<PersistenceState>
@@ -85,7 +86,7 @@ export default function Editor({ persistenceState, cookies }: EditorProps) {
  return () => window.removeEventListener('resize', updateMaxSize)
  }, [])
  const realOutputAreaSize = useComputed(() => Math.min(maxOutputAreaSize.value, Math.max(minOutputAreaSize, outputAreaSize.value)))
- 
+
  // Resize bar logic
  const resizeState = useSignal<ResizeState | null>(null)
  useEffect(() => {
@@ -105,15 +106,15 @@ export default function Editor({ persistenceState, cookies }: EditorProps) {
  const onRun = async () => {
  foldAllTemplateLiterals()
  if (!screen.current) return
- 
+
  if (cleanup.current) cleanup.current()
  errorLog.value = []
 
  const code = codeMirror.value?.state.doc.toString() ?? ''
  const res = runGame(code, screen.current, (error) => {
  errorLog.value = [ ...errorLog.value, error ]
  })
- 
+
  screen.current.focus()
  screenShake.value++
  setTimeout(() => screenShake.value--, 200)
@@ -122,6 +123,12 @@ export default function Editor({ persistenceState, cookies }: EditorProps) {
  if (res.error) {
  console.error(res.error.raw)
  errorLog.value = [ ...errorLog.value, res.error ]
+
+ if (res.error.line) {
+ highlightError(res.error.line);
+ }
+ } else {
+ clearErrorHighlight();
  }
  }
  useEffect(() => () => cleanup.current?.(), [])
@@ -168,7 +175,7 @@ export default function Editor({ persistenceState, cookies }: EditorProps) {
  return (
  <div class={styles.page}>
  <Navbar persistenceState={persistenceState} />
- 
+
  <div class={styles.pageMain}>
  <div className={styles.codeContainer}>
  <CodeMirror
@@ -198,7 +205,7 @@ export default function Editor({ persistenceState, cookies }: EditorProps) {
  <button class={styles.errorClose} onClick={() => errorLog.value = []}>
  <IoClose />
  </button>
- 
+
  {errorLog.value.map((error, i) => (
  <div key={`${i}-${error.description}`}>{error.description}</div>
  ))}
@@ -248,7 +255,7 @@ export default function Editor({ persistenceState, cookies }: EditorProps) {
  {persistenceState.value.kind === 'IN_MEMORY' && persistenceState.value.showInitialWarning && (
  <DraftWarningModal persistenceState={persistenceState} />
  )}
- 
+
  <Help initialVisible={!cookies.hideHelp} />
  <MigrateToast persistenceState={persistenceState} />
  </div>

src/global.css

@@ -84,4 +84,8 @@ a:hover {
 
 .grecaptcha-badge {
  visibility: hidden;
+}
+
+.cm-lineNumbers > .cm-gutterElement[err-line] {
+ background: #ecb2b2!important;
 }

src/lib/engine/3-editor/error.ts

@@ -7,7 +7,7 @@ export type EsprimaError = Error & {
  column: number
 }
 
-export type GameError = 
+export type GameError =
  | { kind: 'parse', error: EsprimaError }
  | { kind: 'runtime', error: unknown }
  | { kind: 'page', error: unknown }
@@ -52,7 +52,7 @@ const normalizeStack = (stack: string): StackItem[] | null => {
  let fileUrl = match[2]!
  while (chromeStackUrlRegex.test(fileUrl))
  fileUrl = fileUrl.match(chromeStackUrlRegex)![1]!
- 
+
  return {
  callSite,
  fileUrl,
@@ -82,22 +82,27 @@ export const normalizeGameError = (gameError: GameError): NormalizedError => {
  const line = lineNumber - 1
  return {
  description: `SyntaxError: ${description}\n at <game>:${line}:${column}`,
- raw: gameError.error
+ raw: gameError.error,
+ line: line,
+ column: column
  }
  } else if (gameError.error instanceof Error) {
  const descriptionLines: string[] = []
 
  const stack = (gameError.error.stack ? normalizeStack(gameError.error.stack) : null) ?? []
+
+ let [line, col] = findErrorLineCol(gameError.error.stack)
+
  stack.reverse()
 
  let foundEval = false
  for (const item of stack) {
- if (!foundEval && [ 'eval', 'anonymous' ].includes(item.callSite)) {
+ if (!foundEval && ['eval', 'anonymous'].includes(item.callSite)) {
  foundEval = true
  if (item.lineNumber) item.lineNumber -= lineOffset
  }
  if (!foundEval) continue
- 
+
  let fileName
  try {
  const url = new URL(item.fileUrl)
@@ -118,9 +123,51 @@ export const normalizeGameError = (gameError: GameError): NormalizedError => {
  descriptionLines.unshift(`${gameError.error.name}: ${gameError.error.message}`)
  return {
  description: descriptionLines.join('\n'),
- raw: gameError.error
+ raw: gameError.error,
+ line: line,
+ column: col
  }
  } else {
  return { description: `Runtime Error: ${gameError.error}`, raw: gameError.error }
  }
+}
+
+function findErrorLineCol(stack: string | undefined): [number | null, number | null] {
+ if (!stack) return [null, null]
+
+ let line = null
+ let col = null
+ let location = stack.match(/<anonymous>:(.+)\)/)
+
+ if (location) {
+ let lineCol = location[1].split(":").map(Number)
+ line = lineCol[0] - 2 - 1
+ col = lineCol[1]
+ }
+
+ return [line, col]
+}
+
+
+export function highlightError(line: number) {
+ console.log(line)
+ const cmLineGutters = document.querySelectorAll(".cm-lineNumbers > .cm-gutterElement")
+ for (let i = 0; i < cmLineGutters.length; i++) {
+ const cmLineGutter = cmLineGutters[i] as HTMLElement;
+ const innerNumber = cmLineGutter.innerText;
+ const height = cmLineGutter.style.height;
+ if (Number(innerNumber) !== line || height === "0px") {
+ cmLineGutter.removeAttribute("err-line");
+ continue;
+ };
+ cmLineGutter.setAttribute("err-line", "");
+ }
+}
+
+export function clearErrorHighlight() {
+ const cmLineGutters = document.querySelectorAll(".cm-lineNumbers > .cm-gutterElement")
+ for (let i = 0; i < cmLineGutters.length; i++) {
+ const cmLineGutter = cmLineGutters[i] as HTMLElement;
+ cmLineGutter.removeAttribute("err-line");
+ }
 }

src/lib/state.ts

@@ -13,6 +13,8 @@ import type { Game, SessionInfo } from './game-saving/account'
 export interface NormalizedError {
  raw: unknown
  description: string
+ line?: number | null
+ column?: number | null
 }
 
 // Editor types