Fixing Critical Bugs and Improving Reliability with Sentry

This is a submission for DEV's Summer Bug Smash: Clear the Lineup powered by Sentry.

Project Overview

MovieSync is a real-time cinema venue dashboard designed to help cinema teams display and manage intermission information efficiently.

The application provides a simple dashboard for managing movie and venue information in real time. It was built with React, Vite, and Vanilla CSS, containerized using Docker, and deployed on Google Cloud Run with Nginx serving the production frontend.

Bug Fix or Performance Improvement

While developing and deploying MovieSync, I encountered issues related to application reliability, error handling, and production deployment.

The main goal was to identify the root causes of these problems, fix them properly, and make the application more reliable in a production environment.

I focused on improving error handling, resolving application issues, and ensuring that the containerized application started correctly and served traffic reliably on the required Cloud Run port.

Code

GitHub Repository: https://github.com/kvk1999/moviesync2.0

My Improvements

I first reproduced the issues and investigated the application behavior to identify their root causes.

I then made the necessary code and configuration changes to improve the application's reliability.

The improvements included:

Fixed application errors identified during development.
Improved error handling and debugging.
Verified frontend behavior after making the changes.
Improved production deployment configuration.
Used Docker multi-stage builds to create a production-ready application.
Configured Nginx to serve the React SPA correctly.
Ensured the application listens on the port required by Cloud Run.
Tested the application after deployment to verify that the fixes worked correctly.

These changes made MovieSync more stable and easier to monitor and maintain.

Best Use of Sentry

I integrated Sentry into MovieSync to improve application observability and make it easier to identify and investigate errors.

I used Sentry's Error Monitoring to capture application errors and inspect the relevant stack traces and context.

Sentry helped me:

Detect errors that were not always obvious during local development.
Identify where failures were occurring.
Investigate errors using the available debugging information.
Verify the application's behavior after implementing fixes.
Improve the overall reliability of the application.

Instead of relying only on manual testing and console logs, Sentry provided a centralized way to monitor application errors and investigate issues.

Best Use of Google AI

Gemini-powered Cinema Assistant — staff can ask questions such as “Which movies have an intermission in the next hour?” and Gemini uses MovieSync's available data to provide a useful answer.