SPQ-v2 Pitfalls (June 2026)

Bugs discovered and fixed during the spq-v2 porting/deployment phase.

1. Nested component input focus loss

The ServiceRow was defined as a nested function inside ServicesTable. Every store update re-rendered ServicesTable, recreating ServiceRow as a new React component type, destroying and remounting the DOM inputs. Focus lost on every keystroke.

Fix: Extracted to file-level memo'd component. See pocketbase-development skill.

2. Subagent-generated bugs

Subagents dispatched to build feature pages consistently produce the same class of bugs:

Missing onClick handlers — buttons rendered without any action (e.g., "Add as custom service")
Wrong collection names — using repair_orders when it's repairOrders
Missing API wiring — AI functions imported but not connected
Nested components — components defined inside components (causes focus loss)
sort: '-created' — references field that doesn't exist on most PB collections

Post-subagent audit checklist:

Every button has an onClick handler
Every collection name matches the actual PB collection
All import functions are actually called somewhere
No components defined inside other components
All sort fields exist on the target collection

3. PocketBase collection naming

Code uses	Actual PB name	Status
`repair_orders`	`repairOrders`	Wrong — must match
`repairOrders`	`repairOrders`	Correct
`invoices`	MISSING	Needs collection created
`service_advisors`	MISSING	Needs collection created
`vehicles`	MISSING	Needs collection created

4. `created` field doesn't exist

PB collections created via the SDK on first insert don't get system created/updated fields. Use sort: '-id' instead. Also, createdAt field was used inconsistently — the QuoteGenerator saves createdAt but the Dashboard reads created.

5. Tesseract.js CDN import fails in Vite prod

import('https://cdn.jsdelivr.net/npm/tesseract.js@5/...') — Vite can't bundle external URLs. Use import Tesseract from 'tesseract.js' (npm package already in package.json).

6. RepairOrders JSON field (services)

PB json type fields arrive as strings when the collection was created via certain paths. Always guard with Array.isArray() and wrap JSON.parse() in try/catch.

7. Date formatting crashes

new Date(undefined) → Invalid Date → RangeError: Invalid time value when calling .toLocaleDateString(). Always guard with if (!iso) return '—'.

8. Completed → Reopen

Original bug: once a repair order was marked "completed", all status buttons disappeared. Only "Mark Delivered" was shown. Fixed by adding "Reopen" button that sets status back to "active".

9. Promised Completion (Due Time)

The original site shows a "Due" column with formatted promised completion times. Added promisedTime field to RepairOrder type, formatDueDate() formatter, datetime-local input in create/edit modal, and column in the table.

3.0 KiB Raw Blame History