Filament Oops: Prevent Accidental Filament Panel Edits in Production

If you’ve ever had the nerve-wracking experience of accidentally editing live data while developing locally, you’ll understand why I created Filament Oops, a Laravel package to protect developers from mistakenly modifying their production environment.

As the creator of SaaSykit, a Laravel SaaS starter kit that uses Filament for both admin and user dashboards, I've been navigating the Filament ecosystem for quite some time.

SaaSykit's website itself is built using SaaSykit, so it also uses Filament, and I have multiple other sites using it as well. The risk of mixing up environments became a constant concern, so I decided to build a solution: Filament Oops.

Why Filament Oops?

When developing, especially when testing new features or updating records, there’s always a chance of accidentally targeting a production database instead of a local or staging one. Filament Oops solves this by displaying a clear warning in the Filament panel if you’re in a production environment. This way, there’s no room for mistakes.

Filament Oops uses the APP_ENV environment variable to detect your current environment. When the panel is running in production, a bold “Production” warning becomes visible, ensuring you always know when you're working on live data.

Quick Setup: Adding Filament Oops to Your Project

Adding Filament Oops to your Filament setup is straightforward:

1. First, require the package through Composer:

   composer require saasykit/filament-oops

2.  Then, add the FilamentOopsPlugin to your Filament plugin list. Open your FilamentServiceProvider file (usually located in app/Providers/Filament/AdminPanelProvider.php) and add the following:
   

   class AdminPanelProvider extends PanelProvider
   {
       public function panel(Panel $panel): Panel
       {
           return $panel
               // some other configurations
               ->plugins([
                   FilamentOopsPlugin::make(),  // Add this line
               ]);
       }
   }

Customizing Environment Names and Colors

By default, Filament Oops identifies environments based on APP_ENV and provides a warning for production. However, you can personalize the environment names and colors. For instance, you may want to highlight your local environment in green. Here’s how to do it:

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            // some other configurations
            ->plugins([
                FilamentOopsPlugin::make()->addEnvironment('local', 'Local', '#008000'),  // Add this line
            ]);
    }
}

Optional: Customize the Views

You can also publish the views if you want to tailor the warning’s appearance to match your dashboard style:

php artisan vendor:publish --tag="filament-oops-views"

This will give you full control over the display of the warning message, making sure it stands out or blends in according to your needs.

Conclusion

Filament Oops was born out of my own need to prevent accidental modifications on live systems while developing SaaSykit and other projects. It’s a lightweight, easy-to-install package that could save you from costly mistakes. Give Filament Oops a try and stay safe while you work on your Filament projects!

Keep building! 🤘