Rollback the Frontend

This document describes the process for rolling back the frontend application to a previous version in case of issues after deployment.

Overview

Unlike backend services which can be rolled back through AWS ECS, the frontend requires creating a new branch from the desired commit and triggering a manual deployment through GitHub Actions.

Rollback Process

1. Identify the Target Commit

1. Navigate to the GitHub repository
2. Go to the Commits page on the main branch
3. Identify the commit that represents the stable version you want to rollback to
   • Look for the last known good release tag or commit
   • Review commit messages to confirm it's the correct version

2. Create a Rollback Branch

1. In GitHub, navigate to the target commit
2. Create a new branch based on this commit:
   • Click the commit SHA
   • Click the <> (code) dropdown
   • Select Create branch
   • Name the branch descriptively (e.g., rollback-to-vX.X.XX or hotfix/rollback-production)

3. Trigger Manual Deployment

1. Navigate to GitHub Actions tab
2. Select Prod Frontend Manual Deployment workflow
3. Click Run workflow (top right)
4. In the dropdown:
   • Select your newly created rollback branch
5. Click Run workflow to start the deployment

4. Monitor Deployment

1. Watch the workflow execution in the Actions tab
2. Monitor the deployment steps:
   • Build process
   • Test execution
   • Deployment to production
3. Verify the workflow completes successfully

Critical Compatibility Checks

Important

Before rolling back the frontend, verify compatibility with backend services:

Backend Service Compatibility

Does the frontend version fit with the current backend service versions?

Check for potential mismatches:

• API Endpoints: Were any endpoints added/modified/removed after the version you're rolling back to?
• DTOs (Data Transfer Objects): Have request/response formats changed?
• Authentication: Have authentication mechanisms changed?

Services with Tight Frontend Coupling

The frontend has particularly tight integration with:

• Screenflow Service
• Coding Service

When rolling back the frontend, carefully verify compatibility with these services.

Post-Rollback Verification

After deployment completes:

• [ ] Verify the frontend is running the expected version
• [ ] Test critical user flows:
  • [ ] Authentication and login
  • [ ] Main application features
  • [ ] Integration with screenflow service
  • [ ] Integration with coding service
• [ ] Check browser console for errors
• [ ] Monitor error tracking (e.g. Datadog)
• [ ] Confirm the issue is resolved