Guide d'adoption d'Inertia.js : présentation, exemples et alternatives

Écrit par Rahul Chhodde✏️

Les frameworks frontend modernes se marient bien avec leurs frameworks full-stack dédiés, comme React avec Next.js, Vue avec Nuxt.js et Svelte avec SvelteKit. Mais la même facilité d'utilisation et la même prise en charge prête à l'emploi semblent impossibles lors de l'association d'une solution frontend moderne comme React avec un backend traditionnel ou un framework côté serveur comme Laravel.

Cet écart d'adaptabilité entre les solutions frontend JavaScript et les frameworks backend traditionnels est comblé par Inertia.js. Dans ce guide d'adoption, nous apprendrons comment utiliser Inertia pour créer des applications monopage (SPA) avec un framework backend traditionnel et une interface JavaScript moderne tout en conservant le routage côté serveur.

Qu’est-ce qu’Inertia.js ?

Inertia.js est un outil qui permet aux développeurs de créer des SPA modernes avec des frameworks frontend et backend populaires sans avoir besoin d'une API entre les deux. Créée en 2019 par Jonathan Reinink, l'idée principale derrière Inertia était de simplifier le processus de création de SPA modernes tout en tirant parti des frameworks côté serveur existants.

En termes plus simples, Inertia fonctionne comme un ciment qui maintient ensemble vos frameworks côté serveur et côté client, garantissant une communication efficace entre le backend et le frontend. Avec Inertia, au lieu de conserver deux bases de code différentes pour le frontend et le backend ou côté serveur, vous développez l'intégralité de l'application dans une seule base de code comme un monolithe.

Comment Inertia.js a-t-il évolué au fil du temps ?

Initialement, Inertia ne prenait en charge que Vue et Laravel. Avec ses versions ultérieures, il a évolué et étendu sa prise en charge à davantage de frameworks.

Le monolithe Inertia moderne fournit des fonctionnalités importantes telles que le rendu côté serveur (SSR), la gestion automatisée des versions des actifs, le chargement paresseux des composants de page, la prise en charge de TypeScript, etc. Nous explorerons sa prise en charge du framework plus tard tout en discutant de l'intégration du framework.

Comment fonctionne Inertia.js

L'inertie fonctionne comme un adaptateur entre le frontend et le backend. Il diffère des SPA classiques sur les aspects suivants :

• Maintient le routage côté serveur tout en offrant une expérience de type SPA
• Remplace les rechargements d'une page entière par de petites requêtes de récupération
• Reçoit les données JSON en retour du serveur
• Nécessite moins de JavaScript pour l'hydratation

Lorsqu'une requête est effectuée à partir du navigateur à l'aide d'une application basée sur Inertia, elle atteint d'abord le backend. En conséquence, une réponse Inertia est créée, renvoyant d'abord un document HTML complet avec la bibliothèque JavaScript Inertia au navigateur via le client Inertia.

Pour les navigations ultérieures, le client Inertia effectue des requêtes de récupération et reçoit en retour des données JSON du serveur. À l'aide de ces données reçues, le client met ensuite à jour le frontend et les modifications sont reflétées sur l'application sans rechargement complet de la page.

Voici un organigramme expliquant tout ce processus de manière visuelle :

Lectures complémentaires :

• Introduction à Inertia.js

Pourquoi choisir Inertia.js ?

Si vous êtes dans une situation où vous devez utiliser un framework backend traditionnel pour votre SPA, mais que vous avez la liberté de gérer le frontend comme vous le souhaitez, vous devriez envisager d'utiliser Inertia ou un outil similaire.

Inertia est fait sur mesure pour Laravel et offre une plus grande stabilité dans les projets Laravel. Si vous êtes un développeur Laravel et que vous souhaitez faire plus que ce que propose par défaut le modèle Blade, Inertia est quelque chose que vous voudrez peut-être essayer.

Vous pouvez explorer d'autres cas d'utilisation dans lesquels Inertia pourrait être votre ami. Les deux sections suivantes couvrent certains avantages et inconvénients de l'utilisation d'Inertia, ce qui vous aidera à prendre une décision éclairée quant à son choix pour le développement de votre application.

Inconvénients d'Inertia.js

Il existe certains inconvénients connus des SPA en général dont nous ne discuterons pas ici. Au lieu de cela, nous aborderons les inconvénients d'Inertia en tant qu'utilitaire de développement.

