DEV Community: Gogulaanand

Automate daily workflows with cron jobs

Gogulaanand — Sun, 29 Aug 2021 14:49:09 +0000

Ok, first of all, what are cron jobs ?

Cron jobs are basically time based schedulers that execute certain actions based on the command provided or the steps mentioned in a script.

Now why would we need a cron job ?

Simple, to automate the repetitive tasks. This will save us time and manual effort involved. My mentor often would say, if you are going to do the same action multiple times, as software developers we need automate it and shift our focus on other things at hand.

With what and why cleared, lets jump into how !

This how a sample cron job will look like:

0 12 * * * shell-script.sh

what the above line does is, it runs shell-script.sh script file everyday at 12pm.

We can have anything inside the shell script.
for example, i can add a script to automatically pull latest changes from main branch

cd ~/Desktop/my-repo
git checkout main
git pull

The most important part is the first 5 characters => 0 12 * * *

This is what defines the rule for a cron job on when to run.

Each character represents a specific time unit.

first character represents minute
second character represents hour
third character represents day of the month
fourth represents month
fifth represents day of the week

if you provide * for any one character, it means run the script at every occurance of that unit time.

if first character is * then it means run the sciprt every minute.
if second character is *, then it means run the script every hour. likewise every day, every month, all days in a week

Now coming back to our initial cron job,

0 12 * * *

0 - dont run every minute
12- run daily at 12pm
* - run every day of the month
* - run every month
* - run all days in a week

We can modify the expression however we like at whatever time we want it to run.
Few examples:

* * * * * (run every minute)
0 * * * * (run every hour)
0 0 * * * (run at midnight every day)
0 * * * 1-5 (run every hour monday to friday)
0 * * * SUN (run every hour only on sunday)
*/20 * * * * (run every 20 minutes on all days)
0 9-17 * * * (run every hour between 9am and 5pm on all days)

to test out an expression for your usecase, checkout crontab.guru

With the basics set, lets jump into setting up a cron job:

A cron job can be setup in multiple places - Jenkins, AWS, even in node.js. For simplicity, in this article, we will focus on setting up in local machine.

Type crontab -e in terminal. This will open up an vi editor to add our cron jobs
Lets add our cron job:

MAILTO="abc@gmail.com"
0 12 * * * ~/Desktop/repos/merge.sh >> ~/Desktop/repos/cron.log 2>&1

Lets take a minute to go over whats happening here.

MAIL_TO specifies the mail id to which error report should be sent in case the cron job fails.

In next line,

the cron expression - 0 12 * * * (run every day at 12pm)
path of the script file to run - ~/Desktop/repos/pull.sh
path of the log file to dump the logs - ~/Desktop/repos/cron.log
2>&1 is a shell expression to merge the output to the log file.

We can have any number of cron jobs.

0 12 * * * ~/Desktop/repos/pull.sh
2 12 * * * ~/Desktop/repos/merge.sh
* * * * * ~/Desktop/repos/script3.sh

finally, save and close the editor by typing :wq

We are done 🎉
Now the scripts will be executed automatically without us having to go and type the commands every day at a specific time like a robot. We can focus on more challenging tasks. 😌😇

Error tracking and monitoring in Next.js

Gogulaanand — Sun, 15 Aug 2021 06:00:25 +0000

Error tracking and performance monitoring is crucial to any application running in production. Simply because we cant expect the end user to report every issue they face and it is our responsibility to proactively check for errors and fix them for better user experience.

In Next.js, it is very easy to setup error tracking in couple of minutes with Sentry

Lets begin 🚀

Setup

// install sentry's nextjs sdk
npm install --save @sentry/nextjs

// run the setup wizard
// We need to have an account with sentry before running 
// setup as it will open login window in browser
npx @sentry/wizard -i nextjs

We can allow sentry to capture errors in couple of ways.

1.Error object:

try{
  aFunctionThatMightFail();
}
catch(err){
  throw new Error(err)
}

2.Use Sentry's methods to capture the error:

import * as Sentry from "@sentry/nextjs";

try {
  aFunctionThatMightFail();
} catch (err) {
  Sentry.captureException(err);
}

Alternatively, we can use React's Error boundary to log the error to Sentry

import * as Sentry from "@sentry/nextjs";

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };  
  }

  componentDidCatch(error, errorInfo) {
    // we can log error or errorInfo to Sentry here.
    // errorInfo will contain the details 
    // and stack trace which is better for debugging

    Sentry.captureException(errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;    
    }
    return this.props.children; 
  }
}

And...
We are done. 🎉
Now the Sentry SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client.

Lets have a look at what Sentry offers:

Main dashboard

Issues dashboard

We get an overview of all the issues at one place. We can also view release wise report.

Once, while checking something in my local, some error flashed up during page transition for a second and then disappeared. I couldnt reproduce it again, log was not available in terminal or browser console but it was logged in sentry with full error trace 😄

