Feb 23, 2023

Level 6

Laravel Newsletter thank you / error message not displayed

we use Laravel newsletter in our app. We use it to get subscriptions in Mailchimp. It does work with Axios POST submissions, but when it sends successfully the Vue component does not

show the thanks message properly anymore and
it also does not show message to enter correct email address when Mailchimp sends 400:

 "error": "400: [email protected] looks fake or invalid, please enter a real email address."

We use

...
submit(event) {
  this.error = null

  event.preventDefault()

  // Break if not a published site
  if (!window.isPublished) return;

  // Break if there isn't a Mailchimp newsletter key
  if (!this.object.apiToken || !this.object.audienceId) {
    this.error = 'Configuration not completed. Please contact the webmaster.'
    return
}
....
  axios.post('/api/newsletter', letterForm)
    .then(res => {
      if (!res) {
        this.error = 'Somethings went wrong! Please try again.'
      } else {
        this.inputsData = {}
        this.thankYouText = 'Email address was subscribed successfully'
      }
    }).catch(() => {
      this.error = 'Somethings went wrong! Please try again.'
    })
}
...

So somehow MailChimp does get the address but we see no thank you note. And if something goes wrong we do no longer see error message. So seems something is off in Axios POST request.

Any ideas how to debug this?

LaryAI

3 years ago

Level 58

It looks like the issue is with the Axios POST request. To debug this, you can start by logging the response from the Axios request. You can do this by adding the following code to the submit() method:

console.log(res);

This will log the response from the Axios request, which should give you more information about what is going wrong. You can also log the letterForm object to make sure that the data is being sent correctly.

If the response from the Axios request is not what you expect, you can try using the axios.post() method with the validateStatus option set to false to see if that helps. This will allow the Axios request to return a response even if the status code is not 200.

axios.post('/api/newsletter', letterForm, { validateStatus: false })
  .then(res => {
    // ...
  })
  .catch(err => {
    // ...
  });

If the response from the Axios request is still not what you expect, you can try using a tool like Postman to make the same request and see what the response is. This will help you to identify any issues with the request itself.

Once you have identified the issue, you can then update the code to handle the response correctly.

1 like

rhand

3 years ago

Level 6

using

...
}).catch(() => {
   this.error = 'Somethings went wrong! Please try again.'
   console.log(this.res);
})
...

I get undefined. If I just use res I get Can't find variable: res

rhand

3 years ago

Level 6

When I did

...
axios.post('/api/newsletter', letterForm)
  .then(response => {
      console.log(response);
    if (!response) {
      this.error = 'Somethings went wrong! Please try again.'
    } else {
      this.inputsData = {}
      this.thankYouText = 'Email address was subscribed successfully'
    }
  }).catch(() => {
    this.error = 'Somethings went wrong! Please try again.'
})
...

I did get data

config: {transitional: {silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false}, adapter: function, transformRequest: Array, transformResponse: Array, timeout: 0, …}
data: {status: "success"}
headers: {access-control-allow-origin: "*", cache-control: "no-cache, private", content-encoding: "gzip", content-type: "application/json", date: "Thu, 23 Feb 2023 10:04:27 GMT", …}
request: XMLHttpRequest {listeners: Object, onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, …}
status: 200
statusText: ""

So as expected there is data as Mailchimp receives the email address. But somehow the message in template part of Vue component

...
<div style="width: 100%;margin-top: 5px;" :style="{ marginLeft: `${object.inputMarginLeft * sizeScale}px` }">
  <p style="color:#46be0a;" v-if="thankYouText && !error" v-text="thankYouText"></p>
  <p style="color:red;text-align:center;" v-if="error" v-html="error"></p>
</div>
...

does not work and show a success message. And that might be because this data does not seem to have the thankYouText

But you would think Vue with v-if and v-html should show the data.. Confused atm.

rhand

3 years ago

Level 6

Seems when an invalid email address is added and you get a response 500

Failed to load resource: the server responded with a status of 500 ()

with this JSON data:

{
    "success": false,
    "error": "400: [email protected] looks fake or invalid, please enter a real email address."
}

our entire axios.post block is not adding console data for solid response or no response using

...
axios.post('/api/newsletter', letterForm)
  .then(response => {
      console.log(response);
    if (!response) {
      console.log(error.response);
      console.log(response);
      // this.error = 'Somethings went wrong! Please try again.'
    } else {
      //this.inputsData = {}
      // this.thankYouText = 'Email address was subscribed successfully'
        console.log(error.response);
        console.log(response);
    }
  }).catch(() => {
    this.error = 'Somethings went wrong! Please try again.'
})
...

rhand

3 years ago

Level 6

Using

...
axios.post('/api/newsletter', letterForm)
    .then(res => {
        if (!res) {
        this.error = 'Somethings went wrong! Please try again.'
        } else {
        this.inputsData = {}
        this.thankYouText = 'Email address was subscribed successfully'
        }
    }).catch((err) => {
    //  this.error = 'Somethings went wrong! Please try again.'
    console.log("Mailchimp Error: ", err); // Mailchimp Error: - Error: Request failed with a status of 500 ()
    // console.log("Mailchimp Error: ", err["response"]["data"]);
    })
...

I do get the error in the log with Mailchimp Error: - Error: Request failed with a status of 500 () using an invalid email address. So presumably this error also worked before. It again just did not display in Vue template html:

...
<div style="width: 100%;margin-top: 5px;" :style="{ marginLeft: `${object.inputMarginLeft * sizeScale}px` }">
  <p style="color:#46be0a;" v-if="thankYouText && !error" v-text="thankYouText"></p>
  <p style="color:red;text-align:center;" v-if="error" v-html="error"></p>
</div>
...

rhand

3 years ago

Level 6

When I load

...
axios.post('/api/newsletter', letterForm)
    .then(res => {
        if (!res) {
        this.error = 'Somethings went wrong! Please try again.'
        } else {
        this.inputsData = {}
        this.thankYouText = 'Email address was subscribed successfully'
        }
    }).catch((err) => {
    console.log("Mailchimp Error: ", err); // Mailchimp Error: - Error: Request failed with a status of 500 ()
    // console.log("Mailchimp Error: ", err["response"]["data"]);
    this.error = err;
})
...

The error is loaded in the vue html. But when I just used this.err = "message"; things did not load. Odd.

rhand

3 years ago

Best Answer

Level 6

This works loading the error in vue when something is off such as invalid email address error 400 causing a status 500 to show up:

...
axios.post('/api/newsletter', letterForm)
    .then(res => {
        if (!res) {
        this.error = 'Somethings went wrong! Please try again.'
        } else {
        this.inputsData = {}
        this.thankYouText = 'Email address was subscribed successfully'
        }
    }).catch((err) => {
    // console.log("Mailchimp Error: ", err); // Mailchimp Error: - Error: Request failed with a status of 500 ()
    // console.log("Mailchimp Error: ", err["response"]["data"]);
    // this.error = err;
        if(err) {
           this.error = 'Something went wrong. Please try with correct email address';
        }
})
...

Please or to participate in this conversation.