DEV Community: Himanshu Pant

How to deal with stuck ECS deployment

Himanshu Pant — Wed, 20 Dec 2023 06:28:03 +0000

One of the hardest problems that I’ve ever dealt with in my life is making ECS deployments with Cloudformation work and work nicely, which is hard for some reason that only AWS knows.

TLDR

If your cloudformation stack update containing ECS doesn’t finish in a reasonable amount of time(depends on previous deployment times and container image size), roughly 10-15 minutes. You have a problem with your service.

Why does it stay stuck?

Idk, it just does, this is one of those things that cloudformation(any deployment tool) really sucks at and CloudFormation waits for several hours before rolling back to a previous configuration. If the issue that's causing stack failure continues during stack rollback to a previous configuration, then the stack gets stuck in UPDATE_ROLLBACK_IN_PROGRESS status. Finally, the stack changes to UPDATE_ROLLBACK_FAILED status and that is DevOps hell.

What’s really happening though?

ECS ***********really*********** likes to be stable and if it can’t be stable then it won’t finish updating(it won’t tell cloudformation that the update finished) and it won’t rollback either, so the main goal is to get the service to reach stability and there can be many reasons for it not reaching stability, however that is beyond the scope of this article.

So what could’ve gone wrong?

Here are some common reasons why an Amazon ECS service can fail to launch new tasks:

Container image issues
A lack of necessary resources for launching tasks
A health check failure on a load balancer
Instance configuration or Amazon ECS container agent issues

An Amazon ECS service that fails to launch tasks causes AWS CloudFormation to get stuck in UPDATE_IN_PROGRESS status, and you can quick check this by going into the service and selecting deployments, and checking the status of the latest deployment.

So what do I even do now?

Delete the stack and recreate!

!https://media0.giphy.com/media/0bc1ObnZK6IO0FkMV8/giphy.gif?cid=7941fdc64gt9sxd9juwjb3gft1b2qq3zgnmk2oxdassm15n0&ep=v1_gifs_search&rid=giphy.gif&ct=g

The main goal is to get your cloudformation to say:- “Update Complete” and it can take the AWS CloudFormation stack several hours to stabilize. To stabilize your stack more quickly, just lie to it.

Disclaimer

The following resolution is intended to help you stabilize an AWS CloudFormation stack quickly without waiting for the stack to time out. The resolution isn't intended for production environments, as the Amazon ECS service is out of sync with the known state of AWS CloudFormation. To sync resources between your Amazon ECS service and the AWS CloudFormation stack, you must perform an error-free update on the stack.

Resolution

Change the desired task count of the Amazon ECS service to 0

Open the Amazon ECS console.
Choose your cluster.
Select the service, and then choose Update.
Set Number of tasks to 0, and then save the configuration.

So what do I then?

Get your service to run and stabilize, make sure the process can start.

Fixing 3rd party cookies issue with Firebase Auth

Himanshu Pant — Sat, 14 May 2022 13:04:58 +0000

