GlitchReel makes it easy for your users to report bugs directly from your web app.

When something breaks, your users can simply click a button to submit a bug report.

GlitchReel automatically captures:

• Screen recording with audio
• Console logs
• Network requests

So your team can debug issues fast, without endless back-and-forth.

Imagine Loom, but fully integrated into your web app, and also capturing network requests and console logs.

The repository is divided into 3 core components:

The admin interface where your team manages and reviews incoming bug reports.

Tech Stack:

• React + Vite + TypeScript
• TailwindCSS (with shadcn/ui components)

Key Features:

• User authentication
• Dashboard view of all recordings
• Full session playback
• Network & browser data analysis
• Settings & integration management

The SDK your users embed on their web apps to capture bug data.

Tech Stack:

• Vite + TypeScript

Core Features:

• Session recording
• Console log capture
• Network request tracking
• Browser metadata collection

Handles storage, APIs, and database management.

Tech Stack:

• Supabase (PostgreSQL, Edge Functions, Storage)

You'll need two separate .env files for the frontend and SDK:

VITE_SUPABASE_PROJECT_URL=
VITE_SUPABASE_API_KEY=

VITE_SUPABASE_PROJECT_URL=
VITE_SUPABASE_API_KEY=

No .env file is needed inside supabase/.

git clone https://github.com/sibi-sharanyan/glitchreel.git
cd glitchreel

cd app
npm install
npm run dev

The GlitchReel UI will run on port 3007.

cd integration_script
npm install
npm run build

After building, the SDK files will be available in the dist/ folder.

To make the SDK accessible for integration into your web app, you need to serve the dist/ folder using any static web server. For simplicity, you can use Live Server (VSCode extension) during initial setup:

• Install the Live Server extension.
• Open the integration_script directory in VSCode.
• Right-click on the dist/ folder and select Open with Live Server.
• This will serve your SDK at a URL like http://localhost:<port>/dist/.

⚠ Note: This server needs to be accessible by the web app that embeds the SDK. In production, you should host these files on your own static hosting (e.g., S3, Cloudflare Pages, Vercel, etc.) and use that URL when embedding.

You can self-host the entire Supabase backend locally or on your own infrastructure. Here's how:

You'll need Node.js installed (recommended version >= 18.x).

npm install -g supabase

Inside your cloned GlitchReel repo (which already contains supabase/config.toml), simply run:

supabase start

This will start the full Supabase stack locally using your provided configuration.

Once Supabase is up and running:

cd supabase
supabase db reset

This will reset and apply all required database migrations.

Run:

supabase status

You'll get:

• Project URL
• anon public key

Use these values to fill in your .env files:

VITE_SUPABASE_PROJECT_URL=<your local project URL>
VITE_SUPABASE_API_KEY=<your anon public key>

VITE_SUPABASE_PROJECT_URL=<your local project URL>
VITE_SUPABASE_API_KEY=<your anon public key>

• Open Supabase Studio locally at http://localhost:54323
• Navigate to Storage → New Bucket
• Name it:

recording-data

• Set it to Public for simplicity.

⚠️ Warning: Public buckets are recommended only for local testing. For production, configure proper access controls.

• Inside the bucket, create a folder named:

myrecs

• Go to Storage → Policies → recording-data → New Policy

Policy Details:

• Name: Allow tracking script to upload
• Action: INSERT
• Target table: storage.objects
• Expression:

bucket_id = 'recording-data'

• Check Expression: true

Once your self-hosted Supabase backend is configured, you can:

• Run the GlitchReel UI
• Serve the SDK for integration
• Use the SDK in your web app to collect bug reports
• View full user sessions with logs and network activity