title: How to properly pass custom errors from Backend (Express) to Frontend (Vue)
body: <p>I am developing a basic <strong>Node</strong> app and I am facing a problem that I think is not new but I don't understand which is the proper way to solve. I need to handle those errors that are not generated by code, network or database but needed by the logic of the application. As an example I use the <strong><em>already registered user</em></strong> but the same handling will be needed in different case in the application.</p>
  
  <p>I start from the method in <strong>login component</strong>:</p>
  
  <pre><code>register () {
    API
      .register(this.credentials)
      .then(
        data =&gt; {
          this.user = data;
        },
        error =&gt; {
          this.error = error;
        })
      .catch(error =&gt; {
        this.error = error;
      });
  },
  </code></pre>
  
  <p>The <strong>API</strong> is:</p>
  
  <pre><code>register (credentials) {
   return Axios
    .post('/auth/register',credentials)
    .then(response =&gt; {
      return response.data;
    })
  },
  </code></pre>
  
  <p>The <strong>Backend</strong> is:</p>
  
  <pre><code>router.post('/auth/register',(req,res) =&gt; {
  User.findOne({where:{username:req.body.username}})
    .then(user =&gt; {
      if (!user) {
        User
          .create(req.body)
          .then(user =&gt; {
            res.send(user);
          })
      } else {
        throw 'Username already exists';
      }
    });
  });
  </code></pre>
  
  <p>What I expect is that the error</p>
  
  <blockquote>
    <p>throw 'Username already exists';</p>
  </blockquote>
  
  <p>(but it can be <strong><em>No data found for your search</em></strong>) is passed back to the component that catch it and show the error instead the registerd user.
  I try adding the <code>catch</code> after every <code>then</code> or using <code>res.send({error:...})</code> instead of throw but in this way the component shows the error message as user object.</p>