fix: handle jersey checkout network errors gracefully on Safari/iOS #220

New issue

Closed

opened 2026-04-05 01:48:04 +00:00 by forgejo_admin · 0 comments

forgejo_admin commented

2026-04-05 01:48:04 +00:00

Owner

Type

Feature

Lineage

Related to forgejo_admin/basketball-api #340 (parent issue).

Repo

forgejo_admin/westside-landing

User Story

As a parent ordering a jersey on Safari/iOS
I want a clear error message when the checkout request fails
So that I know to retry instead of seeing a cryptic "load failed" message

Context

A parent (Daniel Niyitanga) clicked "Order" on the jersey page and saw raw "load failed" error. Investigation confirmed the basketball-api backend is fully functional (CORS, Stripe key, endpoint all work). Safari/iOS throws TypeError: Load failed on transient network failures during fetch(). The frontend displays err.message directly which is unhelpful. Additionally, the token is not URL-encoded when building the checkout URL, and there is no fetch timeout to prevent indefinite hangs.

File Targets

Files the agent should modify or create:

src/routes/(app)/jersey/+page.svelte -- improve error handling in handleSelect, URL-encode token, add fetch timeout

Files the agent should NOT touch:

src/lib/api.js -- not used by the jersey checkout flow
src/lib/keycloak.js -- auth layer is working correctly

Acceptance Criteria

When a network error occurs during checkout, then a user-friendly message is shown with retry guidance
When the token contains special characters, then it is properly URL-encoded in the checkout URL
When the fetch takes too long, then it times out after 30 seconds with a clear message

Test Expectations

Manual test: verify error message is user-friendly on network failure
Manual test: verify checkout flow still works end-to-end with valid token

Constraints

Match existing code style in the jersey page
No new dependencies
Keep the fix minimal and focused

Checklist

PR opened
No unrelated changes

westside -- project this affects
Closes forgejo_admin/basketball-api#340

### Type Feature ### Lineage Related to `forgejo_admin/basketball-api #340` (parent issue). ### Repo `forgejo_admin/westside-landing` ### User Story As a parent ordering a jersey on Safari/iOS I want a clear error message when the checkout request fails So that I know to retry instead of seeing a cryptic "load failed" message ### Context A parent (Daniel Niyitanga) clicked "Order" on the jersey page and saw raw "load failed" error. Investigation confirmed the basketball-api backend is fully functional (CORS, Stripe key, endpoint all work). Safari/iOS throws `TypeError: Load failed` on transient network failures during `fetch()`. The frontend displays `err.message` directly which is unhelpful. Additionally, the token is not URL-encoded when building the checkout URL, and there is no fetch timeout to prevent indefinite hangs. ### File Targets Files the agent should modify or create: - `src/routes/(app)/jersey/+page.svelte` -- improve error handling in handleSelect, URL-encode token, add fetch timeout Files the agent should NOT touch: - `src/lib/api.js` -- not used by the jersey checkout flow - `src/lib/keycloak.js` -- auth layer is working correctly ### Acceptance Criteria - [ ] When a network error occurs during checkout, then a user-friendly message is shown with retry guidance - [ ] When the token contains special characters, then it is properly URL-encoded in the checkout URL - [ ] When the fetch takes too long, then it times out after 30 seconds with a clear message ### Test Expectations - [ ] Manual test: verify error message is user-friendly on network failure - [ ] Manual test: verify checkout flow still works end-to-end with valid token ### Constraints - Match existing code style in the jersey page - No new dependencies - Keep the fix minimal and focused ### Checklist - [ ] PR opened - [ ] No unrelated changes ### Related - `westside` -- project this affects - Closes forgejo_admin/basketball-api#340