Laravel DevLogger Dashboard

A beautiful, feature-rich dashboard for managing Laravel DevLogger records with IDE integration and advanced filtering capabilities.

Features

Stunning UI - Modern, responsive design with dark mode support
Advanced Search & Filtering - Search by message, exception class, file path, level, status, and date range
IDE Integration - Click to open files directly in your IDE (VS Code, PhpStorm, Sublime, Atom)
Real-time Statistics - Dashboard overview with log counts and status summaries
Secure Access - Environment-based access control with authentication and authorization
Live Updates - Built with Laravel Livewire for reactive user experience
Mobile Responsive - Works perfectly on all device sizes
Dark Mode - Beautiful dark theme with automatic persistence

Requirements

PHP 8.1+
Laravel 10.0+, 11.0+ or 12.0+
Laravel Livewire 3.0+
onamfc/laravel-devlogger package

Installation

Install the package via Composer:

  composer require onamfc/laravel-devlogger-dashboard

Publish the configuration file:

  php artisan vendor:publish --tag=devlogger-dashboard-config

(Optional) Publish the views for customization:

  php artisan vendor:publish --tag=devlogger-dashboard-views

(Optional) Publish the assets:

  php artisan vendor:publish --tag=devlogger-dashboard-assets

Configuration

The package configuration is located at config/devlogger-dashboard.php. Key configuration options include:

Environment Access Control

'allowed_environments' => [
    'local',
    'staging',
    'development'
],

Authentication & Authorization

'require_auth' => env('DEVLOGGER_DASHBOARD_AUTH', true),
'authorization_gate' => env('DEVLOGGER_DASHBOARD_GATE', null),
'allowed_ips' => env('DEVLOGGER_DASHBOARD_IPS') ? explode(',', env('DEVLOGGER_DASHBOARD_IPS')) : [],

IDE Integration

'ide' => [
    'default' => env('DEVLOGGER_IDE', 'vscode'),
    'handlers' => [
        'vscode' => 'vscode://file/{file}:{line}',
        'phpstorm' => 'phpstorm://open?file={file}&line={line}',
        'sublime' => 'subl://open?url=file://{file}&line={line}',
        'atom' => 'atom://core/open/file?filename={file}&line={line}',
    ]
],

Environment Variables

Add these to your .env file:

# Dashboard Configuration
DEVLOGGER_DASHBOARD_PREFIX=devlogger
DEVLOGGER_DASHBOARD_AUTH=true
DEVLOGGER_DASHBOARD_GATE=null
DEVLOGGER_DASHBOARD_IPS=

# IDE Configuration
DEVLOGGER_IDE=vscode
DEVLOGGER_BASE_PATH=/path/to/your/project
DEVLOGGER_SHOW_FILE_PREVIEW=true

# UI Configuration
DEVLOGGER_THEME=dark
DEVLOGGER_BRAND_NAME="DevLogger Dashboard"
DEVLOGGER_AUTO_REFRESH=false

Usage

Accessing the Dashboard

Once installed, visit /devlogger in your browser (or your configured route prefix). The dashboard will only be accessible in allowed environments and to authenticated users.

IDE Integration Setup

VS Code

Install the "Open in Application" extension or similar
The dashboard will generate vscode://file/path/to/file:line URLs
Click any file path in the dashboard to open it directly in VS Code

PhpStorm

Enable "Remote call" in PhpStorm settings
The dashboard will generate phpstorm://open?file=path&line=number URLs
Click any file path to open it in PhpStorm

Other IDEs

Configure your IDE to handle custom URL schemes, or use the "Copy Path" button as a fallback.

Authorization Gates

You can create a custom authorization gate to control dashboard access:

// In your AuthServiceProvider
Gate::define('access-devlogger-dashboard', function ($user) {
    return $user->hasRole('developer') || $user->email === 'admin@example.com';
});

Then set in your .env:

DEVLOGGER_DASHBOARD_GATE=access-devlogger-dashboard

Custom Middleware

The package includes DevLoggerDashboardMiddleware which handles:

Environment checking
IP allowlisting
Authentication verification
Authorization gate checking

You can extend or replace this middleware by binding your own implementation.

Features Overview

Dashboard Statistics

Total log count
Today's logs
Error and warning counts
Open vs resolved status counts

Advanced Filtering

Search across message, exception class, file path, and request URL
Filter by log level (emergency, alert, critical, error, warning, notice, info, debug)
Filter by status (open, resolved)
Date range filtering
Sortable columns

Log Management

View detailed log information
Mark logs as resolved or reopen them
Delete individual logs or bulk delete
Copy file paths to clipboard
Open files directly in your IDE

File Preview

View code context around the error line
Syntax highlighting for better readability
Highlighted target line where the error occurred

Security Considerations

Environment Restriction: Only accessible in configured environments
Authentication Required: Users must be logged in (configurable)
Authorization Gates: Optional fine-grained access control
IP Allowlisting: Optional IP-based access restriction
No Public Access: Designed specifically for development environments

Customization

Views

Publish the views to customize the UI:

  php artisan vendor:publish --tag=devlogger-dashboard-views

Views will be published to resources/views/vendor/devlogger-dashboard/.

Styling

The dashboard uses Tailwind CSS with a custom configuration. You can override styles by publishing the views and modifying the templates.

Adding Custom Actions

You can extend the Livewire components to add custom functionality:

// Create your own component extending the base
class CustomLogDashboard extends \Onamfc\DevLoggerDashboard\Http\Livewire\LogDashboard
{
    public function customAction()
    {
        // Your custom logic here
    }
}

API Reference

Services

IdeService

Handles IDE URL generation:

$ideService = app(\Onamfc\DevLoggerDashboard\Services\IdeService::class);
$url = $ideService->generateIdeUrl('/path/to/file.php', 123);

FileService

Handles file preview generation:

$fileService = app(\Onamfc\DevLoggerDashboard\Services\FileService::class);
$preview = $fileService->getFilePreview('/path/to/file.php', 123, 10);

Troubleshooting

Dashboard Not Accessible

Check that you're in an allowed environment
Verify authentication is working
Check IP allowlist configuration
Ensure the route prefix is correct

IDE Links Not Working

Verify your IDE supports custom URL schemes
Check the IDE configuration in the config file
Ensure file paths are absolute
Try the "Copy Path" fallback option

File Previews Not Showing

Check file permissions
Verify the base path configuration
Ensure files exist at the specified paths
Check the show_preview configuration

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This package is open-sourced software licensed under the MIT license.

Support

If you encounter any issues or have questions, please open an issue on the GitHub repository.