fix: add proper error handling to feedback and newsletter fetch calls

[Dsp023]

This PR adds proper error handling to fetch calls in both Feedback and NewsletterSubscribe components.

• Wrapped fetch calls with try/catch
• Added response.ok validation
• Prevented silent failures and unhandled promise rejections

Closes #4686

Summary by CodeRabbit

Release Notes

• Refactor
  • Enhanced error handling for feedback form submissions with improved reliability.
  • Strengthened error management for newsletter subscription process to handle network failures more gracefully.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify[bot]]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	c89f5756ea9a20eaceb3b63877695dc09e64cf1e
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/6939a1816ed5090008787626
😎 Deploy Preview	https://deploy-preview-4700--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai[bot]]

Walkthrough

Both Feedback.tsx and NewsletterSubscribe.tsx components were refactored to use async/await with try/catch blocks for fetch requests, replacing previous inline promise chains. UI state is reset before requests, and network errors are now properly caught and handled with appropriate status updates.

Changes

Cohort / File(s)	Summary
Fetch error handling improvements components/Feedback.tsx, components/NewsletterSubscribe.tsx	Replaced promise-based fetch chains with async/await and try/catch blocks. Added preliminary UI state resets before requests, explicit response.ok validation, and proper error logging. On success, awaits response.json() and sets success state; on failure, logs error and sets error state.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Both changes follow a consistent, repetitive pattern (same refactor applied to two similar files)
• Error handling logic is straightforward and well-structured
• No complex state management or control flow changes

Suggested labels

ready-to-merge

Suggested reviewers

• derberg
• sambhavgupta0705
• anshgoyalevil
• asyncapi-bot-eve
• Mayaleeeee

Poem

🐰 With catch blocks now in place so tight,
Network errors handled right,
Async/await flows clean and fair,
No more promises left hanging in air! 🌐

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly and concisely describes the main change: adding proper error handling to fetch calls in feedback and newsletter components.
Linked Issues check	✅ Passed	The changes fully address issue #4686 by adding try/catch blocks and response.ok validation to both Feedback.tsx and NewsletterSubscribe.tsx fetch calls.
Out of Scope Changes check	✅ Passed	All changes are directly related to error handling in fetch calls for the two specified components, with no out-of-scope modifications detected.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1e630864bfbf10ded139d1d377b596b04c9243dc and c89f5756ea9a20eaceb3b63877695dc09e64cf1e.

📒 Files selected for processing (2)

• components/Feedback.tsx (1 hunks)
• components/NewsletterSubscribe.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: sagarkori143
Repo: asyncapi/website PR: 4192
File: npm/runners/build-pages-runner.ts:7-14
Timestamp: 2025-06-19T13:51:27.459Z
Learning: In the AsyncAPI website build system, individual runner functions use try-catch blocks that rethrow errors to maintain consistent error boundaries, while the top-level orchestrator in npm/index.ts provides meaningful error logging with task-specific context using logger.error(`Error building ${taskName}:`, error). This separation of concerns allows for clean error handling at different architectural layers.

🪛 GitHub Actions: PR testing - if Node project

components/Feedback.tsx

[error] 33-60: Prettier formatting issues and ESLint: no-console. Multiple lines reported by prettier/prettier and no-console rules.

components/NewsletterSubscribe.tsx

[error] 67-98: Prettier formatting issues detected by prettier/prettier in this file.

⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Lighthouse CI

🔇 Additional comments (2)

components/Feedback.tsx (1)

32-61: Error handling implementation looks good; address pipeline failures.

The async/await with try/catch implementation correctly addresses the PR objectives:

• Prevents unhandled promise rejections
• Validates response.ok before processing
• Updates component state appropriately for success and error cases

However, the pipeline is failing due to:

1. Prettier formatting issues - Run npm run format or prettier --write to fix formatting
2. ESLint no-console violation - The console.error on line 58 violates the no-console rule

Based on learnings, consider whether console.error should be replaced with a proper logging mechanism, or if the no-console rule should allow console.error for error logging. Please fix the prettier formatting and resolve the no-console lint issue before merging.

components/NewsletterSubscribe.tsx (1)

67-98: Error handling implementation is correct; fix formatting issues.

The async/await with try/catch implementation properly handles errors:

• Sets LOADING state before the request
• Validates res.ok and throws on non-OK responses
• Updates UI state using the existing setFormStatus helper
• Prevents unhandled promise rejections as intended

However, the pipeline is failing due to prettier formatting issues. Notable formatting problems:

• Line 88: Extra indentation before the closing brace
• Line 95: Inconsistent indentation on the closing brace
• Line 98: Unnecessary blank line

Run npm run format or prettier --write components/NewsletterSubscribe.tsx to auto-fix these issues. Also check if the console.error on line 93 triggers a no-console lint violation (similar to the Feedback component).

---

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.}

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	44
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-4700--asyncapi-website.netlify.app/