Error snippets, "query" cli command, more helpful errors (#441)

- Error snippets: parse out errors and 👆 point to the syntax error in a
sql comment on the line below
- Add a `query` command used like: `pgkit query 'select x from y'`.
There are obviously myriad ways to do this already but this will use
your existing pgkit config include type parsers et al
- Error helpfulness: using `pg-query-emscripten` instead of
`pgsql-ast-parser` in the admin ui now to get better parse results and
more accurate error positions

Next:

standard-schema support + standard-schema error pretty-printing. So more
changes expected for errors

---------

Co-authored-by: Misha Kaletsky <mmkal@users.noreply.github.com>

Author: mmkal

.github/workflows/main.yml

@@ -29,7 +29,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [23.x]
+        node-version: [22]
 
     steps:
       - name: check psql

packages/admin/package.json

@@ -77,7 +77,7 @@
     "mermaid": "^10.9.1",
     "next-themes": "^0.3.0",
     "p-memoize": "^7.1.1",
-    "pgsql-ast-parser": "^12.0.1",
+    "pg-query-emscripten": "^5.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.3",
@@ -99,6 +99,7 @@
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-tailwindcss": "3.15.1",
+    "pgsql-ast-parser": "^12.0.1",
     "postcss": "^8.4.38",
     "shadcn-ui": "0.8.0",
     "sql-autocomplete": "^1.1.1",

packages/admin/src/client/sql-codemirror.tsx

@@ -14,7 +14,7 @@ export interface SqlCodeMirrorProps {
   code?: string
   onChange?: (query: string) => void
   onExecute?: (sql: string) => void
-  errors?: Array<{position: number; message: string}>
+  errors?: Array<{position: number; message: string | string[]}>
   height: string
   readonly?: boolean
   wrapText?: boolean
@@ -75,7 +75,13 @@ export const SqlCodeMirror = ({code, onChange, onExecute, errors, height, ...pro
     const linterExtension = linter(v => {
       return (errors || []).map(e => {
         const {from, to} = v.state.wordAt(e.position) || {from: e.position, to: e.position + 1}
-        return {from, to, message: e.message, severity: 'error'}
+        const unknownErrorMessage = `Unknown error. If this error came from the server, it may need a custom serializer - Errors by default are serialized to '{}'`
+        return {
+          from,
+          to,
+          message: [e.message].flat().join('\n').split('\n')[0] || unknownErrorMessage,
+          severity: 'error',
+        }
       })
     })
 

packages/admin/src/client/views/Querier.tsx

@@ -29,13 +29,13 @@ export const Querier = () => {
     onSuccess: data => {
       const newErrors = data.results.flatMap(r => {
         if (r.error && typeof r.position === 'number') {
-          return [{message: r.error.message, position: r.position + 1}]
+          return [{message: r.error.message, position: r.position}]
         }
 
         const parsed = PGErrorWrapper.safeParse(r.error?.cause)
         if (parsed.success) {
           const pgError = parsed.data.error
-          return [{message: r.error?.message || pgError.code, position: Number(pgError.position) - 1}]
+          return [{message: r.error?.message || pgError.code, position: Number(pgError.position)}]
         }
 
         return []
@@ -76,7 +76,7 @@ export const Querier = () => {
         <div className="flex gap-1">
           <Button
             title="AI"
-            disabled={aiMutation.isLoading}
+            disabled={aiMutation.isPending}
             onClick={() => {
               const aiPrompt = prompt('Enter a prompt', aiMutation.variables?.prompt || '')
               if (!aiPrompt) return
@@ -94,7 +94,7 @@ export const Querier = () => {
           </Button>
         </div>
       </div>
-      {aiMutation.isLoading && <FakeProgress value={aiMutation.isSuccess ? 100 : null} estimate={3000} />}
+      {aiMutation.isPending && <FakeProgress value={aiMutation.isSuccess ? 100 : null} estimate={3000} />}
       <div className="flex flex-col gap-4 h-[90%] relative">
         <div ref={ref} className="h-1/2 border rounded-lg overflow-scroll relative bg-gray-800">
           <SqlCodeMirror

packages/admin/src/server/declarations.d.ts

@@ -0,0 +1,26 @@
+declare module 'pg-query-emscripten' {
+  export type ParsedPGStatement = {
+    stmt?: {}
+    stmt_len?: number
+    stmt_location?: number
+  }
+  type PgQueryEmscriptenParseError = {
+    message: string
+    funcname: string
+    filename: string
+    lineno: number
+    cursorpos: number
+    context: string
+  }
+
+  export type PgQueryEmscriptenParseResult = {
+    parse_tree: {version: number; stmts: ParsedPGStatement[]}
+    stderr_buffer: string
+    error: null | PgQueryEmscriptenParseError
+  }
+  export type PgQueryEmscriptenInstance = {
+    parse(query: string): PgQueryEmscriptenParseResult
+  }
+  declare const Module: new () => Promise<PgQueryEmscriptenInstance>
+  export default Module
+}

packages/admin/src/server/query.ts

@@ -1,5 +1,5 @@
 import {FieldInfo, Queryable, nameQuery, sql} from '@pgkit/client'
-import * as parser from 'pgsql-ast-parser'
+import PGQueryEmscripten from 'pg-query-emscripten'
 import {type ServerContext} from './context.js'
 
 export const runQuery = async (query: string, {connection}: ServerContext): Promise<QueryResult[]> => {
@@ -15,46 +15,60 @@ export const runQuery = async (query: string, {connection}: ServerContext): Prom
     return [await runOneQuery(query, connection)]
   }
 
-  let parsed: parser.Statement[]
-  try {
-    parsed = parser.parse(query, {locationTracking: true})
-  } catch (err) {
-    makeJsonable(err)
-    err.message = [
-      err.message,
+  const results = [] as QueryResult[]
+
+  const [parseError, nativeParsed] = await Promise.resolve()
+    .then(() => new PGQueryEmscripten())
+    .then(parser => [null, parser.parse(query)] as const)
+    .catch((error: Error) => [error, null] as const)
+
+  if (parseError || nativeParsed.error) {
+    const error = parseError || new Error(nativeParsed.error!.message, {cause: nativeParsed.error})
+    error.message = [
+      error.message,
       '',
       `If you think the query is actually valid, it's possible the parsing library has a bug.`,
-      `Try adding --no-parse at the top of your query to disable statement-level query parsing and send it to the DB anyway.`,
+      `Try adding --no-parse at the top of your query to disable statement-level query parsing and send it to the DB as-is.`,
     ].join('\n')
-    return [{query: nameQuery([query]), original: query, error: err, result: null, fields: null}]
+    makeJsonable(error)
+    return [
+      {
+        query: nameQuery([query]),
+        original: query,
+        error,
+        result: null,
+        fields: null,
+        position: nativeParsed?.error?.cursorpos,
+      },
+    ]
   }
 
-  const results = [] as QueryResult[]
-  await connection
-    .transaction(async tx => {
-      for (const stmt of parsed) {
-        const statementSql = stmt._location
-          ? query.slice(stmt._location.start, stmt._location.end + 1)
-          : parser.toSql.statement(stmt)
-        const result = await runOneQuery(statementSql, tx)
-        results.push(result)
+  const slices = nativeParsed.parse_tree.stmts.map(s => {
+    // if (typeof s?.stmt_location !== 'number') return undefined
 
-        if (result.error) {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
-          const position = (result.error as any).cause?.error?.position
-          if (position && stmt._location) {
-            result.position = stmt._location.start + Number(position)
-          }
+    const start = s.stmt_location ?? 0
+    const length = s.stmt_len
+    const end = typeof length === 'number' ? start + length : undefined
 
-          throw result.error
-        }
+    return [start, end] as const
+  })
+
+  if (!slices.every(Array.isArray)) {
+    throw new Error('Failed to parse query')
+  }
+
+  await connection.transaction(async tx => {
+    for (const [start, end] of slices as [number, number][]) {
+      const result = await runOneQuery(query.slice(start, end), tx)
+
+      if (result.error) {
+        // @ts-expect-error optional chain yolo
+        const position: unknown = result.error?.cause?.error?.position
+        if (typeof position === 'number') result.position = start + Number(position)
       }
-    })
-    .catch((e: unknown) => {
-      const error = new Error(`Transaction failed`, {cause: e})
-      makeJsonable(error)
-      results.push({query: nameQuery([query]), original: query, error, result: null, fields: null})
-    })
+      results.push(result)
+    }
+  })
 
   return results
 }