We Keep Coding

Api is not fetching in reactJs

I am trying to fetch food by its key. In postman api is working fine but is the forntend it has no response.
backend code
app.get('/foods/:key', (req, res) => {
foodsCollection.find({ key: req.params.key }).toArray((err, documents) => {
res.send(documents[0])
})
})
frontend code
const { key } = useParams()
const [foodById, setFoodById] = useState({})
useEffect(() => {
fetch(`http://localhost:5000/foods/${key}`)
.then((res) => res.json())
.then((data) => {
setFoodById(data)
})
}, [key])

Although you've added some images above, the most important is missing, namely, what are the Browser's Developer Tools stating the problem is. You should see some message in the Console tab, as well as in the Network tab for that particular request, if it is indeed being made. Until anyone sees this, it will be very difficult to help in fixing your problem.
If your not already, I suggest scaffolding any react app with create-react-app (CRA). This will give you a working app to start from. You can ignore CORS related issues in development, if using CRA, by adding "proxy": "http://localhost:5000", to your package.json file, see here for more on this method, but remember, this is only works for local development. You can also start Chrome to ignore Web Security by running it with the --disable-web-security flag e.g. chromium --disable-web-security, but that isn't a great idea really, more a way to quickly determine if you are having CORS problems, as Chrome masks some problems as CORS related, when in fact they aren't.
I'd also suggest changing your fetch code to use await, so instead you'd have:
const response = await fetch(`http://localhost:5000/foods/${key}`);
if (!response.ok) {
console.error(`Error message: ${response.statusText} ${response.status}`);
}
const result = response.json();
console.log(result);
This isn't necessary, but I've always found it way easier to read than the then/catch/finally method.

Reason for error
You need to stringify an object before sending it to the client with the JSON.stringify() method. When we exchange data to/from a web server, it must be a string.
Solution:
Proper way to send response to the client would to wrap the entire API in a try-catch block and explicitly specify the HTTP Status Code along with the stringified data in every response.
Note: Although 500 status code is used for error handling, you should choose one as per the use case.
app.get('/foods/:key', (req, res) => {
try {
/*
rest of the code
*/
foodsCollection.find({ key: req.params.key }).toArray((err, documents) => {
if (err) {
// 500 stands for internal server error
return res.status(500).send(JSON.stringify('Here goes a meaningful error message!'));
}
// 200 stands for success
res.status(200).send(JSON.stringify(documents[0]));
});
/*
rest of the code
*/
} catch (error) {
// 500 stands for internal server error
res.status(500).send(JSON.stringify('Here goes another meaningful error message!'));
}
})

The problem is that you haven't set the CORS headers of response in your backend code. and you are using different ports in your backend and frontend (5000 & 3000) so the Same Origin Policy disallows reading the remote resource, indicating that the request was blocked due to violating the CORS security rules.
you've to set the CORS headers.
you can install the CORS npm package and follow it's instructions to resolve the issue like this:
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
.
.
.
And one other issue that I'm seeing is that you've put the react-router default route before your specified path. so move the <route path="*"> after <route path="/foods/:key">

cloud functions emulator cannot read or write to firestore database

I was running my cloud functions locally with the emulator no problems yesterday. When I came back and set my export GOOGLE_APPLICATION_CREDENTIALS=after a reboot I now cannot read or write to the database. I've deleted my key, created a new one and I still run into the same problem. I've created a simple function that runs with no errors yet it doesn't read or write to the database when ran in the emulator. The .get() function says it couldn't find anything and the .set() doesn't return anything nor does it write to the DB.
Edit* my functions do run when deployed to firebase, but I have one that parses and loads huge amounts of data that times out that I have to run locally because of how long it takes.
exports.dumbFunction = functions.https.onRequest((request, response) => {
admin
.firestore()
.collection("test")
.doc("hello")
.get()
.then(function(doc) {
if (doc.exists) {
console.log("You got me" + doc.data());
} else {
console.log("I couldn't find anything");
}
});
admin
.firestore()
.collection("test")
.doc("test123")
.set({
setme: "ok",
asdf: "asdf"
})
.catch(err => {
console.log("did I error?");
console.log(err);
});
console.log("hi again");
});
I've followed the instructions of the following.
https://cloud.google.com/docs/authentication/getting-started
https://firebase.google.com/docs/functions/local-emulator
https://cloud.google.com/storage/docs/reference/libraries
when I run the node.js example in the third link I get the following error messages which I think is my issue but I have no idea why or how to fix this.
Unknown network resource requested!
- URL: "http://metadata.google.internal./computeMetadata/v1/instance"
ERROR: Error: Could not load the default credentials. Browse to https://cloud.google.com/docs/authentication/getting-started for more information.
at GoogleAuth.<anonymous> (/home/ben/Development/polity/functions/node_modules/google-auth-library/build/src/auth/googleauth.js:168:23)
at Generator.next (<anonymous>)
at fulfilled (/home/ben/Development/polity/functions/node_modules/google-auth-library/build/src/auth/googleauth.js:19:58)
at processTicksAndRejections (internal/process/task_queues.js:89:5)
when I echo $GOOGLE_APPLICATION_CREDENTIALS it shows that it's set to my JSON file containing my key.
The Unknown network resource requested! is something I see on my other functions as well now which is something I didn't receive when they were working.
Any idea?
Much thanks

