Livewire

Monitor Livewire components execution and state

Requirements

• Livewire 3.x

The Problem

Livewire is a full-stack framework in Laravel that makes it easy to create reactive interfaces without writing any Javascript, just using PHP.

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.

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. 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.

Inspector Configuration

To solve this problem the Inspector Laravel package includes a specifc configuration to monitor Livewire components.

When the user interact with Livewire components a dedicated 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.

Ignore Components

You can exclude components from being reported on Inspector listing the component classes in the inspector.livewire.ignore_components configuiration property:

'livewire' => [
    ...
    'ignore_components' => [
        // \App\Livewire\MyComponent::class
    ],
],

Livewire Path

In order to make Inspector able to recognize the execution of livewire components instead of normal HTTP requests you should keep in sync the Livewire URL with the Inspector configuration. The Livewire URL is customizable, so if you use a custom path instead of the default one, you should change the Inspector configuration accordingly:

'livewire' => [
    ...
    'path' => env('INSPECTOR_LIVEWIRE_PATH', '/livewire/update'),
    ...
],