Im trying to deploy my app with Netlify and Heroku.
Deployment works just fine - this is the URL:
https://fahrzeugliste-t5-kfz-neumayer.netlify.app/
Start page is working as intended, while clicking on "Fahrzeugliste" gets an 500 Internal Server Error.
This is the git repo for it:
https://github.com/TimoScheiler/fahrzeugliste
Your function log here: https://app.netlify.com/sites/fahrzeugliste-t5-kfz-neumayer/functions/___netlify-handler, shows the problem. It says:
FetchError: invalid json response body at https://fahrzeugliste-t5.herokuapp.com/api/fahrzeug reason: Unexpected token < in JSON at position 0
at /var/task/node_modules/node-fetch/lib/index.js:273:32
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async getServerSideProps (/var/task/.next/server/pages/fahrzeuge.js:234:34)
at async Object.renderToHTML (/var/task/node_modules/next/dist/server/render.js:428:24)
at async doRender (/var/task/node_modules/next/dist/server/next-server.js:1149:38)
at async /var/task/node_modules/next/dist/server/next-server.js:1241:28
at async /var/task/node_modules/next/dist/server/response-cache.js:64:36 {
type: 'invalid-json'
}
If you go here: https://fahrzeugliste-t5.herokuapp.com/api/fahrzeug, you can indeed see that you don't get an expected response from your Heroku backend. You get a HTML page instead of a JSON response. You need to sort that out.
Related
UPD: you can check this yourself: https://github.com/Rusinas/nuxt-fetch-bug
I know I know this sounds stupid as hell and server language has nothing to do with such problems, but hear me out.
I am trying to load data from my local server using $fetch() (or useFetch, no difference), but I get this error:
FetchError: fetch failed ()
No any other details provided. Server is running using Golang/Fiber. When I am trying to load the same endpoint via Postman, everything is OK:
But when I try to load the SAME endpoint in my nuxt 3 application:
I get this:
But my golang server logging this as success:
The more weird thing about all this is that if I run my nodejs version of the exact same server (or any other random API), I don't get any error.
I am pretty sure that my server working 100% correct, but maybe I lost some header or something, which express put automatically? Here is my response headers:
I also checked nodejs response headers:
Doesn't seem like problem is there.
I have no idea what is happening and I don't know other methods to retrieve async data on server side in nuxt js. I have installed axios, but it throws random errors and works on client side for some reason, which makes using nuxt meaningless. However, axios can call this endpoint and returns my data, but only in browser (despite I call it in setup function without any hooks). I am thinking to switch career now
The problem was that fetch() didn't reconize localhost:9000 for some
reason, but when I changed BASE_URL to 127.0.0.1:9000 it started to
work
I had the same error: FetchError: fetch failed ()
Changing localhost in the url to 127.0.0.1 worked for me.
Writing as a separate answer because some might not find it in the comments.
First I think you are using $fetch in a wrong way, as I've seen Nuxt uses fetch for example:
const data = await fetch(endpoint, {
method: "GET",
mode: "cors"
})
.then(resp => resp.json())
And for the server, just enable CORS header on the response, like this:
// you can replace the asterisk with the clients you want.
c.Append("Access-Control-Allow-Origin", "*")
hope I helped :)
I'm currently maintaining a production Nuxt.js Vue app that integrates GraphQL Apollo Client that's running into page render errors. For the sake of boosting my chances of getting a response, I built a bare-bones code example that showcases only the problem we are running into. Thanks everybody.
Source Code
Client, https://github.com/sgarcia-dev/error-apollo-client-nuxt
Server, https://github.com/sgarcia-dev/error-apollo-server
The Problem
The problem, is that every now and then, the GraphQL server we rely on (we have no control over it) goes down and returns a HTML error page, which crashes Apollo Client due to its attempt to parse the GraphQL spec JSON response. This yields the infamous Unexpected token < in JSON at position 0 error that's been reported over and over again.
The thing is, because we are using the #nuxt/apollo Nuxt module that integrates Apollo into the render pipeline, this makes Nuxt's page render crash. Giving us a generic server render error page that looks like this;
ERROR Network error: Unexpected token < in JSON at position 0 08:11:04
at new ApolloError (node_modules/apollo-client/bundle.umd.js:92:26)
at node_modules/apollo-client/bundle.umd.js:1588:34
at node_modules/apollo-client/bundle.umd.js:2008:15
at Set.forEach (<anonymous>)
at node_modules/apollo-client/bundle.umd.js:2006:26
at Map.forEach (<anonymous>)
at QueryManager.broadcastQueries (node_modules/apollo-client/bundle.umd.js:2004:20)
at node_modules/apollo-client/bundle.umd.js:1483:29
at processTicksAndRejections (node:internal/process/task_queues:94:5)
How to reproduce the error
Clone the repositories from above, and start both of them following the readme.md commands. (for the server error, make sure to run npm run start-express since that's the one that crashes the client).
You'll notice the pages/index.js throws a server error page since the server returns an invalid HTML response.
What we tried
We tried following every error handling spec in the Vue Apollo and Nuxt apollo docs, but nothing seems to work. We tried:
Adding the Nuxt "#apollo/nuxt" module supported error handler syntax. It gets logged correctly, but the error doesn't stop propagating and crashes the page render. Even if we return false at the end. Which we thought that would, since that's what the source code for vue-apollo seems to do
Setting an apollo client errorPolicy of ignore and all, but the error still got through and crashed the page render
Adding individual query error() handlers and not relying on the global one. They stopped propagation to the global page, but it didn't stop the page render error from happening.
Using apollo-link-error's approach to ignoring errors by adding a link property to our nuxt apollo config and following those steps. The link configuration ran, and errors were indeed logged. But response in that example evaluates to undefined, stopping us from being able to do response.error. I assume its a Nuxt compatibility issue thing being SSR and all, and that this might be designed for React applications.
Summary
Even simple pages using nuxt/apollo module crash page render on an invalid GraphQL response, and we have no idea how to stop it from happening other than migrating our app from using nuxt/apollo and instead using apollo client directly which will be quite expensive.... any ideas?
Wouldn't it be possible to run your apollo queries through a computed property (which is displayed in the template). That way, you could check in the computed property for JSON errors and catch them there before making them available to the template render process.
I'm trying to fetch data from an API hosted on Heroku in a React Native app on an IOS simulator, and I keep getting this error Error: Request failed with status code 499 which occurs after a long period of time (close to a minute) from the time the API call is initiated.
The same API calls work well in Android emulator.
Please what could be causing this how can I fix it?
If anybody is still experiencing these issues, make sure that you're not sending a body in your get requests. I had the issue where I sent a GET request with
{
method: 'GET',
url: '<url>',
body: {}
}
because the body was accidentally appended to the request.
As per my requirement, I am using WL.APP.setServerURL before every login request WLAuthorizationManager.loginof mobilefirst.
When I do first an valid/Invalid login attempt it works fine. As on next attempt I do WL.App.setServerURL, and then WLAuthorizationManager.login (login request) OR WLAuthorizationManager.obtainAccessToken (obtain access token request) don't respond anything. No success and no fail. Although non-secure adapter method works fine.
If I do WL.APP.setServerURL only once on application startup, everything works fine but in between call cause application failure.
let url = ... //fetcht url from adapter call
WL.App.setServerUrl(url, function (sucess) {
WLAuthorizationManager.login(securityCheckName, loginParam).then((data) => {
.... //After login code
}, (response) => {
//Login fail code
});
}, function (error) {
});
Flow :-
I call above code on click of login button.I call a method to get server url from adapter first then I set that url as server url.
When I do an invalid attempt of login it works find for first time, and on next call MFP login, it doesn't respond. Not success nor fail in application.
I am getting error in native logs android.
Android Error logs :-
E/SecurityCheckChallengeHandler(30199): SecurityCheckChallengeHandler.submitChallengeAnswer in SecurityCheckChallengeHandler.java:51 :: submitAnswer has been called for unknown request
.
MobileFirst server version :- 8.0.0.00-20170911-123510
MobileFirst Cordova(plugin) version :- 8.0.2017102403
The WL.App.setServerUrl API is meant to be used sparingly whenever the app needs to connect to a server other than the one defined in mfpclient.properties. If you want to keep the server URL constant, you should just put it up in the mfpclient.properties.
Having said that, the behaviour you mention is not expected - can you update your question with a code snippet of your app performing login & setServerUrl
I am facing a problem on Sails.js (0.9.16) with POST requests sent from a JAVA client.
On the client side I built a POST request (with enctype : multipart/form-data) sending a text file.
On the server side, I created a controller with a method (action) getRequest which looks like :
getRequest: function (req, res, next) {
//var busboy = require('connect-busboy');
console.log('req: ', req);
return res.send(200);
}
But I have the following error on my sails.js console:
Error: 'Unable to parse HTTP body :: { [error: Expected CR Received 10] status: 400 }
So I saw on the Web that Express/Connect included with Sails.js was not appropriate to handle multipart data, has anybody already faced my problem and succeed to use an other middleware like busboy or formidable to handle these kind of request?
Thanks in advance.
Best
Loïc
I've been trying to solve this problem as well. Looks like skipper from the sails team is the way to go. https://github.com/balderdashy/skipper
The docs appear to be decent w/ examples for sails 0.10.0 & 0.9.x.
See this thread on GitHub https://github.com/balderdashy/sails/issues/1521 for more info and background.
Hope this helps. FYI - The google group for sails is active.
Graham