"Failed to fetch" thrown from app-bridge when request is blocked by devtools (localhost)

[Johnpaulk94]

Describe the bug

When a request to a local API endpoint based on fetch, is blocked (via DevTools Network → Block request URL) App Bridge surfaces a TypeError: Failed to fetch stack-trace instead of a clearer "Network error" or a handled error. This makes it hard to distinguish between fetch failures caused by CORS, network outage, or manual blocking in DevTools.

observed behaviour

Failed to Fetch 🔴 TypeError: Failed to fetch (localhost:4000)
    at app-bridge.js:1:12164
    at async fetchReqWrapper (fetchReqWrapper.js:273:22)
    at async triggerSyncMetaObjectAPI (syncMetaObjectAPI.js:19:30)
    at async handleMetaObjectSync (route.jsx:118:5)

To Reproduce

1. Open a Shopify app that uses App Bridge to proxy/facilitate fetch requests.
2. In Chrome DevTools → Network, add a blocked request pattern for the local endpoint
3. Trigger the app behaviour that performs the fetch (in my case a sync routine).
4. Observe the console error and (if present) App Bridge stacktrace.

Expected behaviour

• App Bridge should surface a clearly identifiable network error event or return a Response-like object with an error status so the app can handle it gracefully.
• Or, an explicit NetworkError/FetchError with a message that indicates the request was blocked/failed (not only TypeError: Failed to fetch) so developers can differentiate causes.

Contextual information

• Endpoint blocked: http://localhost:4000/app/cornercart/config/sync.

• Error occurs immediately when the request is blocked in DevTools; request never reaches the server.

• The error is thrown inside app-bridge.js (stack shown above). The app code that calls the wrapper receives the thrown TypeError.

• Packages and versions

relevant package versions

• "@shopify/app": "3.56.2",
• "@shopify/app-bridge-react": "^4.2.4",

Platform

• OS: MacOS
• OS Version: 15.5
• App: Chrome
• Chrome version: 143.0.7499.41 (Official Build) (arm64)

Impact

Hard to debug local dev scenarios and to programmatically detect network-blocked requests vs other failures. This affects developer experience and error handling in apps using App Bridge wrappers.

Additional context

Created the app based on shopify remix template