Moins flexible

Avec Inertia, vous gérez le frontend et le backend de votre application dans une seule base de code. Ce couplage étroit rend Inertia inadapté aux projets qui exigent de maintenir séparément le frontend et le backend pour une meilleure maintenabilité, une séparation des préoccupations, une évolutivité, un développement indépendant, une flexibilité de la pile technologique et d'autres raisons similaires.

Expérience de développeur

L'utilisation d'un outil comme Inertia ajoute un utilitaire supplémentaire à votre pile pour explorer et apprendre. Comprendre les modèles et les conventions spécifiques à l'inertie nécessite une courbe d'apprentissage modérée, ce qui peut être un peu ennuyeux et prendre beaucoup de temps.

Étant donné que l'adaptation à des outils comme Inertia pour le frontend et le backend n'est pas encore courante, il n'existe pas de manière standard de faire les choses avec eux. Par conséquent, s’éloigner d’Inertia nécessiterait une refactorisation importante, en particulier sur le frontend.

De plus, la complexité des tests, en particulier pour les tests API et unitaires, est vouée à augmenter puisque les frontières entre frontend et backend coïncident dans un monolithe.

Petite communauté

Inertia compte plus de 6 000 étoiles sur GitHub et plus de 85 contributeurs. Son adaptateur Laravel compte plus de 2 000 étoiles. Toutes ces statistiques combinées sont bien inférieures à celles des outils de la même catégorie qui n'offrent pas autant de fonctionnalités et de support de framework qu'Inertia.

Il peut donc y avoir des circonstances dans lesquelles vous souhaitez construire quelque chose de spécifique avec et ne trouvez pas suffisamment de références et de guides à suivre.

Voir le tableau ci-dessous pour une comparaison frontale entre Inertia.js et certains de ses concurrents comme Livewire.

Lectures complémentaires :

• Livewire vs Inertia.js : comparaison des interfaces Laravel

Considérations techniques

Rendre votre application hors ligne en premier peut être compliqué avec Inertia, car établir une stratégie de mise en cache judicieuse n'est pas simple avec cet outil. Vous devez également garder à l'esprit qu'Inertia, par défaut, envoie le composant pleine page à chaque requête, augmentant ainsi la taille de la charge utile, ce qui peut être résolu avec des rechargements partiels.

Avantages d'Inertia.js

L'inertie présente certains avantages généraux par rapport aux SPA traditionnels rendus côté client. Discutons de certaines de ses principales forces une par une.

Intégration transparente

Inertia s'intègre parfaitement aux frameworks frontend et backend populaires et fournit un support direct pour Vue dans ses versions de démonstration. Les frameworks et bibliothèques pris en charge, à la fois frontend et backend combinés, incluent Laravel, Rails, Phoenix, Django, React, Vue et Svelte.

Laravel vous permet de créer vos actifs avec Vite, vous offrant une expérience de développement beaucoup plus rapide et plus productive que Laravel Mix basé sur Webpack. Le regroupement d'actifs basé sur Vite convient parfaitement si votre objectif est de mettre en œuvre une interface basée sur JavaScript.

Lectures complémentaires :

• Premiers pas avec Inertia.js, Vue.js et AdonisJs
• Création d'une application monopage avec Laravel et Vue

Développement simplifié

Malgré une expérience de développement légèrement médiocre comme décrit ci-dessus, Inertia offre une intégration simplifiée, éliminant le besoin d'une API distincte pour faire fonctionner ensemble le frontend et le backend. Inertia vous permet d'utiliser des kits de démarrage et fournit des guides d'installation manuelle pour configurer des environnements côté client et côté serveur pour le développement.

Performance

Au lieu d'envoyer au client du HTML entièrement rendu par le serveur avec un énorme package JavaScript, les applications Inertia reçoivent un shell HTML minimal avec des données JSON initiales qui s'affichent comparativement plus rapidement sur le client.

Cela rend les applications basées sur Inertia légèrement meilleures en termes de performances initiales sans complexité supplémentaire par rapport à un SPA rendu côté client classique. Il ajoute également à une UX globale de meilleure qualité et améliore le First Contentful Paint, une métrique importante de Core Web Vital.

Lectures complémentaires :

• Bonnes pratiques Core Web Vitals pour les SPA