Still can't get this working but I found a workaround. Using the functions framework for nodejs works just fine.
https://github.com/GoogleCloudPlatform/functions-framework-nodejs

Testing react app with cypress and firestore shows Timed out retrying: cy.wait()

I'm using react 16.8.1, cypress 3.1.5 and firebase 5.5.3 for e2e tests.
Currently I need to wait for the page to load all the components and then run the tests like getting a button and clicking on it.
Before each test, the programm checks if the user is logged in and if so, it'll wait for firebase to send some POST and GET requests.
Unfortunately cypress shows CypressError: Timed out retrying: cy.wait() timed out waiting 100000ms for the 1st response to the route: 'googleGETRoute'. No response ever occurred. for both GET and POST requests, which makes clicking or continuing the tests impossible.
Before each request I run the following:
beforeEach(function () {
cy.server().route({ url: /https:\/\/.*google.*/, method: "POST" }).as("googleRoute");
cy.server().route({ url: /https:\/\/.*google.*/, method: "GET" }).as("googleGETRoute");
cy.visit('/event');
cy.wait('#googleRoute', xhr => {
cy.url().then((url) => {
if (url === 'http://localhost:3000/login') {
cy.loginByForm(testUserAccount, testUserPassword);
}
});
});
});
And to delete an event:
it('should deleteEvent', function() {
cy.wait('#googleGETRoute', { responseTimeout:100000, log:true });
cy.wait('#googleRoute', { responseTimeout: 100000, log:true });
deleteEvent(event);
cy.contains(event.title).should('not.be.visible');
});
still no responses from firestore. I've also checked #1652 and #2374 which are almost the same as this problem.
Has anyone faced this issue before? Would appreciate any help

You shouldn't rely on firestore or firebase to start a test because it's an external service that you have no control over especially
when are these firestore requests sent?
what are these requests for?
how do they work?
If we don't understand, we cannot expect Cypress knows what's going on because it's a framework.
Instead, you can just wait for a specific component to be available. By default, the cy.get command has a built-in timeout. It'll wait for the given component to be rendered before failing a test.
In your case, you can increase the timeout of the very first cy.get which, I think, in deleteEvent(). In addition, you need get rid of all cy.server & cy.wait for firestore which are unreliable and useless.

Node.js - Serving error 500 pages on unexpected errors

