Techniques avancées de gestion des erreurs dans TypeScript

Une gestion efficace des erreurs est essentielle pour créer des applications TypeScript robustes. Au-delà des blocs try-catch de base, TypeScript propose plusieurs techniques avancées pour gérer les erreurs avec élégance et garantir la fiabilité du code. Cet article explore certaines de ces stratégies avancées de gestion des erreurs.

1. Classes d'erreur personnalisées

La création de classes d'erreur personnalisées vous permet de représenter différents types d'erreurs avec plus de précision. Les erreurs personnalisées peuvent inclure des propriétés ou des méthodes supplémentaires, qui peuvent aider à identifier et à gérer des problèmes spécifiques.

class CustomError extends Error {
  constructor(public message: string, public code: number) {
    super(message);
    this.name = 'CustomError';
  }
}

function throwError() {
  throw new CustomError('Something went wrong', 500);
}

try {
  throwError();
} catch (error) {
  if (error instanceof CustomError) {
    console.error(`Error: ${error.message}, Code: ${error.code}`);
  } else {
    console.error('Unexpected error:', error);
  }
}

Dans cet exemple, CustomError étend la classe intégrée Error et ajoute une propriété code pour spécifier un code d'erreur.

2. Gestion des erreurs dans le code asynchrone

Le code asynchrone nécessite souvent une gestion spéciale des erreurs. L'utilisation de async et await avec les blocs try-catch peut simplifier la gestion des erreurs dans les opérations asynchrones.

async function fetchData(url: string): Promise {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new CustomError('Failed to fetch data', response.status);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    if (error instanceof CustomError) {
      console.error(`Error: ${error.message}, Code: ${error.code}`);
    } else {
      console.error('Unexpected error:', error);
    }
  }
}

fetchData('https://api.example.com/data');

Cet exemple illustre la gestion des erreurs d'un appel asynchrone fetch à l'aide de async, await et try-catch.

3. Limites d'erreur dans React avec TypeScript

Lorsque vous travaillez avec React et TypeScript, les limites d'erreur permettent de détecter les erreurs dans l'arborescence des composants et d'afficher une interface utilisateur de secours. L'implémentation de limites d'erreur avec TypeScript garantit la sécurité des types et une gestion appropriée des erreurs.

import React, { Component, ErrorInfo } from 'react';

interface Props {}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(): State {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    console.error('Error caught by boundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Dans cet exemple React, le composant ErrorBoundary détecte les erreurs dans ses composants enfants et affiche une interface utilisateur de secours si une erreur se produit.

4. Utilisation des protections de type pour les types d'erreur

Les protections de type permettent de restreindre le type d'une erreur dans TypeScript. Cela est particulièrement utile lors de la gestion d'erreurs de types différents ou provenant de sources diverses.

function isCustomError(error: any): error is CustomError {
  return error instanceof CustomError;
}

try {
  throw new CustomError('Example error', 400);
} catch (error) {
  if (isCustomError(error)) {
    console.error(`CustomError: ${error.message}, Code: ${error.code}`);
  } else {
    console.error('Unknown error:', error);
  }
}

La fonction isCustomError est un garde de type qui permet de déterminer si l'erreur détectée est une instance de CustomError.

5. Gestion centralisée des erreurs

Pour les applications volumineuses, la centralisation de la gestion des erreurs peut simplifier la gestion des erreurs et garantir la cohérence. Cela peut être réalisé à l'aide d'un middleware dans Express.js ou de gestionnaires d'erreurs globaux dans d'autres frameworks.

import express, { Request, Response, NextFunction } from 'express';

const app = express();

app.use((err: any, req: Request, res: Response, next: NextFunction) => {
  console.error('Centralized Error:', err.message);
  res.status(500).send('Internal Server Error');
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Cet exemple illustre un gestionnaire d'erreurs centralisé pour une application Express.js. Il détecte toutes les erreurs et répond avec un message générique.

Conclusion

Les techniques avancées de gestion des erreurs dans TypeScript améliorent la robustesse de vos applications en offrant plus de contrôle sur la gestion des erreurs. Les classes d'erreur personnalisées, la gestion des erreurs asynchrones, l'utilisation de limites d'erreur dans React, les protections de type et la gestion centralisée des erreurs sont des stratégies essentielles pour une gestion efficace des erreurs. La mise en œuvre de ces techniques conduira à un code plus maintenable et plus fiable.