AI-Powered Laravel Debugger & Error Handling #Laravel #PHP #AIDebugging

Table of Contents

Day 4: Building a Dashboard to View AI Debugging Suggestions in Laravel

In Day 3, we sent real-time AI debugging suggestions via email and Slack. Today, we’ll build an internal AI Debugging Dashboard in Laravel to store and view AI-generated error suggestions in one place.

Step 1: Create a Table to Store Suggestions

Run a migration:

php artisan make:model AIDebugLog -m

Update database/migrations/xxxx_xx_xx_create_a_i_debug_logs_table.php:

public function up()
{
    Schema::create('a_i_debug_logs', function (Blueprint $table) {
        $table->id();
        $table->text('error_message');
        $table->text('ai_suggestion')->nullable();
        $table->timestamps();
    });
}

Run:

php artisan migrate

Step 2: Update Listener to Store Suggestions

Open LogErrorListener.php and modify:

use App\Models\AIDebugLog;

public function handle(MessageLogged $event)
{
    if ($event->level === 'error') {
        $suggestion = $this->aiDebugger->analyzeError($event->message);

        // Log to file and Slack
        \Log::channel('ai_debugger')->error('AI Suggestion: ' . $suggestion);
        \Log::channel('slack_ai')->error("AI Debugger\nError: {$event->message}\nSuggestion: $suggestion");

        // Store in DB
        AIDebugLog::create([
            'error_message' => $event->message,
            'ai_suggestion' => $suggestion,
        ]);
    }
}

Step 3: Create a Controller for the Dashboard

php artisan make:controller AIDebugLogController

In app/Http/Controllers/AIDebugLogController.php:

namespace App\Http\Controllers;

use App\Models\AIDebugLog;

class AIDebugLogController extends Controller
{
    public function index()
    {
        $logs = AIDebugLog::latest()->paginate(20);
        return view('ai-debugger.index', compact('logs'));
    }
}

Step 4: Create the Dashboard View

Create the Blade view:

mkdir -p resources/views/ai-debugger
touch resources/views/ai-debugger/index.blade.php

Add:

@extends('layouts.app')

@section('content')
<div class="container">
    <h2>AI Debugging Suggestions</h2>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Error Message</th>
                <th>AI Suggestion</th>
                <th>Logged At</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($logs as $log)
                <tr>
                    <td>{{ $log->error_message }}</td>
                    <td>{{ $log->ai_suggestion }}</td>
                    <td>{{ $log->created_at->format('Y-m-d H:i') }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
    {{ $logs->links() }}
</div>
@endsection

Make sure Bootstrap is included in your layout or use any preferred CSS.

Step 5: Add Route to Access the Dashboard

In routes/web.php:

use App\Http\Controllers\AIDebugLogController;

Route::get('/ai-debugger', [AIDebugLogController::class, 'index'])->middleware('auth');

Ensure you’re authenticated before accessing the page.

Step 6: Test It

Trigger some errors (e.g. /test-error).
Visit http://127.0.0.1:8000/ai-debugger.
View AI-powered suggestions saved in the database and displayed in the table.

Next Steps

In Day 5, we’ll allow developers to filter logs by date or keyword, improving the AI debugging dashboard usability.

Post Views: 63