# Livewire

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

<figure><img src="https://2873457055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ51SrLj6qvIRejC1XD%2Fuploads%2F7uZSglQyhVO6YX6J9bUn%2Flivewire-connection.png?alt=media&#x26;token=cc73e596-f111-4757-872b-bfcb871e7018" alt=""><figcaption></figcaption></figure>

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:

{% code title="resources/views/livewire/counter.blade.php" %}

```html
<div>
    <h1>{{ $count }}</h1>
 
    <button wire:click="increment">+</button>
 
    <button wire:click="decrement">-</button>
</div>
```

{% endcode %}

{% code title="app/Livewire/Counter.php" %}

```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');
    }
}
```

{% endcode %}

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.&#x20;

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:

<figure><img src="https://2873457055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ51SrLj6qvIRejC1XD%2Fuploads%2FQW9hHzgUpQXw9SRReqD2%2Funnamed.png?alt=media&#x26;token=7433c093-0177-46e5-a403-3cf0dc146daf" alt=""><figcaption></figcaption></figure>

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:

```php
'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:

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.inspector.dev/guides/laravel/livewire.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.