In the Pairing Simulator page, I am getting the error: **Error:**Unexpected token '<', "<!DOCTYPE "... is not valid JSON Fid and fix the bug
2.2 KiB
Investigation: Bug in Pairing Simulator
Bug Summary
In the Pairing Simulator page, clicking the "Simulate Pairing" button results in the following error:
Unexpected token '<', "<!--DOCTYPE "... is not valid JSON
Root Cause Analysis
The frontend PairingSimulator.jsx makes a POST request to /api/pedigree/coi when simulating a pairing. However, the backend server/routes/pedigree.js does not define a /coi route. Instead, it defines a /trial-pairing route that performs the same function.
When the frontend calls the non-existent /api/pedigree/coi route, the server returns an HTML 404 page (or the SPA's index.html if in production). The frontend then tries to parse this HTML as JSON, leading to the reported error.
Additionally, PedigreeView.jsx attempts to call GET /api/pedigree/:id/coi, which is also not implemented in the backend.
Affected Components
client/src/pages/PairingSimulator.jsx: Calls/api/pedigree/coi(POST).client/src/pages/PedigreeView.jsx: Calls/api/pedigree/:id/coi(GET).server/routes/pedigree.js: Missing route definitions for/coiand/:id/coi.
Proposed Solution
- Update
server/routes/pedigree.jsto:- Alias
POST /api/pedigree/coito the existingtrial-pairinglogic. - Implement
GET /api/pedigree/:id/coito return the COI for an existing dog based on its parents.
- Alias
- Ensure the COI value returned by the API is consistent with what the frontend expects (0-1 range). Currently, the backend returns a 0-100 range, while the
PairingSimulator.jsxexpects 0-1 and multiplies by 100 in the UI.
Implementation Plan
- Backend Changes:
- Modify
server/routes/pedigree.jsto addrouter.post('/coi', ...)using the same logic astrial-pairing. - Add
router.get('/:id/coi', ...)toserver/routes/pedigree.js. - Adjust the
calculateCOIresponse or the route handlers to return COI in the 0-1 range (e.g.0.05for 5%) to matchPairingSimulator.jsx's expectation.
- Modify
- Frontend Cleanup:
- Check if
PedigreeView.jsxandpedigreeHelpers.jsneed adjustments once the backend returns the 0-1 range.formatCOIinpedigreeHelpers.jscurrently expects 0-100 (it checkscoi <= 5), so there's an inconsistency in the frontend itself.
- Check if