Published on October 10, 2022

Monitor when a user changes their email address in your JavaScript application

Monitor when a user changes their email address in your JavaScript application

Most of the time, when building a JavaScript application that is served to users, you will need to store the user's email address in your database. There are multiple reasons for this, such as sending the user a welcome email when they sign up for your application, sending the user a password reset email when they request a password reset, or sending the user a notification when they have been mentioned in a comment. In addition, it is commonly used for user authentication and authorization.

In most cases, some users may want to change their email addresses for various reasons while using your application. For example, they may have mistyped their email address when they signed up for your application or changed their email address for personal reasons. In any case, it is essential to track when a user changes their email address in your JavaScript application to ensure that you are always aware of the change and can update your database accordingly.

Fortunately, here at LogSnag, we have created a powerful solution for this problem. At its core, logSnag is a powerful, real-time event tracking tool that works seamlessly with any JavaScript application. LogSnag makes it easy to track any important event in your JavaScript application and monitor things such as user activity, user journeys, and more.

One common use case for LogSnag is to set up event tracking for when users change their email addresses in your JavaScript application in real-time. You may also optionally set up rules to notify you and your team when a user changes their email address in your JavaScript application.

In addition, LogSnag allows you to track user journeys and create a timeline of their actions to monitor the users' email address history and any other activity they have done in your application. This way, you can always track the activity of a specific user, such as when they change their email address and any other activity they have done in your application.


Setting up LogSnag

  1. Sign up for a free LogSnag account.
  2. Create your first project from the dashboard.
  3. Head to settings and copy your API token.

JavaScript code snippets

Use the following code snippet to track when a user changes their email address in your JavaScript application. All you need to do is to replace the YOUR_API_TOKEN with your LogSnag API token and update the project name to your project name.

Using JavaScript with Fetch
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Authorization", "Bearer YOUR_API_TOKEN");

var raw = JSON.stringify({
"project": "my-saas",
"channel": "profile",
"event": "Updated Email Address",
"description": "User updated their email address to john@example.com",
"icon": "📭",
"notify": true
});

var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};

fetch("https://api.logsnag.com/v1/log", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
Using JavaScript with jQuery
var settings = {
"url": "https://api.logsnag.com/v1/log",
"method": "POST",
"timeout": 0,
"headers": {
"Content-Type": "application/json",
"Authorization": "Bearer YOUR_API_TOKEN"
},
"data": JSON.stringify({
"project": "my-saas",
"channel": "profile",
"event": "Updated Email Address",
"description": "User updated their email address to john@example.com",
"icon": "📭",
"notify": true
}),
};

$.ajax(settings).done(function (response) {
console.log(response);
});
Using JavaScript with XHR
// WARNING: For POST requests, body is set to null by browsers.
var data = JSON.stringify({
"project": "my-saas",
"channel": "profile",
"event": "Updated Email Address",
"description": "User updated their email address to john@example.com",
"icon": "📭",
"notify": true
});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
console.log(this.responseText);
}
});

xhr.open("POST", "https://api.logsnag.com/v1/log");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer YOUR_API_TOKEN");

xhr.send(data);

JavaScript integration details

LogSnag provides a set of powerful features such as cross-platform push notifications, event filtering, user and product journeys, charts, insights, and more. In addition, LogSnag is flexible and easy to use, making it a great companion for your JavaScript applications.

LogSnag provides a generous free plan to get you started with event tracking. You can also check out our pricing page to see our paid plans. So don't hesitate to give us a try and let us know what you think!

Other use-cases for LogSnag

  1. Monitor your CI/CD build status for your JavaScript application
  2. Monitor your CPU usage in your JavaScript application
  3. Monitor when database goes down in your JavaScript application
  4. Monitor high disk usage in your JavaScript application
  5. Monitor failed logins in your JavaScript application
  6. Monitor failed payments for your JavaScript application
  7. Monitor memory usage in your JavaScript application
  8. Monitor MySQL downtime in your JavaScript application
  9. Monitor when a new feature is used in your JavaScript application
  10. Monitor your Postgres downtime in your JavaScript application
  11. Monitor Redis downtime in your JavaScript application
  12. Monitor suspicious activity in your JavaScript application
  13. Monitor when a user exceeds the usage limit for your JavaScript service
  14. Monitor when a user is being rate limited in your JavaScript application
  15. Get a notification when your JavaScript code is done executing
  16. Send push notifications to your phone or desktop using JavaScript
  17. Track canceled subscriptions in your JavaScript application
  18. Track your JavaScript cron jobs
  19. Track when a file is uploaded to your JavaScript application
  20. Track when a form is submitted to your JavaScript application
  21. Track payment events via JavaScript
  22. Track user sign in events in JavaScript
  23. Track user signup events via JavaScript
  24. Track waitlist signup events via JavaScript
View all common use-cases with JavaScript