[PR #5780] feat(ux): improve first-time experience for CORS errors #5343

New issue

Open

opened 2026-03-17 02:47:59 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:47:59 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5780
Author: @KanhaiyaPandey
Created: 1/18/2026
Status: 🔄 Open

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

📝 Commits (9)

07d1c61 feat(ux): improve first-time experience for CORS errors
9e37280 Merge branch 'main' into improve/cors-error-message
339f1bf test(cli): update e2e expectations and stabilize long-running test
a2f5fe6 test(cli): align workspace test names with expected failure behavior
89aaa58 test(cli): removed lowerMessage empty string check
cf8f528 Merge branch 'main' into improve/cors-error-message
8afeb94 Merge branch 'main' into improve/cors-error-message
526ada7 Merge branch 'main' into improve/cors-error-message
e93f8c0 Merge branch 'main' into improve/cors-error-message

📊 Changes

5 files changed (+91 additions, -13 deletions)

View changed files

📝 packages/hoppscotch-cli/src/__tests__/e2e/commands/test.spec.ts (+16 -10)
📝 packages/hoppscotch-cli/src/__tests__/utils.ts (+11 -2)
📝 packages/hoppscotch-cli/src/utils/reporters/junit.ts (+1 -1)
📝 packages/hoppscotch-common/locales/en.json (+12 -0)
📝 packages/hoppscotch-common/src/platform/std/kernel-interceptors/browser/index.ts (+51 -0)

📄 Description

What changed

Improved the error message shown when requests are blocked by browser CORS restrictions.

Instead of a generic “Network Error”, Hoppscotch now displays a clear in-app explanation that:

identifies the issue as a CORS error
explains that it is caused by browser security restrictions
clarifies that this is not a Hoppscotch bug
provides common, safe workarounds

Why

First-time users currently need to open browser DevTools to understand CORS failures, which creates a confusing onboarding experience.

How it works

The UI detects CORS-related network failures and replaces the generic error message with a dedicated CORS explanation. Request behavior remains unchanged.

Tested with

Public domain without CORS headers
Local server without CORS enabled
Valid CORS-enabled API
Generic network failure
Server-side 4xx/5xx responses

Closes #1376

Summary by cubic

Improved the error UI for CORS failures by replacing the generic “Network Error” with a clear explanation and safe fixes to help first‑time users. Request behavior is unchanged; only the messaging is improved.

New Features
- Detect likely CORS errors in the browser interceptor (ERR_NETWORK, TypeError/no response, common message patterns).
- Show a CORS-specific heading, explanation, and safe fixes; non‑CORS network/HTTP errors keep existing messages.
- Added localized strings in hoppscotch-common en.json.
Refactors
- In hoppscotch-cli, disabled default exec timeout in runCLI and used per‑test timeouts to stabilize long‑running tests (JUnit run now uses a 15‑minute timeout).
- Updated e2e expectations to assert failures for invalid/workspace IDs.
- JUnit reporter: use log for overwrite notice.

^{Written for commit e93f8c078a. 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/5780 **Author:** [@KanhaiyaPandey](https://github.com/KanhaiyaPandey) **Created:** 1/18/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `improve/cors-error-message` --- ### 📝 Commits (9) - [`07d1c61`](https://github.com/hoppscotch/hoppscotch/commit/07d1c6180ecee28998326d1ebd207ece1bb024f7) feat(ux): improve first-time experience for CORS errors - [`9e37280`](https://github.com/hoppscotch/hoppscotch/commit/9e37280a6db1ff4fb4054cec3ed28e6fe5b59f2b) Merge branch 'main' into improve/cors-error-message - [`339f1bf`](https://github.com/hoppscotch/hoppscotch/commit/339f1bf12e984849de05a69b272af1e93e761921) test(cli): update e2e expectations and stabilize long-running test - [`a2f5fe6`](https://github.com/hoppscotch/hoppscotch/commit/a2f5fe6def6f3a17b0ddbe90dfb62eea11e9b422) test(cli): align workspace test names with expected failure behavior - [`89aaa58`](https://github.com/hoppscotch/hoppscotch/commit/89aaa58f59ba389d3922249d9da71948642e489f) test(cli): removed lowerMessage empty string check - [`cf8f528`](https://github.com/hoppscotch/hoppscotch/commit/cf8f5283bb907ebd11d6ff489730741b6f6e90cf) Merge branch 'main' into improve/cors-error-message - [`8afeb94`](https://github.com/hoppscotch/hoppscotch/commit/8afeb94adf19bb2f05f56abc253fcf7fdf09191d) Merge branch 'main' into improve/cors-error-message - [`526ada7`](https://github.com/hoppscotch/hoppscotch/commit/526ada73a17cfa9441d411b02f42195acede5068) Merge branch 'main' into improve/cors-error-message - [`e93f8c0`](https://github.com/hoppscotch/hoppscotch/commit/e93f8c078a229c0f9322e6fecf5f0b9f17100dae) Merge branch 'main' into improve/cors-error-message ### 📊 Changes **5 files changed** (+91 additions, -13 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-cli/src/__tests__/e2e/commands/test.spec.ts` (+16 -10) 📝 `packages/hoppscotch-cli/src/__tests__/utils.ts` (+11 -2) 📝 `packages/hoppscotch-cli/src/utils/reporters/junit.ts` (+1 -1) 📝 `packages/hoppscotch-common/locales/en.json` (+12 -0) 📝 `packages/hoppscotch-common/src/platform/std/kernel-interceptors/browser/index.ts` (+51 -0) </details> ### 📄 Description ### What changed Improved the error message shown when requests are blocked by browser CORS restrictions. Instead of a generic “Network Error”, Hoppscotch now displays a clear in-app explanation that: - identifies the issue as a CORS error - explains that it is caused by browser security restrictions - clarifies that this is not a Hoppscotch bug - provides common, safe workarounds ### Why First-time users currently need to open browser DevTools to understand CORS failures, which creates a confusing onboarding experience. ### How it works The UI detects CORS-related network failures and replaces the generic error message with a dedicated CORS explanation. Request behavior remains unchanged. ### Tested with - Public domain without CORS headers - Local server without CORS enabled - Valid CORS-enabled API - Generic network failure - Server-side 4xx/5xx responses Closes #1376  --- ## Summary by cubic Improved the error UI for CORS failures by replacing the generic “Network Error” with a clear explanation and safe fixes to help first‑time users. Request behavior is unchanged; only the messaging is improved. - **New Features** - Detect likely CORS errors in the browser interceptor (ERR_NETWORK, TypeError/no response, common message patterns). - Show a CORS-specific heading, explanation, and safe fixes; non‑CORS network/HTTP errors keep existing messages. - Added localized strings in `hoppscotch-common` `en.json`. - **Refactors** - In `hoppscotch-cli`, disabled default exec timeout in `runCLI` and used per‑test timeouts to stabilize long‑running tests (JUnit run now uses a 15‑minute timeout). - Updated e2e expectations to assert failures for invalid/workspace IDs. - JUnit reporter: use `log` for overwrite notice. <sup>Written for commit e93f8c078a229c0f9322e6fecf5f0b9f17100dae. 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>