Drop-in floating bug/feedback report widget for Laravel apps. A small floating button opens a modal where the user picks a type (bug, suggestion, other) and writes a message. Reports are stored in your database with automatic technical context (URL, user agent, viewport, locale, authenticated user).
Part of the wire* family: themeable through the shared data-wire-theme attribute, visually coherent with wiremodal, wiretoast and wirecookies.
- PHP 8.2+
- Laravel 11+
- Alpine.js on the page
composer require edulazaro/wirebug
php artisan migrateImport the CSS after wiremodal in your bundle:
@import 'edulazaro/wiremodal/resources/css/wiremodal.css';
@import '../../vendor/edulazaro/wirebug/resources/css/wirebug.css';Drop the component in any layout (typically the logged-in app shell):
<x-wirebug />Pick the theme once on <html> (shared with the rest of the family):
<html data-wire-theme="studio">- Type: bug / suggestion / other (configurable via
config('wirebug.types')). - Message: free text, required, max 5000 chars.
- Steps to reproduce: optional free text.
- Screenshot: optional image attachment (jpg/png/gif/webp, 5MB max by default).
- Screen recording: optional, via the browser's native
getDisplayMedia+MediaRecorder(nothing records until the user clicks; zero background cost). While recording, the modal closes and a small in-app overlay shows a timer with Stop/Discard; on stop the modal reopens with the video attached (WebM/MP4, 90s / 50MB max by default, bitrate capped at 2 Mbps viarecording.bitrate,config('wirebug.recording')). The button only appears on supporting browsers (desktop). The recording lives in the page's JS context: it survives SPA-style navigation (wire:navigate), a hard reload kills it. - Email: optional, only shown to guests (authenticated users are already identified). Disable with
'ask_guest_email' => false.
URL, user agent, viewport, locale, the authenticated reporter (polymorphic reporter_type/reporter_id, morph-map aware) and referer. Disable with 'capture_context' => false.
Reports live in the wirebug_reports table of your app's database. The screenshot is stored through Laravel's Storage on the disk set in config('wirebug.uploads.disk') — any disk from your config/filesystems.php works the same (local server filesystem, s3, an S3-compatible R2 disk...). The report row keeps only the file path.
use EduLazaro\WireBug\Models\BugReport;
BugReport::new()->latest()->get(); // status = 'new'
BugReport::ofType('bug')->get();
$report->reporter; // polymorphic: who sent it (User, Client... or null for guests)<x-wirebug position="right" title="Feedback" />
{{-- Edge tab instead of the floating button --}}
<x-wirebug trigger="tab" position="bottom-right" tab-label="Feedback" />Every visible string can be overridden by prop or via the published translations. Two trigger styles:
trigger="button"(default): floating square button.positionacceptsleft(default) orright(always bottom corner).trigger="tab": small labeled tab stuck flush to the screen edge.positionacceptsbottom-right(default),bottom-left,top-rightortop-left. On viewports under 640px the label hides and only the icon shows. Label text viatab-labelprop or thetab_labeltranslation.
php artisan vendor:publish --tag=wirebug-configRoute path/middleware (add auth if the widget only lives behind login), button position, report types, guest email, context capture and table name.
php artisan vendor:publish --tag=wirebug-views
php artisan vendor:publish --tag=wirebug-css
php artisan vendor:publish --tag=wirebug-lang
php artisan vendor:publish --tag=wirebug-migrationswirebug-sentis dispatched onwindowafter a successful submit, in case the host app wants to toast or track it.
Wirebug is supported by the following sponsors. Thank you for keeping it growing:
Created by Edu Lazaro
Wirebug is open-sourced software licensed under the MIT license.