11565 sujets

JavaScript, DOM et API Web HTML5

Gestion des erreurs dans le code

Bonjour à tous
Pour gérer les appels AJAX j'utilise la fonction suivante

/* ***************************** */
/* Obtenir des données par fetch */
/* ***************************** */
async function GetRemoteData(url, data = '', whenDone = ignore, ...args){
	if(!url) url = document.location;
	fetch(url, {method: 'POST', body: JSON.stringify(data)})
		.then(response => {
			if(!response.ok) {
				throw response.statusText + ' : ' + url;
			}
			return response.text();
		})
		.then(text => whenDone(text, ...args))
		.catch(error => alert('Error: ' + error));
}

Quand il y a une erreur dans le code de la fonction passé par le paramètre "whenDone", cette erreur est signalée par "alert('Error: ' + error)" ce qui ne me donne aucune information sur l'endroit du code où cette erreur se produit.
Question: par quoi remplacer "alert('Error: ' + error)" pour que l'erreur soit signalée dans la console plutôt que par cette alerte que j'ai écrite faute de mieux ?
Merci de vos conseils
Modifié par PapyJP (06 Nov 2025 - 11:44)
Modérateur
Salut,

phiper a écrit :
console.log(....) peut peut-être fonctionner


console.error() est plus pertinent dans ce contexte

Dans un environnement nodeJS et pour un projet abouti, Winston est mieux : https://github.com/winstonjs/winston

Je vois qu'il y a une erreur (getRemoteData et method POST) : 

async function GetRemoteData ....
....
fetch(url, {method: 'POST',...


Ça doit fonctionner, mais ce n'est pas bon. RESTfull

En complément : JSDoc pour une meilleur maintenabilité
Modifié par Niuxe (06 Nov 2025 - 18:19)
Merci pour cette réponse
1) console.error et console.log produisent le même résultat.
J'ai mis console.error, qui est effectivement plus approprié
2) je ne suis pas (et ne serai sans doute jamais dans mon contexte) en environnement nodeJS
3) "Ça doit fonctionner, mais ce n'est pas bon."
Je ne m'y retrouve pas dans la page Wikipedia citée en référence.
Effectivement ça fonctionne, et je veux bien croire que ce n'est pas bon, mais ça ne me dit pas ce qu'il faudrait faire pour que ce soit bon.
Je ne retrouve sur ce site pas la longue discussion que j'ai eue il y a quelque temps et qui m'a conduit à ce code.
Je ne pense pas que ce soit moi qui ai "inventé" method: 'POST', cela doit venir de mes interlocuteurs/mentors sur ce site.
Personnellement je n'aurais pas mis de méthode, les informations étant récupérées par mes programmes .php par 
$inputJSON = file_get_contents('php://input');


EDIT: Je constate effectivement que
fetch(url, {body: JSON.stringify(data)})
est suffisant et que method: 'POST' est inutile.

EDIT: non, cela provoque dans certains cas une erreur: on ne peut pas avoir simplement body: ... s'il n'y a pas de method: 'POST'
Je suppose qu'il doit y avoir un autre moyen de fournir les données à transmettre, mais cela sort de mon domaine de compétence actuel
Modifié par PapyJP (07 Nov 2025 - 11:08)
Modérateur
Salut,

a écrit :
console.error et console.log produisent le même résultat.

À la différence que le contenu s'affiche en rouge dans la console du navigateur. ça permet en un clin d'oeil de voir qu'il y a une erreur personnalisée.

a écrit :
je ne suis pas (et ne serai sans doute jamais dans mon contexte) en environnement nodeJS

Le lien que je t'ai partagé, est un système de log en fichier.

a écrit :
Ça doit fonctionner, mais ce n'est pas bon."
Je ne m'y retrouve pas dans la page Wikipedia citée en référence.
Effectivement, ça fonctionne, et je veux bien croire que ce n'est pas bon, mais ça ne me dit pas ce qu'il faudrait faire pour que ce soit bon.


Cette discussion devrait éclairer ta lanterne. L'intervention de Parsimonhi est pertinente également.
Dans la discussion, j'ai partagé une image reprenant les bases de RESTful (Dans le tableau, oublie la première ligne GET. Elle n'est pas très explicite et peut induire une confusion). En gardant ce principe, ton application sera nettement plus facile à maintenir et à faire évoluer. Ton code getRemoteData est assez explicite. Ça indique que tu récupères des données venant de l'extérieur. Donc, la méthode à utiliser est GET.

Mon conseil est qu'à chaque fois que tu fais un fetch, uniformises tes urls d'appel avec les recommandations RestFul. Demain, tu décides de développer une API à partir de l'existant, tout le front sera prêt et le backend sera simple à faire évoluer. Tous les « endpoints » seront faits et prêts.

Dans ma réponse précédente, je t'ai indiqué JSDoc. Quels sont les avantages ?
- uniformisation des commentaires pour la signature d'une méthode/fonction
- nettement plus simple à lire et améliore considérablement la compréhension du code et de son contexte (si c'est bien fait)
- permet de générer facilement une documentation d'un projet en HTML. Quelques exemples :
** documentation API de la class Validator
** documentation API de la méthode isValidDate. Le jsdoc de cette méthode : 

/**
 * Validates if a string is a valid date in the format `YYYY-MM-DD` within a reasonable year range (1900-2100).
 *
 * This function checks if the provided string:
 * 1. Is not empty, `null`, or `undefined`.
 * 2. Matches the format `YYYY-MM-DD`.
 * 3. Represents a valid date (e.g., valid month, day, and year ranges).
 *
 * @param {string} value - The string to validate.
 * @returns {boolean} - Returns `true` if the string is a valid date in the format `YYYY-MM-DD`, otherwise `false`.
 *
 * @example
 * // Example 1: Valid date
 * const isValid1 = isValidDate("2023-10-05");
 * console.log(isValid1); // true
 *
 * @example
 * // Example 2: Invalid date
 * const isValid2 = isValidDate("1899-02-30");
 * console.log(isValid2); // false
*/
export default (value:string):boolean => {
    // etc.
}

Modifié par Niuxe (07 Nov 2025 - 13:16)
Prévenir un modérateur
Répondre au sujet
Aller à