type error fetch failed in server component to external api endpoint
Answered
Le Conte's Sparrow posted this in #help-forum
Le Conte's SparrowOP
https://jsonplaceholder.typicode.com/todos/1 //not work
https://api.agify.io?name=michael // work
https://api.genderize.io?name=luc //work
https://catfact.ninja/fact //work
https://dog.ceo/api/breeds/image/random // not work
https://api.coindesk.com/v1/bpi/currentprice.json // work
https://api.publicapis.org/entries
async function Page() {
const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const data = await res.json();
console.log(data);
return (
<div className="p-4">
<pre className="bg-gray-100 p-4 rounded">hello</pre>
</div>
);
}
export default Page;
i found it very weired that as my above code, some api are worked , and some are not work . it did run with npm run dev --experimental-https , but no luck . it all works on client component fetch
https://api.agify.io?name=michael // work
https://api.genderize.io?name=luc //work
https://catfact.ninja/fact //work
https://dog.ceo/api/breeds/image/random // not work
https://api.coindesk.com/v1/bpi/currentprice.json // work
https://api.publicapis.org/entries
async function Page() {
const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const data = await res.json();
console.log(data);
return (
<div className="p-4">
<pre className="bg-gray-100 p-4 rounded">hello</pre>
</div>
);
}
export default Page;
i found it very weired that as my above code, some api are worked , and some are not work . it did run with npm run dev --experimental-https , but no luck . it all works on client component fetch
Answered by Le Conte's Sparrow
hi thanks for your help , i found that my isp is blocking the cloudflare proxy ,that's why it did not serve the data , it is unstable like i can access sometimes which is why it was worked in client component now it does not worked in client component too.
16 Replies
@Le Conte's Sparrow https://jsonplaceholder.typicode.com/todos/1 //not work
https://api.agify.io?name=michael // work
https://api.genderize.io?name=luc //work
https://catfact.ninja/fact //work
https://dog.ceo/api/breeds/image/random // not work
https://api.coindesk.com/v1/bpi/currentprice.json // work
https://api.publicapis.org/entries
async function Page() {
const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const data = await res.json();
console.log(data);
return (
<div className="p-4">
<pre className="bg-gray-100 p-4 rounded">hello</pre>
</div>
);
}
export default Page;
i found it very weired that as my above code, some api are worked , and some are not work . it did run with npm run dev --experimental-https , but no luck . it all works on client component fetch
Aside from the “fetch failed” message, are there any other details in the terminal logs? Like status code, error code etc
@joulev Aside from the “fetch failed” message, are there any other details in the terminal logs? Like status code, error code etc
Le Conte's SparrowOP
TypeError: fetch failed
at Page (rsc://React/Server/C:%5CUsers%5Caung%20chsn%20pyae%5CDesktop%5CBubble%5Cgive%5Cmy-app%5C.next%5Cserver%5Cchunks%5Cssr%5C%5Broot-of-the-server%5D_f27d0303..js?3:29:17)
at resolveErrorDev (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_0f1b9fd4._.js:4124:48)
at processFullStringRow (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_0f1b9fd4._.js:4349:23)
at processFullBinaryRow (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_0f1b9fd4._.js:4337:9)
at processBinaryChunk (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_0f1b9fd4._.js:4415:98)
at progress (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_0f1b9fd4._.js:4581:25)
at Page (rsc://React/Server/C:%5CUsers%5Caung%20chsn%20pyae%5CDesktop%5CBubble%5Cgive%5Cmy-app%5C.next%5Cserver%5Cchunks%5Cssr%5C%5Broot-of-the-server%5D_f27d0303..js?3:29:17)
at resolveErrorDev (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_0f1b9fd4._.js:4124:48)
at processFullStringRow (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_0f1b9fd4._.js:4349:23)
at processFullBinaryRow (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_0f1b9fd4._.js:4337:9)
at processBinaryChunk (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_0f1b9fd4._.js:4415:98)
at progress (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_0f1b9fd4._.js:4581:25)
I believe it is all
Huh that’s odd
Nothing below it or above it?
Le Conte's SparrowOP
yes
only some api , which is weired to me
in v0 dev , it can run without fetch failed , could be related to my machine or something?
Can you make a script.js file with just this
run it with
fetch('https://jsonplaceholder.typicode.com/todos/1')
run it with
node script.js
and let me know what the terminal says?Yeah smells like it’s something specific to your machine
Le Conte's SparrowOP
node:internal/deps/undici/undici:13392
Error.captureStackTrace(err);
^
TypeError: fetch failed
at node:internal/deps/undici/undici:13392:13
at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
[cause]: Error: read ECONNRESET
at TLSWrap.onStreamRead (node:internal/stream_base_commons:216:20) {
errno: -4077,
code: 'ECONNRESET',
syscall: 'read'
}
}
Node.js v22.11.0
Error.captureStackTrace(err);
^
TypeError: fetch failed
at node:internal/deps/undici/undici:13392:13
at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
[cause]: Error: read ECONNRESET
at TLSWrap.onStreamRead (node:internal/stream_base_commons:216:20) {
errno: -4077,
code: 'ECONNRESET',
syscall: 'read'
}
}
Node.js v22.11.0
i got this output
Le Conte's SparrowOP
@joulev hi any update?(sorry to mention you)
@Le Conte's Sparrow node:internal/deps/undici/undici:13392
Error.captureStackTrace(err);
^
TypeError: fetch failed
at node:internal/deps/undici/undici:13392:13
at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
[cause]: Error: read ECONNRESET
at TLSWrap.onStreamRead (node:internal/stream_base_commons:216:20) {
errno: -4077,
code: 'ECONNRESET',
syscall: 'read'
}
}
Node.js v22.11.0
thats odd
can you go to the typicode.com url in your browser? does the json show up normally there?
can you go to the typicode.com url in your browser? does the json show up normally there?
if everything is right,
node script.js
should print nothing instead of the error above@joulev thats odd
can you go to the typicode.com url in your browser? does the json show up normally there?
Le Conte's SparrowOP
hi thanks for your help , i found that my isp is blocking the cloudflare proxy ,that's why it did not serve the data , it is unstable like i can access sometimes which is why it was worked in client component now it does not worked in client component too.
Answer