Here's a scenario that might might have happened with you. You develop a great app with Firebase, your app supports log in with Google and other Social Identity providers, it works great when you're testing it, you connect your domain to firebase hosting and ship it and users start coming in, but then some of your users come to you(if you're lucky that some provide feedback) and they say, "I can't log in with Google, I click on the button, it takes me to Google but when it takes me back, nothing". You try to recreate, and you don't see the problem and you probably just mark it as PEBCAK, but you have just lost a potential customer and the culprit:- third party cookies.

Third Party Cookies

I'm not going to try and explain the concept as you might have heard it enough number of times, so here are some great explanations.

How does Firebase handle OAuth logins

When you first create and app with firebase and enable auth, it creates an auth handler for you which can be accessed through the _auth/handler path in the app domain, which is another thing firebase creates for you which is something like ".firebase.app".
The way social login works with firebase is you redirect your users to this handler with the right query params and it takes care of OAuth verification for you, it sends your users to the OAuth provider(Google in our case) and google verifies and sends the user back to this handler.
This handler is managed by firebase and is responsible for a bunch of auth related items like email verification, password reset, etc.
Firebase hosting understands this handler's path and runs the handler instead of taking users to your app as well.

Note:- This is just a high level view. Don't quote me.

Why does this bug appear?

In the initial phase, the app was hosted on the default domain setup by firebase, but when you add your custom domain and send the user to that custom domain, firebase auth still sends the user to the base domain for this handler, making it a third party.
For example:- You add a custom domain in firebase hosting:- app.domain.com but the handler is located at <firebase_app_id>.firebase.app/_auth/handler. When we run signInWithRedirect, it still sends the user the <firebase_app_id>.firebase.app/_auth/handler, but the user came from app.domain.com making <firebase_app_id>.firebase.app/_auth/handler a third party.
With the browser scenario changing and 3rd party cookies coming under more scrutiny by users and authorities alike, a lot of browsers now block third parties by default and some users do this on purpose. This causes the browser to apply third party cookie policy on <firebase_app_id>.firebase.app/_auth/handler, preventing it from setting cookies and even accessing local-storage through iframe(which is what is happening). This is why some users can't log in, so the problem does not exist between chair and keyboard but between the browser and our app, which makes it our responsibility.

So how do we fix it

Simple answer?

Ask the user to allow third party cookies 😎

Good answer? Make the handler available on `app.domain.com/_auth/handler`, which can be achieved in x easy steps:-

Update the authDomain in firebase config to app.domain.com
Add app.domain.com to authorized domains in Firebase Auth page, Firebase Auth -> Sign In methods and scroll down to see list
Add app.domain.com/__/auth/handler to authorized redirect URIs in google cloud console.
- Go to google cloud console.
- Select your firebase project.
- Go to -> APIs and Services -> Credentials.
- Edit the "OAuth 2.0 Client IDs"

🎉 Problem solved!

Using lax.js with a Vue project

Himanshu Pant — Wed, 03 Jun 2020 12:09:58 +0000

About me:- Hi, I'm Ansh and I have trouble communicating so please don't hate me if you don't like this post but criticism is welcome.

If you don't know lax.js, it is a simple yet elegant scroll animations library and did I mention light weight(3kb minified & zipped).

Background

I recently had to use scroll animations in my vue project but other libraries like AOS seemed to complex and frankly I like lax.js.

The author of the lax has also created a codepen with a vue sample but it doesn't seem to fall in line with the documentation.
You can find the codepen here.

Also I won't be walking you through the steps to create a new vue project using the vue-cli, because I'm sure that if you're reading this article, you have figured that out by now.

So let's get to it.

Start by installing lax.js
```
npm install lax.js
```

Now in your main.js file, import lax and add it as an instance property.

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import lax from "lax.js";

Vue.prototype.$lax = lax;

new Vue({
    router,
    render: h => h(App)
}).$mount("#app");

I added lax as a vue instance property, because I wanted all components to be able to access it.

Now in your App.vue, add the created and mounted hooks like so.
```
export default {
methods: {
    UpdateLax() {
    this.$lax.update(window.scrollY);
    window.requestAnimationFrame(this.UpdateLax);
    }
},
mounted: () => {
    window.requestAnimationFrame(this.UpdateLax);
},
created: () => {
    this.$lax.setup();
},
};
```
Let me explain all that. In the created hook, we setup lax, this doesn't mean that lax will automatically listen to scroll event, we have to update it manually, that's where requestAnimationFrame and our UpdateLax method in, when the component is mounted we call window.requestAnimationFrame and pass it the UpdateLax method which will update lax with the amount that window has scrolled and recursively call itself on the next paint.

Add animations in your component.

In the component that you want to add scroll animations add ref to the dom elements that you want animated. In my case it was the heading and v-tabs

<template>
<div class="sub-links">
    <span class="heading" ref="animatedHeading"
        data-lax-scale="0 1.9, 76 1" data-lax-translate-y="0 32, 76 0">
            Awesome Scroll Animated Heading
    </span>

    <v-tabs class="tabs-container" ref="animatedTabs" 
        data-lax-translate-y="0 108, 76 0"
        v-model="currentActiveTab" @change="updateActiveTab"
        fixed-tabs color="primary">
            <v-tab :ripple="false" to="/">
                Tab 1
            </v-tab>
            <v-tab :ripple="false" to="/">
                Tab 2
            </v-tab>
            <v-tab :ripple="false" to="/">
                Tab 3
            </v-tab>
    </v-tabs>
</div>
</template>

Add mounted and beforeDestroy hooks in the component

mounted: () => {
    this.$lax.addElement(this.animatedHeading);
    this.$lax.addElement(this.animatedTabs);
},
beforeDestroy: () => {
    this.$lax.addElement(this.animatedHeading);
    this.$lax.addElement(this.animatedTabs);
},

The mounted hook adds our elements to lax which will animate them on scroll and the beforeDestroy hook removes them. now when your component renders, it will be animated on scroll.

The v-tabs and v-tab are vuetify components, and have nothing to do with lax, they are the ones I was using.

If you're wondering what I was building, here's a sneak peak.