跪拜 Guibai
← All articles
Frontend · JavaScript · Programmer

A Refund Page That Only Handles Full Orders: 200 Complaints in 3 Days

By ErpanOmer ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Business logic bugs sail past every automated guardrail, so a frontend who doesn't understand the domain ships a workflow that looks correct but loses money and trust. The fixes here are cheap and team-level: ask business questions at requirement review, write comments that carry the why, and test by scenario so a PM can see missing branches.

Summary

A refund page in production had zero technical defects: Sentry logged nothing, Jest gave 100% code coverage, code review passed, and the UI behaved exactly as written. The only problem was that the written behavior didn't match the business. The engineer modeled refunds as "user clicks refund, API returns entire order, done", and never once asked whether a customer might return just one item, whether shipping gets refunded, or how already-used coupons split. The PRD did mention partial refunds, but the note sat collapsed in a comment field, so every automated check and human review validated the same wrong assumption.

The incident took two days to diagnose and ended with 200+ support tickets. It illustrates why business logic errors are more dangerous than technical crashes: TypeErrors get caught by error boundaries and code review, but a wrong refund model is invisible to ESLint, TypeScript, and unit tests unless the test cases themselves encode the right business scenarios. The team now forces frontend devs to bring at least three business questions to requirement review, writes business comments that explain why a formula exists and who confirmed it, and organizes tests by business scenario rather than code branch so product managers can spot missing branches during review.

Takeaways
— A refund feature shipped with full-order-only return logic because the engineer assumed refund meant entire order.
— The code passed all technical checks: Sentry, ESLint, TypeScript, Jest, code review, and 100% coverage.
— The PRD did document partial refunds, but the rule sat in a collapsed notes field that nobody expanded.
— Business logic errors are invisible to automated defenses; users discover them first after launch.
— The team's fix requires frontend devs to read the PRD and bring at least 3 business questions to requirement review.
— Business comments should explain why a calculation exists, link to the business doc, and name the PM who confirmed it.
— Tests should be organized by business scenario (partial refund, coupon split, shipping, caps) so a PM can review and catch missing cases.
— The author claims a frontend's salary ceiling tracks business-domain depth, not React or Vue skill.
Conclusions

A PRD that hides a critical rule like partial refunds in a collapsed field turns a business requirement into a lottery draw; the process, not the engineer's knowledge, is the first failure point.

100% code coverage on tests that encode the same wrong assumption converts a business blind spot into a green signal that every reviewer trusts; the coverage number measures internal consistency, not match to actual refund rules.

The salary-ceiling claim is a strong assertion from one team's experience; it explains the refund incident neatly, but no evidence is offered that it generalizes across roles or companies.

Concepts & terms
business comment
A code comment that records the business rule behind a calculation, including the source document and the person who confirmed it, so future readers understand why the code does what it does.
business-scenario test
A unit test organized around real user outcomes, like 'partial refund returns only selected items and splits coupons proportionally', rather than around code branches; the goal is to expose missing business cases, not just execute all if/else paths.
From the discussion

The full-order-only refund bug stems from a broken requirements and QA pipeline, not a frontend oversight. Partial refunds never surfaced in product briefs, test cases, or acceptance, yet the entire blame lands on the frontend engineer. The same defect appeared in another app a year earlier, suggesting a systemic blind spot across the industry. Some comments also point out that frontend developers are routinely shut out of requirement reviews, so they never operate with enough business context to catch such gaps.

— Partial refunds existed only as a product concept; no other stakeholder knew, so the frontend cannot unilaterally be blamed.
— The product review, test cases, and acceptance all skipped partial refunds; the process fails at multiple gates, yet the frontend absorbs the full blame.
— Companies often bar frontend developers from requirement reviews and view them as mere pixel-pushing implementers, so they lack the business context needed to spot missing logic.
— It remains unclear whether the backend implemented partial refunds at all, which would place the missing link on the API layer rather than the UI.
— A similar full-order-only refund bug has appeared elsewhere, making this a recurring business-logic blind spot rather than an isolated frontend error.
Featured comments
不管不怕

How can this be blamed on the frontend missing it? Clearly, aside from the product manager, nobody knew about partial refunds. The product manager probably misses things often, and developers are too lazy to even bring it up. Something this obvious, and it still gets missed?

凯文西

First, the product's business requirements weren't clear, and no step in the entire development process raised any objection. The whole scapegoat is put on the frontend alone.

小Z先生 5 likes

1. Didn't the product review mention partial refunds? 2. Didn't test cases cover partial refunds? 3. During acceptance, didn't the product verify its own partial refund requirement? 4. Did the backend even implement partial refunds?

billy_huang

Indeed

ErpanOmer

The frontend missed it.

See top comments, translated →
Source: juejin.cn ↗ Google Translate ↗ Backup ↗