Monitoring Laravel Livewire Components

Livewire is a full-stack framework in Laravel that makes it easy to create reactive interfaces without writing any Javascript, just using PHP. This means developers can leverage the power of Laravel and Blade templates to build dynamic UIs. You can respond to user’s actions such as form submissions, scrolling, mouse movements, or button clicks, using PHP classes and methods.

After the initial rendering of the page containing the Livewire component, Livewire binds some javascript event listeners to its components and watches for every action. Each action is sent to the server as an asynchronous API request.

The Problem

When the user clicks on a button in the UI, Livewire makes a network request to the server to interact with the PHP component associated. The server then performs the action, generates a new template and the current new state of the component, and sends it back to the client.

Take a look at the example below that implement a simple counter:

resources/views/livewire/counter.blade.php

<div>
    <h1>{{ $count }}</h1>

    <button wire:click="increment">+</button>

    <button wire:click="decrement">-</button>
</div>

app/Livewire/Counter.php

class Counter extends Component
{
    public $count = 1;

    public function increment() {
        $this->count++;
    }

    public function decrement() {
        $this->count--;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

Every click on the counter button generates an HTTP request handled by the associated PHP component. And this happen for all UI component you have in the user interface.

All these HTTP requests are routed to the default Livewire URL: /livewire/update

That's why you see tons of requests to the endpoint "POST /livewire/update" in your Inspector monitoring dashboard. So, everything under /livewire/update it's like a grey area, because you don’t have any clue of what component is behing executed, what is its state, etc.

This behaviour it’s also the reason many applications in performance sensible environments do not adopt this stack, and eventually go for a dedicated Javscript framework like Vue or React to manage reactivity entirely on the frontend side, offloading the server.

Inspector Trait

To solve this problem the Inspector Laravel package includes the LivewireInspector trait that you can attach to your Livewire PHP class.

app/Livewire/Counter.php

use Inspector\Laravel\LivewireInspector;

class Counter extends Component
{
    use LivewireInspector;

    public $count = 1;

    public function increment() {
        $this->count++;
    }

    public function decrement() {
        $this->count--;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

A new transaction category, livewire, will now appear in the Inspector dashboard:

As you can see, the transaction name is the name of the component class. This way, you’ll have all the components monitored individually.

From the individual component’s detail page, you can access the history of every time that component has been run. Any exceptions will also be attached to the component’s transaction, so everything remains clear.

Here the link to the documentation: https://docs.inspector.dev/guides/laravel/livewire

Monitor your Laravel application for free

Inspector is a Code Execution Monitoring tool specifically designed for PHP developers. You don't need to install anything on the server level, just install the Laravel package and you are ready to go.

If you are looking for HTTP monitoring, database query insights, and the ability to forward alerts and notifications into your preferred messaging environment try Inspector for free. Register your account.

Or learn more on the website: https://inspector.dev/