CODEWITHSUNDEEP
javascriptnode.jsreactjsexpress
user298519
user298519

Reputation: 1190

How to return error with Express to front-end within a Promise?

I tried using a catch within the promise on client but it doesn't seem to pick up the error.

server:

pdf.create(pdfTemplate(transcriptAsObject), {}).toFile(`routes/api/${finalPdfName}`, (err) => {
  if(err) {
    res.send(Promise.reject());
  }

  res.send(Promise.resolve());
 });

client:

axios.post('/create-pdf', this.state)
  .catch(err => console.log('error hit: ', err))
  .then(() => axios.get('fetch-pdf', { responseType: 'blob' }))
  .then((res) => {
    const pdfBlob = new Blob([res.data], { type: 'application/pdf' });
    saveAs(pdfBlob, 'newPdf.pdf');
  })
  .then(() => console.log('success brotha'))

Upvotes: 0

Views: 652

Answers (2)

jfriend00
jfriend00

Reputation: 708176

You don't send promises to your client. So both your res.send(Promise.resolve()) and your res.send(Promise.resolve()) are not correct. Instead, you send a response with an appropriate status.

For example, for an error, you would do something like this:

res.sendStatus(500);

or

res.status(500).send("You got an error creating the PDF");

The client then interprets that status and decides what to do. If you get an unexpected error on your server, you would typically set a 5xx status in the response you send back and the client code can then see that error status and react accordingly.

It is up to the client library that you're using for sending an Ajax call whether it makes a rejection out of a 5xx status or not. The fetch() interface built into the browser only makes a rejection out of true network error (no response coming back). Any response back from the server is considered a successful request from the point of view of fetch(). You will have to look and see how axios handles non-2xx response statuses, whether it makes it into a rejected promise for you or whether you have to explicitly check for the status in the .then() handler.

Looking at the axios documentation, it shows this default behavior:

validateStatus: function (status) {
  return status >= 200 && status < 300; // default
},

which means that it will reject unless the status is 2xx. So, returning a 500 status from the server will cause an axios rejection in the client request. This behavior in axios is customizable if you wanted to modify it.

So, in your client-side code, add a .catch() like this:

axios.post('/create-pdf', this.state)
  .catch(err => console.log('error hit: ', err))
  .then(() => axios.get('fetch-pdf', { responseType: 'blob' }))
  .then((res) => {
    const pdfBlob = new Blob([res.data], { type: 'application/pdf' });
    saveAs(pdfBlob, 'newPdf.pdf');
  })
  .then(() => console.log('success brotha'))
  .catch(err => {
      console.log(err);
  });

And, you will then see an error if you return a 500 status (or any non-2xx status) from the server upon an error.

Upvotes: 2

divine olokor
divine olokor

Reputation: 1

First of all, you should put .catch() after .then()

axios.post('/create-pdf', this.state)
  .then(() => axios.get('fetch-pdf', { responseType: 'blob' }))
  .then((res) => {
  const pdfBlob = new Blob([res.data], { type: 'application/pdf' });
  saveAs(pdfBlob, 'newPdf.pdf');
 })
 .then(() => console.log('success brotha'))
 .catch(err => console.log('error hit: ', err))

And it could be better if you specify an error instead of a promise in your backend API such as 

  pdf.create(pdfTemplate(transcriptAsObject), 
     {}).toFile(`routes/api/${finalPdfName}`, (err) => {
    if(err) {

     return res.status(500).send(err)

  }

   res.send(Promise.resolve());
  });

Upvotes: 0

Related Questions