06 · Development · Four failures
The API stated the reason; the page only showed failure
The frontend engineer turns to-dos, errors, and states into a screen the operator can read. A business reject must not display only as failure. He does not change stock in the browser.
The frontend engineer owns whether people can see the next step
The backend returns error codes and states. The frontend engineer turns them into a screen the operator can act on. The job is not only restoring a design. It is not swallowing information. Business reject, system fault, no permission, and empty list: if all four show “failed” or “no data,” people can only call. DaXi Technology requires the original error or the agreed human sentence next to the task, and keeps the document in the state it actually stopped in.
He does not change quantity books in the browser. Input can change locally first. Submit results must follow the server. If optimistic update shows submitted, then a refresh puts it back, two people on the floor will tap again. Permission cannot rely only on hiding buttons. Buttons can hide, but a direct URL must show no permission, not a blank page. Which field a scan gun types into is proven by compatibility on the acceptance device. Frontend moves focus from the defect. It does not treat that gun as its own main experiment.
List, detail, and submit are three tasks
The ordering list must filter by store and state. Default puts to-dos first. Documents rejected by order cutoff must not sink to the last page. The detail has one primary button; secondary actions fold away. Loading must block a second submit. If the button still works while spinning, double-taps become a backend idempotency problem. Frontend duplicate-prevention is experience. Backend idempotency is correctness. Both layers are required. Frontend cannot claim it already blocked duplicates so the server need not.
The ordering list that painted cutoff as failure
The ordering API returned a clear reason and a “locked” state for a submit after cutoff. The page caught the exception and showed one “submit failed.” The list still showed pending submit. The store manager tapped again. The frontend engineer changed four places to match the API contract, one for each failure: cutoff is a business reject, shown inline with the reason and locked, not swallowed as an exception; service timeout shows a system fault and allows retry on the same document; no permission to see another store shows no permission, not an empty list; no orders today is the empty state, and it says this is not a permission issue. During submit the button stays disabled until the response; success only updates the status bar, and does not pop a modal that must be dismissed.
During design review, UI asked for the reason in a danger color. Frontend takes the color from design-system tokens, and does not hard-code a red. When the Backend engineer changes the error shape, frontend contract tests catch a missing field. The list sorts by to-do priority: to-revise, to-submit, locked. Completed is collapsed by default. The first thing the store manager sees is the document that needs a hand. People without permission cannot create another store’s draft from an empty list. If a submit is interrupted by refresh, reopen asks the server for this document’s state. It does not restore an expired success from browser memory. Ten minutes before cutoff, the list top must show how long this store has left. It must not wait until submit to say it is locked. The countdown uses server time, not the phone clock. On a weak network, skeleton then reason; not blank then failure. When the store manager views ordering in landscape, the inline reason must not be squeezed off-screen. A locked row must not allow another submit. If the button stays, people will double-tap; if the button vanishes with no reason, the store manager will think it is the network. Frontend pins the reason on that row. After paging away and back, it is still there. Contract tests only catch fields. They cannot catch a reason hidden in a detail that must be opened. Done for this role is: the list itself is enough to act.