Performance dashboard (Similar to Chrome's Light House performance report)

📌 We get active support for sentry in next.js which is a good thing in the long run (eg: Recent update: Next.js v11.1). To explore more, checkout Sentry's guide for nextjs

Credits: Cover Photo by Luke Chesser on Unsplash

Authentication with magic link in React

Gogulaanand — Sat, 14 Aug 2021 10:07:54 +0000

Authenticating users via magic link is on the rise recently (for a good reason). Magic link is the way of sending users a unique link to their mail, using which they can signup / login. It removes the need for username, password, activation email, forgot password scenarios etc.

magic.link offers an npm package which we can plug into our app and have an auth system setup in few minutes.

Lets begin 🚀

Installation:

npm i magic-sdk

Import and initialise magic


import { Magic } from "magic-sdk";

const [user, setUser] = useState(null);

useEffect(() => {
    magic = new Magic(process.env.NEXT_PUBLIC_MAGIC_API_KEY)
}, []);

NEXT_PUBLIC_MAGIC_API_KEY is the api key provided by magic.link, stored in local environment.

User login

const loginUser = async (email) => {
    try {
      await magic.auth.loginWithMagicLink({ email });
      setUser(email);
      router.push("/");
    } catch (err) {
      setUser(null);
      throw new Error("Email login failed");
    }
  };

To verify user session:

Once a user has clicked the magic link received in his mail and completed the authentication, magic would automatically store the user meta data in your site's localstorage/cookies. We simply need to use the inbuilt function to fetch the stored session token and user's data which is email here.

const checkUserLoggedIn = async () => {
  try {
    const isLoggedIn = await magic.user.isLoggedIn();
    if (isLoggedIn) {
      const { email } = await magic.user.getMetadata();
      setUser(email);
      getToken();
    }
  } catch (err) {
    throw new Error("User is not logged in");
  }
};

const getToken = async () => {
  try {
    return await magic.user.getIdToken();
  } catch (err) {
    throw new Error("Authenticate current session failed");
  }
};

Invoke checkUserLoggedIn() inside useEffect hook.

User logout:

const logoutUser = async () => {
    try {
      await magic.user.logout();
      setUser(null);
      router.push("/");
    } catch (err) {
      throw new Error("User logout failed");
    }
  };

Oauth login:

You can follow the quick setup guide for social login under your magic account. (Trust me, it is not a long guide. It just takes couple of minutes 😄) Once done, we can setup oauth login in our app.

Installation:

npm i @magic-ext/oauth

A minor change to our magic initialisation to support oauth.

import { OAuthExtension } from "@magic-ext/oauth";

useEffect(() => {
    magic = new Magic(process.env.NEXT_PUBLIC_MAGIC_API_KEY, {
      extensions: [new OAuthExtension()],
    });
}, []);

const oauthLogin = async (e) => {
    e.preventDefault();

    // Start the Google OAuth 2.0 flow!
    await magic.oauth.loginWithRedirect({
      provider: "google",
      redirectURI: `${window.location.origin}/oauth`,
    });
  };

Invoke above method when the user clicks on the 'Sign in with Google' button. Here, i have provided redirectURI as /oauth. Once the google login is complete, magic will redirect to this endpoint of our website. We can have a success page under that endpoint or just redirect to hompage simply using / instead /oauth

Some additional logic to add to our useEffect hook:

useEffect(() => {
    magic = new Magic(process.env.NEXT_PUBLIC_MAGIC_API_KEY, {
      extensions: [new OAuthExtension()],
    });

    const render = async () => {
      if (window.location.pathname === "/oauth") {
        try {
          const result = await magic.oauth.getRedirectResult();
          const profile = JSON.stringify(result.oauth.userInfo, undefined, 2);
          if (profile.email) {
            setUser(profile.email);
            router.push("/");
          }
        } catch {
          window.location.href = window.location.origin;
          throw new Error("Oauth login failed");
        }
      }

      checkUserLoggedIn();
    };
    render();
  }, []);

The only new thing here is the render() method inside useEffect. It checks if current url is /oauth, then fetches the user details obtained via oauth login. The profile varibable contains many details, but for simplicity, here we are using only the email.

And...
That's it. 🎉
We have an email and google login setup for our app/website.
Without the worries of the problems that passwords bring in. 😌

Credits: Cover Photo by Franck on Unsplash

📌 magic.link provides 10000 free logins currently which supports hobby/pet projects suffciently. If you are interested and want to checkout magic, signup here 😉

dev.to session manage

Gogulaanand — Mon, 30 Dec 2019 15:27:26 +0000

dont know if this is known already, but is each new tab in dev.to a separate session? i opened a reply to my comment from within my profile in a new tab, and i was asked to authenticate again, though i have been logged in for more than 30mins