Logging et monitoring React

Pourquoi Logging et monitoring React ?

Dans un environnement web moderne, les applications React sont complexes et interconnectées, ce qui rend leur déboguage et la surveillance des performances plus difficiles. Les développeurs de logiciels utilisent le logging et le monitoring pour suivre l'état de l'application, identifier les erreurs et améliorer les performances. En pratique, si une utilisateur remarque une erreur ou un comportement inhabituel sur votre application React, le logging peut aider à comprendre ce qui s'est mal passé. Par exemple, si une page ne charge pas correctement, le log peut indiquer qu'une requête API a échoué ou que les données nécessaires ne sont pas disponibles.

Prerequis

• Connaissances de base en JavaScript et React
• Compréhension des concepts de state et props
• Npm installé (v6.0.0 ou supérieur)
• Terminal pour exécuter les commandes

Concepts fondamentaux

1. Logging avec React

Le logging est le processus d'enregistrement de données et d'informations sur l'état du logiciel dans un fichier, une base de données ou un autre support. En React, nous utilisons généralement console.log pour enregistrer des informations dans la console du navigateur.

// Composant simple utilisant le logging
import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    // Enregistre l'état initial du composant
    console.log('Initial state:', this.state);
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
    // Enregistre l'état après l'incrémentation
    console.log('State after increment:', this.state);
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

2. Monitoring avec React

Le monitoring est le processus de surveillance et d'analyse des performances de l'application en temps réel ou sur une période définie.

Pour un monitoring efficace, nous pouvons utiliser des bibliothèques comme React Performance.

// Utilisation de React Performance pour le monitoring
import React from 'react';
import { start, stop } from 'react-performance';

class App extends React.Component {
  componentDidMount() {
    start();
  }

  componentWillUnmount() {
    stop();
  }

  render() {
    return (
      <div>
        {/* Contenu de l'application */}
      </div>
    );
  }
}

export default App;

Mise en pratique : projet fil rouge

Dans cet exercice, nous allons créer un gestionnaire de tâches simple qui utilise des logiciels de logging et de monitoring pour suivre son état.

Étape 1 : Création du projet

npx create-react-app task-manager
cd task-manager
npm install react-performance

Étape 2 : Créer un composant TaskList

// src/TaskList.js
import React, { useState } from 'react';
import { start, stop } from 'react-performance';

const TaskList = () => {
  const [tasks, setTasks] = useState([]);
  
  useEffect(() => {
    start();
  }, []);

  useEffect(() => {
    stop();
  }, []);

  const addTask = (task) => {
    setTasks([...tasks, task]);
    console.log('Added task:', task);
  };

  return (
    <div>
      <h1>Task Manager</h1>
      <button onClick={() => addTask('New Task')}>Add Task</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
};

export default TaskList;

Étape 3 : Utiliser le composant dans App.js

// src/App.js
import React from 'react';
import TaskList from './TaskList';

function App() {
  return (
    <div className="App">
      <TaskList />
    </div>
  );
}

export default App;

Étape 4 : Exécuter le projet

npm start

Erreurs frequentes et debugging

1. TypeError: Cannot read property 'map' of undefined

Ce problème peut survenir si la variable tasks n'est pas définie correctement.

// Mauvais
const tasks = useState()[0];
const setTasks = useState()[1];

// Correct
const [tasks, setTasks] = useState([]);

2. Uncaught Error: Too many re-renders. React limits the number of renders to prevent infinite loops

Ce problème peut survenir si la fonction de mise à jour de l'état est appelée de manière récursive.

// Mauvais
const addTask = (task) => {
  setTasks([...tasks, task]);
  setTasks([...tasks, task]); // Répétition
};

// Correct
const addTask = (task) => {
  setTasks(prevTasks => [...prevTasks, task]);
};

3. Cannot read property 'map' of null

Ce problème peut survenir si la variable n'est pas initialisée correctement.

// Mauvais
const [tasks] = useState();

// Correct
const [tasks, setTasks] = useState([]);

Pour aller plus loin

1. Utilisation de Sentry pour le monitoring des erreurs

Sentry est un outil populaire pour le suivi et la résolution des bugs dans les applications.

• Documentation officielle

2. Utilisation de React Performance

React Performance est une bibliothèque qui permet d'analyser les performances de votre application.

• Documentation officielle

3. Utilisation de Redux pour le state management avancé

Redux est un outil de gestion de l'état global qui peut aider à suivre les changements dans la state de votre application.

• Documentation officielle

Défi pratique

Créez une application React qui utilise Redux et Sentry pour gérer les tâches. Assurez-vous que vous avez configuré correctement le logging et le monitoring pour identifier les erreurs et les performances de votre application.

N'oubliez pas d'inclure des commentaires détaillés dans chaque fichier pour expliquer ce que fait chaque ligne de code.