Monitoring Laravel Livewire Components

The Sarcasm: livewire-laravel

Let’s take a look at theLivewire framework in a sarcastic tone. The core concept of Livewire, the full-stack PHP framework for creating reactive interfaces without writing any JavaScript, is a powerful tool that simplifies the process of building dynamic UIs. However, this approach also comes with its own set of challenges.

One of the main drawbacks is the lack of flexibility when it comes to managing events and actions on UI components. The initial rendering of the page containing the Livewire component involves the binding of JavaScript event listeners to its components. These listeners listen for various user actions, such as form submissions, scrolling, mouse movements, or button clicks, and then send an asynchronous API request to the server.

While this approach allows for straightforward communication between the client and server, it can become problematic when it comes to understanding the state of the components and the actions they trigger. The server generates a new template based on the current component state, and the client receives this template along with the current new state. This information is then sent back to the client, where it is combined with the rendered content of the UI components.

The issue

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/