[PR #5951] feat: improve network error message with CORS explanation #5431

New issue

Open

opened 2026-03-17 02:52:45 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:52:45 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5951
Author: @aadam-dev
Created: 3/5/2026
Status: 🔄 Open

Base: main ← Head: feat/improve-cors-error-message

📝 Commits (1)

70838c9 feat: improve network error message with CORS explanation

📊 Changes

2 files changed (+12 additions, -0 deletions)

View changed files

📝 packages/hoppscotch-common/locales/en.json (+2 -0)
📝 packages/hoppscotch-common/src/components/settings/InterceptorErrorPlaceholder.vue (+10 -0)

📄 Description

Summary

Improves the user experience when encountering network failures by adding a clear explanation that CORS is likely the cause.

Problem

When users make requests to APIs from different origins, browsers block these requests due to CORS policies. The current error message ("Network fail") doesn't explain why this happens or how to fix it, leading to confusion especially for new users.

Solution

Added a highlighted info box in the error placeholder explaining CORS as a likely cause
Added new internationalization keys for the CORS explanation
Suggests using the browser extension or proxy as solutions

Screenshots

The error now shows:

This is likely a CORS (Cross-Origin Resource Sharing) error
Browsers block requests to different domains for security. Use the browser extension or proxy to bypass this restriction.

Test plan

Verify the new message appears on network failures
Verify styling matches the existing UI (amber warning colors)
Verify i18n keys are properly added

This addresses a common pain point for new Hoppscotch users who don't understand why their API requests fail in the browser.

Summary by cubic

Adds a highlighted CORS explanation to the network error placeholder so users understand why requests fail and how to fix them. Includes new i18n strings and warning styling that suggests using the browser extension or proxy.

New Features
- Show amber info box in InterceptorErrorPlaceholder explaining CORS as the likely cause.
- Add i18n keys: error.cors_likely_cause and error.cors_explanation.

^{Written for commit 70838c9597. Summary will update on new commits.}

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/5951 **Author:** [@aadam-dev](https://github.com/aadam-dev) **Created:** 3/5/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `feat/improve-cors-error-message` --- ### 📝 Commits (1) - [`70838c9`](https://github.com/hoppscotch/hoppscotch/commit/70838c95978f23185fee4af59196a94c5d324d50) feat: improve network error message with CORS explanation ### 📊 Changes **2 files changed** (+12 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/locales/en.json` (+2 -0) 📝 `packages/hoppscotch-common/src/components/settings/InterceptorErrorPlaceholder.vue` (+10 -0) </details> ### 📄 Description ## Summary Improves the user experience when encountering network failures by adding a clear explanation that CORS is likely the cause. ## Problem When users make requests to APIs from different origins, browsers block these requests due to CORS policies. The current error message ("Network fail") doesn't explain why this happens or how to fix it, leading to confusion especially for new users. ## Solution - Added a highlighted info box in the error placeholder explaining CORS as a likely cause - Added new internationalization keys for the CORS explanation - Suggests using the browser extension or proxy as solutions ## Screenshots The error now shows: > **This is likely a CORS (Cross-Origin Resource Sharing) error** > Browsers block requests to different domains for security. Use the browser extension or proxy to bypass this restriction. ## Test plan - [x] Verify the new message appears on network failures - [x] Verify styling matches the existing UI (amber warning colors) - [x] Verify i18n keys are properly added ## Related This addresses a common pain point for new Hoppscotch users who don't understand why their API requests fail in the browser.  --- ## Summary by cubic Adds a highlighted CORS explanation to the network error placeholder so users understand why requests fail and how to fix them. Includes new i18n strings and warning styling that suggests using the browser extension or proxy. - **New Features** - Show amber info box in InterceptorErrorPlaceholder explaining CORS as the likely cause. - Add i18n keys: error.cors_likely_cause and error.cors_explanation. <sup>Written for commit 70838c95978f23185fee4af59196a94c5d324d50. Summary will update on new commits.</sup>  --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>