Optimisé pour le référencement

Les applications basées sur l'inertie utilisent le routage côté serveur, ce qui permet d'obtenir des URL plus soignées et facilement explorables. Cela rend la gestion des métadonnées pour chaque page assez simple. De plus, comme indiqué dans le dernier point, ces applications ont probablement de meilleurs scores FCP en raison de la petite quantité de données initiales envoyées au client.

La combinaison de ces deux fonctionnalités permet d'obtenir un meilleur référencement et donne aux applications Inertia.js un avantage sur les SPA traditionnels.

Astuce : Si le rendu côté client (CSR) a un impact négatif sur la métrique FCP, vous pouvez opter pour une application entièrement rendue par le serveur avec le plugin SSR d'Inertia.js pour améliorer le score.

Taille du paquet

Étant donné qu'Inertia.js agit comme un adaptateur entre le frontend et le backend, il est bien compact (comme il se doit), ne pesant qu'environ 15 Ko minifié et gzippé.

Documentation

La documentation Inertia vous permet de démarrer immédiatement, en particulier lorsque vous utilisez Laravel comme framework backend. Il contient également un guide de mise à niveau pour les versions existantes et couvre les concepts généraux aux concepts avancés en un seul endroit.

Premiers pas avec Inertia.js

Apprenons comment configurer Inertia avec deux des solutions frontend et backend les plus populaires : un backend basé sur Laravel avec un frontend alimenté par React. Vous pouvez trouver tout le code couvert dans ce didacticiel dans ce référentiel GitHub.

Notez que cette configuration n'implique pas l'utilisation de TypeScript par souci de simplicité.

Installation côté serveur

En supposant que Laravel soit installé sur votre machine, créons un nouveau projet Laravel en utilisant la commande d'installation de Laravel :

laravel new

Vous devriez voir quelque chose comme ci-dessous dans votre terminal de développeur :

Après avoir exécuté cette commande dans le terminal et fourni un nom pour votre projet, le programme d'installation vous demandera de choisir un kit de démarrage et un framework de test, d'initialiser un dépôt Git et de suivre d'autres logistiques de configuration.

Les kits de démarrage comme Breeze ou Jetstream fournissent des échafaudages prêts à l'emploi basés sur Inertia.js avec une application de démonstration, mais nous ne voulons pas de cela. Nous allons plutôt configurer les choses à partir de zéro.

Lectures complémentaires :

• La pile Inertia-React de Laravel Breeze contre Next.js et Gatsby
• Laravel vs AdonisJs : lequel devriez-vous utiliser ?

À la fin des étapes d'installation, vous serez invité à choisir une base de données. J'ai choisi pgsql car j'utilise PostgreSQL pour expliquer cet article. Choisissez le vôtre en fonction de vos préférences de base de données.

Ensuite, nous devrions installer l'intégration Inertia.js pour Laravel en exécutant la commande composer suivante dans le terminal :

composer require inertiajs/inertia-laravel

La commande ci-dessus installera l'adaptateur Laravel pour Inertia et ses dépendances. Cela préparera également le terrain pour que Laravel et Inertia travaillent ensemble.

Après cela, ajoutons le middleware Inertia pour gérer les requêtes Inertia dans Laravel. Utilisez la commande artisanale suivante pour ce faire :

laravel new

Installation côté client

Au lieu des modèles Blade par défaut de Laravel, nous utiliserons React pour gérer nos pages et nos composants. Plaçons-nous dans notre dossier de projet et installons React et React DOM à l'aide de la commande suivante. Utilisez le gestionnaire de packages Node de votre choix pour ce faire :

composer require inertiajs/inertia-laravel

Installons également le plugin React de Vite en tant que dépendance de développement, puisque nous utiliserons Vite comme gestionnaire d'actifs tout au long du projet :

php artisan inertia:middleware

Enfin, ajoutez le support Inertia pour React à l'aide de la commande ci-dessous :

pnpm add react react-dom

J'utilise également Tailwind CSS avec cette configuration, qui est complètement facultative. Si vous souhaitez également installer Tailwind CSS, cela implique les mêmes étapes que vous suivez lors de l'installation de Tailwind CSS avec une application React ou Vue.

Configuration

Tout d'abord, localisez le fichier app.js dans le répertoire resources/js, renommez-le en app.jsx et remplacez son contenu par ce qui suit :

