Gérer les erreurs dans Google Sheets avec Google Apps Script : Un menu personnalisé pour améliorer l’expérience utilisateur

Publié le par

Lorsque vous automatisez des processus avec Google Apps Script dans Google Sheets, il est essentiel de savoir comment gérer les erreurs. Non seulement cela permet d’améliorer la robustesse de votre script, mais cela permet aussi d’informer l’utilisateur de manière claire et structurée lorsqu’un problème survient. Dans cet article, je vais vous montrer comment mettre en place un système simple de gestion des erreurs avec un menu personnalisé.

Pourquoi est-il important de gérer les erreurs ?

Les erreurs peuvent survenir à n’importe quel moment, notamment lors de la mise à jour des données ou de l’envoi d’emails via Apps Script. Sans gestion appropriée, cela peut interrompre l’exécution du script, frustrer l’utilisateur, et rendre difficile l’identification de la cause du problème. Une bonne gestion des erreurs permet de diagnostiquer facilement ces problèmes tout en continuant à utiliser la feuille de calcul.

Créer un menu spécial pour la gestion des erreurs

Dans cet exemple, nous allons utiliser un menu personnalisé dans Google Sheets pour lancer la simulation de trois erreurs courantes. Voici le code complet :

// Variables globales 
const classeur = SpreadsheetApp.getActiveSpreadsheet(); //--- Classeur Google Sheets
const feuilleActive = classeur.getActiveSheet(); //--- Feuille de calcul active
const feuille1 = classeur.getSheetByName("Feuille 1"); //--- Feuille spécifique Feuille 1


//---Au démarrage, le menu est lancé
function onOpen(){
  menuSpecial();  
  feuille1.getRange("A1").activate(); // - DÉFINIR LA FEUILLE/CELLULE DE DÉMARRAGE POUR L'UTILISATEUR
}

function menuSpecial() {
  //--- SOUS-MENUS DÉCLARÉS/DÉFINIS AVANT LE MENU PRINCIPAL   
  let sousMenu1 = SpreadsheetApp.getUi().createMenu("Démonstration Gestion Erreurs/Messages")
    .addItem("✅ Lancer la démo Erreurs/Messages", "simulerErreurs")
    .addSeparator();
  
  //-- MENU PRINCIPAL POUR TOUS LES LIENS ET SOUS-MENUS
  SpreadsheetApp.getUi().createMenu("🚩 Menu spécial 🚩")
    .addItem("🙎 Contacter l'atelier", "contacterAtelier")
    .addSeparator()
    .addSubMenu(sousMenu1) //---MESSAGES DE GESTION DES ERREURS
    .addSeparator()
    .addToUi();      
}

function contacterAtelier(){
  SpreadsheetApp.getActive().toast("contact@atelier-informatique.com", "🙎‍♂️", -1);
}
//******************************************************************************


function afficherBarreLateraleErreurs(erreurs) {
  // Créer un modèle HTML
  const modeleHtml = HtmlService.createTemplateFromFile('BarreLateraleErreurs');
  
  // Passer les erreurs au modèle
  modeleHtml.erreurs = erreurs;
  
  // Créer la sortie HTML
  const sortieHtml = modeleHtml.evaluate()
    .setTitle('Messages d\'erreur')
    .setWidth(300);
  
  // Afficher la barre latérale
  SpreadsheetApp.getUi().showSidebar(sortieHtml);
}

let messagesErreurs = [
  "⚠️ Une erreur s'est produite dans le processus : Mise à jour de tous les départements. Veuillez prendre les mesures appropriées.",
  "⚠️ Une erreur s'est produite dans le processus : Mise à jour du graphique. Veuillez prendre les mesures appropriées.",
  "⚠️ Une erreur s'est produite dans le processus : Envoi de l'e-mail. Veuillez prendre les mesures appropriées."
];

function simulerErreurs(){
  // Dans des circonstances normales, les erreurs seraient capturées par Try/Catch et les messages d'erreurs spécifiques seraient
  // ajoutés au tableau messagesErreurs. Ici, nous simulons simplement 3 messages d'erreurs.

  afficherBarreLateraleErreurs(messagesErreurs);
}

Comment cela fonctionne-t-il ?

  • Menu personnalisé : Dès que la feuille est ouverte, un menu personnalisé “Menu spécial” est ajouté. Il comprend un lien pour simuler des erreurs et un autre pour contacter l’Atelier Informatique.
  • Simulation d’erreurs : Lorsque l’utilisateur choisit de “Lancer la démo Erreurs/Messages”, trois erreurs simulées s’affichent dans une barre latérale.
  • Gestion des erreurs : Plutôt que d’afficher une simple boîte de dialogue, une barre latérale est utilisée pour montrer les erreurs en détail, avec un espace dédié aux messages.

Modèle HTML pour la barre latérale

Pour rendre l’interface utilisateur plus agréable, le contenu des messages d’erreurs est affiché dans une barre latérale en HTML :

<!-- BarreLateraleErreurs.html -->
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 15px;
        background-color: #f5f5f5;
        color: #333;
      }
      
      .conteneur-erreurs {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 15px;
        margin-bottom: 15px;
      }
      
      .entete-erreurs {
        color: #d32f2f;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #ffcdd2;
      }
      
      .liste-erreurs {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }
      
      .erreur-element {
        background-color: #ffebee;
        border-left: 4px solid #d32f2f;
        padding: 12px;
        margin-bottom: 8px;
        border-radius: 4px;
        font-size: 14px;
        line-height: 1.4;
      }
      
      .bouton-fermer {
        background-color: #d32f2f;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        margin-top: 10px;
        transition: background-color 0.2s;
      }
      
      .bouton-fermer:hover {
        background-color: #b71c1c;
      }
    </style>
  </head>
  <body>
    <div class="conteneur-erreurs">
      <div class="entete-erreurs">
        Erreurs détectées (<?= erreurs.length ?>)
      </div>
      
      <ul class="liste-erreurs">
        <? for (let i = 0; i < erreurs.length; i++) { ?>
          <li class="erreur-element"><?= erreurs[i] ?></li>
        <? } ?>
      </ul>
      
      <button class="bouton-fermer" onclick="google.script.host.close()">
        Fermer
      </button>
    </div>
    
    <script>
      // Ajouter du JavaScript côté client ici si nécessaire
      // Par exemple, fermer automatiquement après un certain temps :
      /*
      setTimeout(() => {
        google.script.host.close();
      }, 10000); // Fermer après 10 secondes
      */
    </script>
  </body>
</html>

Gérer les erreurs dans Google Apps Script ne doit pas être complexe. Grâce à des menus personnalisés et à une barre latérale d’affichage des erreurs, vous pouvez fournir une interface plus intuitive aux utilisateurs, leur permettant de comprendre et de corriger les erreurs rencontrées dans leur flux de travail. Ce type d’outil peut être extrêmement utile pour les automatisations complexes dans Google Sheets.