2026-07-10 · 5 min read · Rahul Chitturi
- url
- api
- frontend
Filter links break when the frontend and API disagree about how arrays should appear in a query string. One framework sends tags=a&tags=b, another sends tags[]=a&tags[]=b, and a third sends tags=a,b. Each can be valid, but only one matches the server contract.
The bug is easiest to debug before changing router code. Capture the browser URL, the request URL seen by the API, and the parsed filter object on the server.
Name the array convention
Array encoding should be an explicit contract, not a side effect of whichever helper was imported first. When pagination, sorting, and search terms are also present, an unreviewed convention change can look like random filter drift.
- Compare repeated keys, bracket syntax, indexes, and comma-separated values
- Decode percent escapes before judging whether delimiters are present
- Check whether spaces arrive as plus signs or %20
- Preserve empty arrays and missing filters as different states when the API cares
Review navigation and API logs together
Client-side navigation can reuse stale search parameters when users remove the last selected filter. API logs may only show the final parsed object, so keep the raw request URL beside the parsed JSON body while investigating.
If a fix changes the query format, diff old and new links from realistic filter combinations. Share examples in the ticket so backend and frontend reviewers agree on the contract.
A Flashman workflow
Use the URL encoder/decoder to inspect query strings, the JSON formatter to read server-side parsed filters, and the diff tool to compare before and after links. The case converter helps normalize parameter names when APIs mix snake_case and camelCase.
Use sanitized product IDs and fake search terms in examples. The shape of the query matters more than the private values selected by a real customer.