pnpm add --save-dev @vitejs/plugin-react

Les modifications ci-dessus aideront Inertia à identifier nos pages et à les relier aux itinéraires corrects.

Ensuite, renommez le fichier Welcome.blade.php dans le répertoire resources/view en app.blade.php et remplaçons son contenu par ce qui suit :

pnpm add @inertiajs/react

Notez que dans la structure HTML de base d'une page Web, ce fichier contient certaines directives Inertia et Vite nécessaires pour injecter certains scripts pour exécuter des rechargements, ajouter des scripts, etc.

Ensuite, ajoutez le middleware requis dans le fichier bootstrap/app.php pour gérer les requêtes spécifiques à Inertia :

import { createInertiaApp } from "@inertiajs/react";
import { createRoot } from "react-dom/client";
import "../css/app.css";

createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob("./Pages/**/*.jsx", { eager: true });
    return pages[`./Pages/${name}.jsx`];
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />);
  },
});

Configurons également le plugin React pour qu'il fonctionne avec Vite et profite des avantages qu'il offre :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  @viteReactRefresh
  @vite('resources/js/app.jsx')
  @inertiaHead
</head>
<body>
  @inertia
  <div id="app"></div>
</body>
</html>

Enfin, exécutons Laravel et React tous deux en utilisant les commandes suivantes :

<?php
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
use App\Http\Middleware\HandleInertiaRequests;

return Application::configure(basePath: dirname(__DIR__))
  ->withRouting(
    web: __DIR__.'/../routes/web.php',
    commands: __DIR__.'/../routes/console.php',
    health: '/up',
  )
  ->withMiddleware(function (Middleware $middleware) {
    $middleware->web(append: [
        HandleInertiaRequests::class,
    ]);
  })
  ->withExceptions(function (Exceptions $exceptions) {
    //
  })->create();

Nous pouvons écrire un script Shell pour exécuter ces commandes ensemble dans une seule fenêtre de terminal, mais pour garder les choses simples et faciles, exécutons-les dans deux terminaux distincts pour l'instant.

Une fois ces commandes exécutées avec succès, vous pouvez voir les deux URL locales. Exécutez celui de Laravel pour voir à quoi ressemble votre application Laravel. Et avec cela, vous avez réussi à configurer une application de base avec Inertia !

Principales fonctionnalités d'Inertia.js

Vous pouvez faire beaucoup de choses avec votre application Inertia. Jetons un coup d'œil à certaines des fonctionnalités remarquables que vous devriez connaître.

Pages et mises en page

Pour mieux organiser les différentes mises en page et pages, créez deux sous-répertoires dans le répertoire resources/js. Vous pouvez également gérer vos composants dans un répertoire séparé ici et les utiliser dans vos pages à votre guise.

Voici un exemple rapide de notre mise en page principale :

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    laravel({
      input: "resources/js/app.jsx",
      refresh: true,
    }),
    react(),
  ],
  resolve: {
    alias: {
      "@": "/resources/js",
    },
  },
});

Il s'agit essentiellement d'un composant qui sert de mise en page de base et est donc placé dans un dossier de mises en page dédié. Le MainLayout peut désormais être utilisé comme composant dans nos pages comme indiqué dans le code suivant :

laravel new

Voici un aperçu de la façon dont MainLayout.jsx et About.jsx peuvent former ensemble une page de travail avec les styles fournis par Tailwind CSS :

Liens et routage

Avec le routage Laravel traditionnel, il est facile de créer de nouveaux itinéraires et d'accrocher les pages que nous avons découvertes dans le dernier segment. Même s’il n’est pas basé sur des fichiers, le routage est assez simple à gérer. Si vous avez travaillé avec des frameworks backend basés sur JavaScript comme Express et Fastify, vous connaissez déjà le fonctionnement du routage dans Laravel.

Accédez au fichier routes/web.php, ajoutez de nouvelles routes et affichez la page associée à l'aide de la méthode de rendu d'Inertia, comme indiqué dans le code ci-dessous :

composer require inertiajs/inertia-laravel

La liaison dynamique dans Inertia est similaire à React et Next, et peut être réalisée à l'aide du composant Link d'Inertia, comme indiqué ci-dessous :

php artisan inertia:middleware

