--- title: "Atasi error Failed to fetch dan bedakan 3 penyebabnya" description: "TypeError: Failed to fetch berarti permintaan tidak mendapat respons HTTP. Header CORS yang hilang, server yang mati, dan host yang tidak ada semuanya memberi pesan yang sama." canonical: "https://logbrew.co/id/errors/failed-to-fetch" last_updated: "2026-11-10" --- # Atasi error Failed to fetch dan bedakan 3 penyebabnya `TypeError: Failed to fetch` berarti permintaan tidak mendapat respons HTTP. Header CORS yang hilang, server yang mati, dan host yang tidak ada semuanya memberi pesan yang sama. Diuji pada 10 November 2026 dengan Chromium 152, @logbrew/browser 0.1.21, dan @logbrew/sdk 0.1.44 Oleh [Furkan Erday](https://github.com/furkanerday). Furkan Erday adalah pendiri LogBrew. Setiap hari ia membangun LogBrew dengan Claude Code dan Codex. Canonical: https://logbrew.co/id/errors/failed-to-fetch ## Apa yang menyebutkan penyebab `fetch()` yang gagal | Apa yang salah | `error.message` | Konsol | | --- | --- | --- | | Tanpa header `Access-Control-Allow-Origin` | `Failed to fetch` | Kebijakan CORS | | Tidak ada yang mendengarkan di port itu | `Failed to fetch` | `ERR_CONNECTION_REFUSED` | | Host tidak punya data DNS | `Failed to fetch` | `ERR_NAME_NOT_RESOLVED` | | Server menjawab 500 | Tidak menolak | `500` | 4 permintaan ke API di origin lain. Cangkir penuh berarti teksnya menyebutkan penyebabnya. ## Cari penyebab yang kamu alami ### Buka konsol browser `fetch()` menolak dengan `TypeError: Failed to fetch` yang sama untuk setiap kegagalan jaringan. Baris konsol di sebelahnya menyebutkan penyebab sebenarnya. ### API menjawab tanpa header CORS Konsol menyebut `blocked by CORS policy`. Server memang menjawab, tapi origin halaman tidak diizinkan membaca responsnya, jadi browser membuang jawaban itu. Output ```text Access to fetch at 'http://127.0.0.1:4874/api/closed' from origin 'http://127.0.0.1:4873' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ``` ### Tidak ada yang mendengarkan di host dan port itu Konsol menyebut `net::ERR_CONNECTION_REFUSED`. API tidak berjalan, atau port di URL salah. Jalankan API, lalu periksa port-nya. Output ```text Failed to load resource: net::ERR_CONNECTION_REFUSED ``` ### Nama host tidak ditemukan Konsol menyebut `net::ERR_NAME_NOT_RESOLVED`. DNS tidak punya data untuk host itu. Periksa salah ketik di nama host, dan variabel lingkungan yang menyimpan URL API di deployment ini. Output ```text Failed to load resource: net::ERR_NAME_NOT_RESOLVED ``` ## Perbaiki di kode kamu ### Kirim header CORS dari API Jawab dengan `Access-Control-Allow-Origin` yang diisi origin halaman kamu, atau `*` untuk API publik. Dalam pengujian kami, endpoint yang sama berubah dari `Failed to fetch` menjadi `HTTP 200` hanya dengan menambahkan header itu. ```bash Access-Control-Allow-Origin: https://app.example.com ``` ### Periksa status, karena 500 tidak ditolak `fetch()` berhasil pada jawaban HTTP apa pun, termasuk 404 dan 500. Dalam pengujian kami, 500 dengan body `{"error":"tap jammed"}` masuk ke cabang `then`, bukan `catch`. Uji `response.ok` sebelum membaca body. ```bash const response = await fetch(url); if (!response.ok) throw new Error(`HTTP ${response.status} for ${url}`); ``` ### Catat URL bersama error-nya `fetch()` yang ditolak tidak punya respons, dan stack-nya menunjuk ke kode kamu sendiri, bukan ke penyebabnya. Tangkap di tempat kamu memanggil `fetch()` dan simpan metode serta URL bersama error itu, supaya pelacakan error kamu menunjukkan permintaan mana yang gagal. ```bash try { return await fetch(url); } catch (error) { console.error("fetch failed", url, error); throw error; } ``` ## Hasil pengujian kami Halaman berjalan di `http://127.0.0.1:4873` pada Chromium 152 dengan `@logbrew/browser` 0.1.21 dan instrumentasi fetch-nya terpasang. API di `http://127.0.0.1:4874` menjawab 3 path, dan kami mengirim 5 permintaan tanpa `catch`, jadi setiap penolakan sampai ke SDK sebagai unhandled rejection. `/api/closed` menjawab 200 tanpa header CORS, dan permintaan ditolak dengan `TypeError: Failed to fetch`. Permintaan ke port 4875, tempat tidak ada yang mendengarkan, dan permintaan ke `http://keg.invalid/api` ditolak dengan error yang sama. Di 3 kasus itu, `error.message` berisi `Failed to fetch`, `error.name` berisi `TypeError`, dan stack menunjuk ke pemanggilan `fetch()` kami sendiri. Konsol membedakan ketiganya. Yang pertama menyebut `blocked by CORS policy`, yang kedua `net::ERR_CONNECTION_REFUSED`, yang ketiga `net::ERR_NAME_NOT_RESOLVED`. `/api/broken`, yang menjawab 500 dengan header, sama sekali tidak ditolak, dan `/api/open`, yang menjawab 200 dengan header, memberi `HTTP 200 {"ok":true}`. ## Kenapa setiap penyebab punya pesan yang sama Standar Fetch mengubah setiap kegagalan sebelum respons menjadi 1 hal, yaitu network error, berupa respons bertipe `error` dengan status 0. Kegagalan CORS juga termasuk. Dalam mode `cors`, resource yang tidak memahami protokol CORS menghasilkan network error. Metode `fetch()` menolak promise-nya dengan `TypeError` untuk network error, dan tidak untuk yang lain. MDN menjelaskannya dengan cara yang sama. Promise hanya ditolak saat permintaan gagal, misalnya karena URL yang salah bentuk atau network error, dan bukan karena status HTTP seperti 404 atau 504. Halaman MDN tentang error CORS mengatakan bahwa detail permintaan CORS yang gagal tidak tersedia untuk JavaScript demi keamanan, dan konsol adalah satu-satunya tempat untuk menemukannya. whatwg/fetch#526 meminta tipe error yang lebih informatif sejak 2017 dan masih terbuka. ## Apa yang direkam LogBrew Setiap penolakan tiba sebagai 1 masalah bernama `Unhandled promise rejection: TypeError`, dengan frame stack ke dalam bundle kami dan kunci pengelompokan `browser.unhandledrejection:TypeError:/app.js`. Itu memberi tahu di mana kamu memanggil `fetch()`, bukan apa yang gagal. Instrumentasi fetch menambahkan span di trace yang sama, `browser.fetch GET /api/closed`, dengan status `error`, metode, path permintaan, dan `errorType` `TypeError`. Span itu menyebutkan permintaan yang gagal meski error-nya tidak. Jawaban 500 tidak menghasilkan masalah, hanya span dengan status `error` dan `statusCode` 500. Jawaban 200 menghasilkan span dengan status `ok`. Jadi di LogBrew, 500 dan kegagalan jaringan adalah 2 span yang berbeda, sementara di kode kamu hanya yang kedua yang sampai ke `catch`. ## Pertanyaan yang sering diajukan ### Apa arti TypeError Failed to fetch? Browser tidak bisa mendapat respons HTTP untuk pemanggilan `fetch()`. Server tidak bisa dijangkau, host tidak ditemukan, atau CORS memblokir responsnya. Pesannya sama di 3 kasus itu. ### Apakah Failed to fetch selalu error CORS? Tidak. Dalam pengujian kami, header CORS yang hilang, port tanpa server, dan host tanpa data DNS semuanya memberi pesan ini. Hanya baris konsol di sebelahnya yang menyebutkan penyebabnya. ### Kenapa fetch tidak menolak pada 404 atau 500? Standar Fetch hanya menolak untuk network error. Jawaban HTTP dengan status apa pun adalah respons, jadi `fetch()` berhasil dan kamu menguji `response.ok` sendiri. ### Bagaimana cara menangkap Failed to fetch di JavaScript? Bungkus pemanggilannya dalam `try` dan `catch`, atau tambahkan `.catch()` ke promise-nya. Error-nya berupa `TypeError` tanpa respons, jadi catat URL dan metodenya sendiri. ### Apakah Failed to fetch berarti server mati? Kadang. Server yang mati memberi `net::ERR_CONNECTION_REFUSED` di konsol. `Failed to fetch` yang sama juga datang dari header CORS yang hilang atau nama host tanpa data DNS. ## Lihat permintaan mana yang gagal, dan kenapa SDK browser LogBrew merekam setiap `fetch()` sebagai span dengan metode, path, dan statusnya, di trace yang sama dengan error yang dipicunya. Mulai dengan paket gratis yang lega, tanpa perlu kartu. [Mulai gratis](https://logbrew.co/id) ## Sumber - [MDN, Window: fetch() method](https://developer.mozilla.org/en-US/docs/Web/API/Window/fetch) - [MDN, CORS errors](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS/Errors) - [Fetch Standard, The fetch() method](https://fetch.spec.whatwg.org/#fetch-method) - [whatwg/fetch#526](https://github.com/whatwg/fetch/issues/526) ## Solusi error JavaScript lainnya - [Atasi script error yang menyembunyikan pesan, file, dan barisnya](https://logbrew.co/id/errors/script-error) - [Error JavaScript yang kami reproduksi, dan cara mengatasinya](https://logbrew.co/id/errors)