StephenGrider / FullstackReactCode

Companion repo to https://www.udemy.com/node-with-react-fullstack-web-development
1.39k stars 1.17k forks source link

S10, L134: POST http://localhost:3000/api/surveys net::ERR_EMPTY_RESPONSE #12

Open wsfuller opened 6 years ago

wsfuller commented 6 years ago

Seems like there is an error in the repo code as well as many others reporting the same issue trying to send emails.

Course Q&A: POST http://localhost:3000/api/surveys net::ERR_EMPTY_RESPONSE

Pulling from Branch 132 Testing Emails

I was having this issue in my code as well. Typically errors in my code is from a typo, so to fix this I do blanket copy and pastes from the repo into my code until I can pinpoint my error. After doing this I was still seeing the same error. Because I was seeing the same error it was time to pull down the repo and see if the actual course base code is broken. After pulling down, checking out Branch #132, and setting up Axios on the window, the error still persists.

vdanylov commented 6 years ago

Have the same issue( Proxy error: Could not proxy request /api/surveys from localhost:3000 to http://localhost:5000 (ECONNRESET).

wsfuller commented 6 years ago

@vdanylov So in doing a little more digging the emails were being sent. However, the e-mail is being sent to my spam folder. The code from this repo shows the error as well which wasn't present in the video. The overarching issue I have is there's not enough explanation on what's going on in this section. It has the "ok that works moving on" when that's just not enough especially for how well everything else is explained in the series.

The other thing is there's no trouble shooting methods explained. If you go to your SendGrid Dashboard and view Activity you can see every process that has transpired. These types of hints would also be helpful in the troubleshooting process. I tend to hold Stephen's courses to a very high standard as I feel they are the best I've ever taken and this is spot for improvement.

SOSANA commented 6 years ago

@StephenGrider @wsfuller @vdanylov where you guys able to solve this issue? I am running into a similar issue as well. I thought it might have to do with https://webpack.js.org/configuration/dev-server/#devserver-proxy being used in CRA. Regardless of the altercation's I try to apply seems not to work.

Wondering if you guys found a work around to solve this issue? I know when I built my apps from scatch for frontend and backend I useds a cors node pkg in past to solve this issue but was hoping to hear what you guys came up with.

eponymz commented 6 years ago

I had this issue as well. Only on the dev server though. Seems to be an issue with nodemon not killing the port when restarting. Simple work around is to run: lsof -i :5000 And then: kill <id #>

SOSANA commented 6 years ago

This has to do with https://webpack.js.org/configuration/dev-server/#devserver-proxy I tested on axios.window and it works perfect. I been tearing out my hair last few days trying to figure out why, now I will be testing on production to see if same problems exist but at this point its mind boggling that it won't work in development

eponymz commented 6 years ago

Yeah from the error specifically, your computer is still holding on to a shell of an instance on 5000. Which means technically the server isn't up and running, so whenever any type of api call goes out it will fail like that. Did killing the activity on the port then stopping and starting the dev server help?

SOSANA commented 6 years ago

@eponymz I found out my problem.

For one in my formFields.js I set the values to emails instead of recipients, and in my email validations I was returning return invalidEmails;``` rather then return;or return false;` or even `` return null;

 {
    label: 'Recipient List',
    name: 'recipients', // <----
    type: 'email',
    placeholder: 'john@doe.com, 123@me.ca, bob@gonefishin, ...',
    noValueError: 'You must provide at least one valid email'
  }
// added comment for eslint to ignore no-useless-escape for regex as this works better then other option
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; // eslint-disable-line no-useless-escape

export default emails => {
  const invalidEmails = emails
    .split(',')
    .map(email => email.trim()) // trimming off white spaces
    .filter(email => re.test(email) === false); // setting to false to only catch emails that fail test

  if (invalidEmails.length) {
    return `These emails are invalid: ${invalidEmails}`;
  }

  return false;
};

Long story short it would not process the request as the split method being used was undefined expecting a split(',') resulting in undefined

Hope this helps anyone else in the future with similar problem