La capture d'écran ci-dessous démontre le comportement dynamique de type SPA de la navigation que nous venons d'apprendre à créer dans les blocs de code ci-dessus :

Requêtes HTTP (requêtes GET/POST/non-GET)

Inertia fournit un hook useForm pour travailler avec les requêtes GET et POST afin de gérer les soumissions d'état et de formulaire. Il fournit également le hook usePage, qui vous permet d'accéder aux données partagées transmises du serveur au client, comme un message de réussite ou d'échec.

Voici un exemple simple qui effectue des requêtes GET et POST pour charger et envoyer des données utilisateur. Notez que la requête GET est implicitement gérée par Inertia, alors que nous effectuons des requêtes POST avec la méthode post depuis le hook useForm pour envoyer des données au serveur :

pnpm add react react-dom

En utilisant cette approche, nous pouvons créer une page pour obtenir une liste de données de la base de données, l'afficher dans un tableau HTML et également ajouter davantage de ces données à la base de données à l'aide d'un formulaire comme indiqué ci-dessous :

Indicateurs de progrès

Inertia.js fournit une indication de progression basée sur NProgress. Vous pouvez l'activer lors de la création du fichier App.jsx et y fournir des paramètres de configuration pour l'indicateur de progression :

pnpm add --save-dev @vitejs/plugin-react

Si vous n'êtes pas familier avec ce à quoi ressemblent les animations de chargement de NProgress, en voici un petit aperçu :

Intégrations de bases de données

Si vous travaillez régulièrement avec Laravel, il ne vous faudra pas grand-chose pour intégrer et consommer une base de données dans votre configuration Inertia. Ajoutez simplement les informations d'identification de base de données requises dans le fichier .env, assurez-vous que vous utilisez le bon pilote de base de données, consultez le fichier config/database.php et vous êtes prêt à partir.

Avec une base de données existante, vous pouvez utiliser le système de migration de Laravel pour définir le schéma de base de données requis. Je n'avais pas de base de données, j'en ai donc créé une et l'ai remplie avec de fausses données utilisateur en utilisant le mécanisme Laravel Seeder pour l'afficher sur le frontend. Voici quelques étapes que j'ai suivies par la suite :

• J'ai créé un modèle pour mes données utilisateur dans le répertoire de l'application et j'ai également créé un contrôleur HTTP pour gérer les requêtes de base de données concernant ces données
• J'ai créé une page Utilisateurs dans le répertoire resources/js/Pages et lui ai fourni un accessoire qui prend un tableau utilisateur. Ce tableau utilisateur obtient les données requises via une requête GET effectuée intrinsèquement avec Inertia. Nous pouvons également faire des requêtes POST pour ajouter les données à la base de données
• Définir une route utilisateur dans le fichier routes/web.php et y associer notre contrôleur HTTP

Pour quelqu'un qui découvre l'écosystème Laravel ou qui ne travaille pas souvent avec des bases de données avec Laravel, cela peut prendre un peu plus que cela lors de la migration et du remplissage de la base de données. Dans de tels cas, vider le cache de configuration peut grandement aider à éliminer les erreurs causées par les options de configuration mises en cache.

Cas d'utilisation d'Inertia.js

Les applications potentielles d’Inertia sont nombreuses et variées. L'association de Laravel avec une interface JavaScript moderne à l'aide d'Inertia simplifie le développement full-stack pour les applications monolithiques dotées de fonctionnalités backend robustes.

Bien qu'il ne convienne pas à toutes les équipes ou situations, voici quelques cas d'utilisation dans lesquels vous pourriez trouver qu'Inertia est une bonne option :

• Applications qui ne veulent pas s'appuyer sur Blade pour la création de modèles et qui souhaitent des solutions robustes pour gérer les fonctionnalités côté client
• Anciennes applications qui utilisent Laravel comme backend mais souhaitent profiter des bibliothèques modernes principalement conçues et maintenues pour les frameworks frontend basés sur JavaScript
• Applications modernes qui envisagent de migrer vers un backend basé sur Laravel pour profiter de l'effet de levier offert par la technologie de serveur traditionnelle au lieu du sans serveur
• Les SPA qui souhaitent une meilleure visibilité sur les moteurs de recherche et également les bénéfices en performances du SSR
• Pour ceux qui aiment et veulent travailler à la fois avec PHP et JavaScript

Inertia.js contre Livewire contre hybride

