Flare ❤️ Livewire

Molti sviluppatori Laravel usano Livewire per costruire i loro frontend interattivi. Scrivi un po' di PHP, aggiungi qualche attributo wire:click, e le cose funzionano e basta. È fantastico.

Ma quando qualcosa va storto? È lì che diventa doloroso. I frame dello stack trace puntano a nomi di file con hash nella cache di compilazione di Livewire. I componenti possono essere annidati in altri componenti, creando una gerarchia complessa. Non hai visibilità su quale componente sia in esecuzione e quando, né su quanto tempo stia impiegando. I tuoi componenti sono praticamente invisibili alla maggior parte degli strumenti di debug.

Abbiamo integrato un profondo supporto per Livewire in Flare. Diamo un'occhiata a cosa ti offre.

Componenti Livewire nelle tue tracce

Quando apri una traccia per una pagina che usa Livewire, non vedi solo la richiesta HTTP. Vedi ogni componente coinvolto, annidato nella timeline esattamente dove è stato eseguito.

Supponiamo che tu abbia una pagina con una task board. La traccia mostra la gerarchia completa: TaskBoard viene montato, attiva tre componenti TaskColumn, e ciascuno di questi renderizza i propri figli TaskCard. Le query al database compaiono annidate sotto il componente che le ha eseguite.

Che tu usi un componente Livewire regolare con una vista separata, un componente solo classe con un metodo render inline, o un componente single-file, Flare lo comprende. Ottieni la stessa visibilità e gli stessi insight indipendentemente da come strutturi i tuoi componenti.

Analisi fase per fase

Ogni componente Livewire attraversa un ciclo di vita: mounting, hydrating, chiamata di metodi, rendering e dehydrating. Flare lo suddivide per te.

Ogni fase ha il proprio span con il timing. Così puoi vedere immediatamente se un componente sta passando tempo nella fase di mount, in quella di render, o da qualche altra parte.

Chiamate ai metodi

Tornando alla nostra task board, quando un utente clicca su una card per contrassegnarla come completata, viene eseguito il metodo toggleStatus del componente TaskCard. Flare registra quella chiamata come span a sé stante, con il nome del metodo e i parametri (se presenti). Come per qualsiasi altro span, puoi vedere span annidati per query al database o altre operazioni che avvengono durante quella chiamata al metodo.

Componenti aggregati

Flare aggrega anche i componenti attraverso le tracce, trattandoli come entità di primo livello a sé stanti.

Ottieni una panoramica di tutti i tuoi componenti Livewire con i loro tempi medi per fase e il numero di tracce in cui compaiono. Se un componente è costantemente lento, salterà subito all'occhio.

Flare collega ogni componente al suo contesto, in entrambe le direzioni. Puoi vedere cosa utilizza il componente:

• Quali route lo renderizzano
• Quali view lo includono
• Quali altri componenti Livewire lo includono

E cosa utilizza il componente:

• Quali query esegue
• Quali view renderizza
• Quali componenti renderizza
• E altro ancora

Questi link sono sempre relativi al componente e mostrano il tempo speso in ciascuno, insieme alla frequenza con cui sono stati chiamati i link annidati o genitori. Così puoi vedere rapidamente se un componente è lento a causa delle query che esegue, delle view che renderizza o degli altri componenti che include.

Tracciamento degli errori

Quando si verifica un errore durante una richiesta Livewire, Flare ti mostra l'URL originale su cui si trovava l'utente, quale componente era coinvolto, i suoi dati e stato, e quale metodo era in chiamata. Tutto il contesto di cui hai bisogno, proprio lì.

Stack trace per componenti single-file

Livewire v4 ha introdotto i componenti single-file, dove sia la classe PHP che il template risiedono in un unico file Blade. Bello! Ma internamente, Livewire li compila in file PHP con hash. Quindi quando si verifica un errore, lo stack trace punta a qualcosa come a4f8e2c1.php. Non proprio utile.

Flare li mappa di nuovo al file sorgente originale. Il tuo stack trace punta al file .blade.php effettivo, al numero di riga corretto. Nessuna configurazione necessaria.

Vuoi saperne di più su come funziona? Dai un'occhiata alla nostra analisi approfondita sugli interni dei componenti single-file di Livewire e su come ci integriamo con essi: Come Flare gestisce i componenti single-file di Livewire v4.

I piccoli dettagli

Qualche altro dettaglio che riteniamo importante:

• Gli asset JavaScript di Livewire sono esclusi dalle tracce. Le richieste per livewire.js non inquineranno i tuoi dati sulle performance.
• I componenti rumorosi possono essere ignorati. Se hai un componente che viene eseguito spesso e non è rilevante per il monitoraggio delle performance, puoi escluderlo dalla raccolta.
• Span minimali per i componenti possono essere abilitati. Invece di mostrare le fasi di mount, render e dehydrate separatamente, vedrai un solo span per l'intero componente. Questo è utile se vuoi mantenere le tue tracce più semplici e non ti interessa la suddivisione in fasi.
• Sono supportati sia Livewire v3 che v4. API interne diverse, stessa esperienza.

Per iniziare

Tutto questo funziona out of the box. Installa spatie/laravel-flare, e se Livewire è nel tuo progetto, le integrazioni si attivano automaticamente.

Usiamo Livewire ogni giorno. Ci siamo assicurati che Flare lo comprenda tanto bene quanto noi.

Buon debugging!