I'm trying to serve 500 pages (some generic HTML that says "500 - internal server error") from my Node.js server to requests that failed to resolve due to developer bugs, but can't find an elegant way to do this.
Lets say we have the following index.js, where a developer innocently made a mistake:
const http = require('http');
const port = 12345;
http.createServer(onHttpRequest).listen(port);
function onHttpRequest(req, res) {
var a = null;
var b = a.c; // this is the mistake
res.end('status: 200');
}
Trying to access property "c" of null throws an error, so "res.end" will never be reached. As a result, the requesting client will eventually get a timeout. Ideally, I my server to have code that can catch errors like this, and return 500 pages to the requesting client (as well as email an administrator and so on).
Using "try catch" in every single block is out of the question. Most Node.js code is async, and a lot of the code relies on external libraries with questionable error handling. Even if I use try-catch everywhere, there's a chance that an error would happen in an external library that didn't have a try-catch block inside of it, in a function that happens asynchronously, and thus my server will crash and the client would never get a response.
Shortest example I can provide:
/* my server's index.js */
const http = require('http');
const poorlyTestedNpmModule = require('some-npm-module');
const port = 12345;
http.createServer(onHttpRequest).listen(port);
function onHttpRequest(req, res) {
try {
poorlyTestedNpmModule(null, onResult);
}
catch(err) {
res.end('status: 500');
}
function onResult(err, expectedResult) {
if(err) {
res.end('status: 400');
}
else {
res.end('status: 200');
}
}
}
/* some-npm-module.js */
module.exports = function poorlyTestedNpmModule(options, callback) {
setTimeout(afterSomething, 100);
function afterSomething() {
var someValue = options.key; // here's the problem
callback(null, someValue);
}
}
Here, the server crashes, due to a function call that led to code that asynchronously throws an error. This code is not code that I control or wish to modify; I want my server to be able to handle all those errors on its own.
Now, I could, for instance, just use the global uncaughtException event, i.e.:
process.on('uncaughtException', doSomething);
but then I have no access to the (req, res) arguments, making it impossible to call res.end for the correct res instance; the only way to have access to them, is to store them in a higher-scope object for each incoming request, and then prune them on successful request resolutions, then mark existing [req, res] stored pairs as "potentially errored" whenever an uncaughtException triggers, and serve 500 pages to those requests whenever the count of currently-active requests matches the count of currently-unresolved-errors (and re-test that count per thrown uncaught expection and per successful res.end call).
Doing that works, but... it's ugly as hell. It means that request objects have to be leaked to the global scope, and it also means that my router module now has a dependency on the uncaughtException global event, and if any other code overwrites that event, everything breaks, or if I ever want to handle other uncaught exceptions for whatever reason, I'll run into cross dependency hell.
The root cause of this problem is that an unexpected error can happen anywhere, but I want to specifically catch whether an unexpected error originated from a stack trace that began from an incoming http request (and not, for example, from some interval I have running in the background, because then I get an unexpected error but obviously don't want to serve a 500 page to anyone, only email an admin with an error log), and on top of needing to know whether the error originated from an http request, I need to have access to the request+response objects that node server objects provide.
Is there no better way?
[Edit] The topic of this question is role distribution in modules.
i.e., one guy is making base code for a server, lets say a "router module". Other people will add new code to the server in the future, handling branches that are routed to.
The guy that writes the base server code has to write it in a way that it will serve 500 pages if any future code is written incorrectly and throws errors. Help him accomplish his goal.
Answers of the format "make sure all future people that add code never make mistakes and always write code that won't throw uncaught errors" will not be accepted.

At first, using uncaughtException in Nodejs is not safe. If you feel that there is no other option in your application, make sure that you exit the process in the handler of 'uncaughtException' and restart the process using pm2 or forever or someother modules. Below link can provide you its reference.
Catch all uncaughtException for Node js app
Coming to the process of error handling, as mentioned, you may always miss to handle errors with callback. To avoid, these we can use an exceptional advantage of promises in nodejs.
/* my server's index.js */
const http = require('http');
const poorlyTestedNpmModule = require('some-npm-module');
const port = 12345;
http.createServer(onHttpRequest).listen(port);
function onHttpRequest(req, res) {
try {
poorlyTestedNpmModule(null)
.then(result => {
res.end('status: 200');
})
.catch(err =>{
console.log('err is', err);
res.end('status: 400');
})
}
catch(err) {
res.end('status: 500');
}
}
/* some-npm-module.js */
module.exports = function poorlyTestedNpmModule(options, callback) {
setTimeout(afterSomething, 100);
afterSomthing = new Promise((resolve, reject)=> {
var someValue = options.key; // here's the problem
resolve(someValue);
})
}
If you see that some of the npm nodemodules are not present with promise, try to write wrappers to convert callback to promise model and use them in your application.

Node.js and https certificate error handling

To make a long story short:
I'm building node app which making a request with https (the secure version of http). Whenever I miss-configure my request options, I'm having this error:
Node.js Hostname/IP doesn't match certificate's altnames
Great... except of the fact that the entire request code is wrapped with a valid try..catch block (which works just fine.. checked that already). The code is basically something like this:
try
{
https.request(options, (response) =>
{
// no way I making it so far this that error
}).end();
}
catch(ex)
{
// for some reason.. I'm not able to get here either
}
What I intend to do is to simply handle that error within my try..catch block
After reading some posts I've learned that this behavior is mainly because the tls module is automatically process the request and therefore making this error - this is a nice piece of information but it doesn't really help me to handle the exception.
Some other suggested to use this option:
rejectUnauthorized: false // BEWARE: security hazard!
But I rather not... so.. I guess my questions are:
Handling an error with a try..catch block should work here..right?
If not - is this behavior is by-design in node?
Can I wrap the code in any other way to handle this error?
Just to be clear - I'm not using any third-party lib (so there is no one to blame)
Any kind of help will be appreciated
Thanks

You need to add an 'error' event handler on the request object returned by https.request() to handle that kind of error. For example:
var req = https.request(options, (response) => {
// ...
});
req.on('error', (err) => {
console.log('request error', err);
});
req.end();
See this section in the node.js documentation about errors for more information.