fix: guard all res.json() calls against non-JSON responses

[bd73-com]

Summary

Wraps every unguarded res.json() call across client-side hooks, components, and pages with a .catch() guard so that non-JSON 200 responses (e.g., HTML error pages from a reverse proxy or CDN) produce a descriptive "Unexpected response format from server" error instead of a cryptic SyntaxError. Also moves the welcome campaign bootstrap from registerRoutes to server/index.ts with timeout protection, and adds comprehensive test coverage for the new behavior.

Fixes #325, #326, #327, #328, #329, #331.

Changes

Client-side JSON parsing guards (~35 call sites)

• client/src/lib/queryClient.ts — app-wide default queryFn (highest leverage fix)
• client/src/components/UpgradeDialog.tsx — Stripe checkout mutation
• client/src/components/DashboardNav.tsx — admin error count query (uses silent { count: 0 } fallback to preserve best-effort semantics)
• client/src/pages/Support.tsx — contact form mutation
• client/src/pages/AdminErrors.tsx — 7 admin query/mutation calls
• client/src/pages/ExtensionAuth.tsx — extension token fetch + console.error in outer catch
• All custom hooks (use-monitors, use-tags, use-auth, use-conditions, use-notification-channels, use-notification-preferences, use-slack, use-api-keys, use-campaigns)

Auth hook improvement

• useAuth now exposes isError and error fields for better error state handling

Server-side refactor

• Moved welcome campaign bootstrap from server/routes.ts to server/index.ts with 5s timeout
• registerRoutes() now returns { httpServer, campaignConfigsReady } for proper sequencing

Test infrastructure

• Switched test environment from happy-dom to jsdom for msw compatibility
• Added queryClient.test.ts covering happy path, 401 handling, and non-JSON response guard
• Added non-JSON response tests across all hook test files
• 2081 tests passing, 84 test files

How to test

1. npm run check — TypeScript passes cleanly
2. npm run test — all 2081 tests pass (84 files)
3. npm run build — production build succeeds
4. Verify DashboardNav admin badge still shows count for power-tier users
5. Verify Stripe checkout flow in UpgradeDialog still works
6. Verify contact form on Support page submits successfully

https://claude.ai/code/session_01UnMFtYo2iEcKRmEUywaAw9

Summary by CodeRabbit

• Bug Fixes

  • Enhanced API response resilience by implementing error handling for malformed server responses. The application now gracefully handles invalid data formats and displays consistent error messages instead of failing silently or crashing.

• Tests

  • Added comprehensive test coverage for query client response handling to ensure robust error management.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 342a8069-1f58-442d-ac2e-7069ff0987d5

📥 Commits

Reviewing files that changed from the base of the PR and between 90c45f0 and e09f0f2.

📒 Files selected for processing (7)

• client/src/components/DashboardNav.tsx
• client/src/components/UpgradeDialog.tsx
• client/src/lib/queryClient.test.ts
• client/src/lib/queryClient.ts
• client/src/pages/AdminErrors.tsx
• client/src/pages/ExtensionAuth.tsx
• client/src/pages/Support.tsx

---

📝 Walkthrough

Walkthrough

Multiple client-side fetch handlers across components and pages updated to defensively wrap res.json() calls with .catch() handlers that throw consistent "Unexpected response format from server" errors when JSON parsing fails. A comprehensive test suite added for the default query function covering HTTP status codes and response parsing scenarios.

Changes

Cohort / File(s)	Summary
Default Query Function & Tests client/src/lib/queryClient.ts, client/src/lib/queryClient.test.ts	Core getQueryFn wrapped with .catch() guard on res.json(). New 70-line test suite validates 200 responses with valid JSON, 401 handling with on401 option, and JSON parse failures throwing descriptive error.
Component Mutations & Queries client/src/components/DashboardNav.tsx, client/src/components/UpgradeDialog.tsx, client/src/pages/ExtensionAuth.tsx, client/src/pages/Support.tsx	Each file's fetch/mutation handlers updated to wrap res.json() in .catch(). DashboardNav returns fallback { count: 0 } on parse error; others throw descriptive error. ExtensionAuth adds dedicated error logging for token fetch failures.
Admin Page API Handlers client/src/pages/AdminErrors.tsx	Seven admin API calls (browserless usage, resend usage, users overview, error logs fetch, finalize, restore, batch delete) updated with .catch() guards on res.json(). Batch-delete mutation's typed return expression also hardened.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

• Bug: Default getQueryFn has unguarded res.json() on success path #325: Directly addresses the core issue—unguarded res.json() in default getQueryFn now wrapped with .catch() guard that throws descriptive error.
• Bug: DashboardNav error count query has unguarded res.json() #328: DashboardNav.tsx change adds .catch() guard around res.json() call, fixing the reported unguarded JSON parsing bug.
• Bug: AdminErrors page has multiple unguarded res.json() calls #329: AdminErrors.tsx changes add .catch() guards across multiple admin API calls, directly implementing the fix requested for batch-delete and other endpoints.
• Bug: UpgradeDialog checkout mutation has unguarded res.json() #326: UpgradeDialog.tsx checkout mutation wraps res.json() with .catch() throwing "Unexpected response format from server", fixing the exact unguarded parsing issue.
• Bug: Success-path res.json() calls lack .catch() in remaining hook files #320: Both PRs apply the same hardening pattern—wrapping res.json() with .catch() for consistent error handling on JSON parse failures.

Possibly related PRs

• fix: harden client JSON parsing and non-blocking campaign bootstrap #330: Applies identical code-level change pattern—wrapping res.json() with .catch() to throw "Unexpected response format from server" for JSON parse failures.
• fix: handle non-JSON errors, expose auth error state, sequence startup #318: Adds defensive handling for non-JSON/failing res.json() parsing in client fetch response paths using the same guard pattern.
• fix: harden res.json() calls against non-JSON responses #322: Applies matching defensive JSON-parsing guard pattern across client-side res.json() calls.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Out of Scope Changes check	❓ Inconclusive	All changes are directly related to guarding res.json() calls. The PR mentions moving campaign bootstrap and test environment changes, but the provided diffs focus solely on JSON parsing guards.	Verify that campaign bootstrap relocation and test environment switch are documented separately or confirm they are part of the stated scope.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely summarizes the main change: guarding res.json() calls against non-JSON responses across the codebase.
Linked Issues check	✅ Passed	The PR comprehensively addresses issue #325 by wrapping res.json() with error-handling guards in queryClient.ts and across all affected client-side call sites.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/fix-bugs-TQWUh

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}