L'inertie n'est pas la seule solution pour relier les frameworks et bibliothèques côté serveur et côté client. Livewire et Hybridly sont deux autres outils populaires avec leurs propres avantages et inconvénients. Lorsque vous comparez vos options, vous voudrez peut-être considérer :

• Communauté — Inertia.js a une communauté comparativement plus petite que Livewire mais en a une meilleure qu'Hybridly.
• Fonctionnalités — Livewire et Hybridly ne fournissent pas de support pour la mise en œuvre de frameworks frontend, tandis qu'Inertia.js est connu pour sa prise en charge des principales solutions frontend basées sur JavaScript.
• Performance — Cela dépend principalement de l'implémentation, mais les SPA basés sur Inertia.js peuvent fournir de meilleures performances perçues tandis que les applications rendues par le serveur utilisant Livewire et Hybridly peuvent être meilleures car la plupart des pages sont rendues par le serveur. .
• Documentation — Livewire et Inertia.js ont une bonne documentation par rapport à Hybridly, qui est relativement nouveau et peut encore s'améliorer.

Ce tableau fournit un aperçu utile de la façon dont ces trois éléments se comparent pour éclairer davantage votre décision :

Feature	Inertia.js	Livewire	Hybridly
Server-side framework	Laravel, Rails	Laravel only	Laravel only
Client-side framework	Vue.js, React, Svelte	None (PHP-based)	Vue.js
SPA-like experience	Yes	Yes	Yes
Server-side rendering (SSR)	Optional	Yes	Yes
Real-time updates	No (needs additional setup)	Yes	Yes
Full-page reloads	No	No	No
Learning curve	Moderate	Low	Moderate
Component-based architecture	Yes	Yes	Yes
State management	Client-side	Server-side	Both
SEO-friendly	Good	Excellent	Excellent
Backend-driven UI	Partial	Full	Full
Progressive enhancement	Limited	Yes	Yes
File uploads	Supported	Native support	Supported
Pagination	Supported	Native support	Supported
Form handling	Client-side	Server-side	Both
Authentication	Supported	Native support	Supported
Authorization	Supported	Native support	Supported
Testing	Both client & server	Server	Both client and server
Ecosystem/Community	Small	Large	Small (newer)
Performance	Very good	Good	Very good
Bundle size	Larger (due to JS framework)	Smaller	Moderate
Offline support	Possible	Limited	Possible
Mobile app development	Possible	Not ideal	Possible

Conclusion

Dans ce guide d'adoption, nous avons appris ce qu'est Inertia.js et comment il est utilisé pour créer une application hybride utilisant un framework backend traditionnel comme Laravel et une bibliothèque frontend moderne comme React.

Nous avons découvert les avantages et les inconvénients de l'utilisation d'Inertia, certaines de ses applications pratiques et un exemple pour le configurer avec Laravel. Si jamais vous êtes bloqué en suivant le guide, pensez à cloner ce référentiel GitHub pour le projet que nous avons couvert, ou déposez un commentaire et je serai heureux de vous aider.

---

Ajoutez-vous de nouvelles bibliothèques JS pour créer de nouvelles fonctionnalités ou améliorer les performances ? Et s’ils faisaient le contraire ?

Il ne fait aucun doute que les frontends deviennent de plus en plus complexes. À mesure que vous ajoutez de nouvelles bibliothèques JavaScript et d'autres dépendances à votre application, vous aurez besoin de plus de visibilité pour garantir que vos utilisateurs ne rencontrent pas de problèmes inconnus.

LogRocket est une solution de surveillance des applications frontales qui vous permet de rejouer les erreurs JavaScript comme si elles se produisaient dans votre propre navigateur afin que vous puissiez réagir plus efficacement aux bugs.

LogRocket fonctionne parfaitement avec n'importe quelle application, quel que soit le framework, et dispose de plugins pour enregistrer un contexte supplémentaire depuis Redux, Vuex et @ngrx/store. Au lieu de deviner pourquoi les problèmes surviennent, vous pouvez regrouper et signaler l'état dans lequel se trouvait votre application lorsqu'un problème est survenu. LogRocket surveille également les performances de votre application, en rapportant des mesures telles que la charge du processeur du client, l'utilisation de la mémoire du client, etc.

Construisez en toute confiance : commencez à surveiller gratuitement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!