Résolution des problèmes liés aux extensions personnalisées
Cet article présente quelques solutions aux problèmes que vous êtes le plus susceptible de rencontrer lors de la création d’extensions personnalisées, globalement dans l’ordre dans lequel ils se produisent pendant le développement.
Liste de contrôle rapide
Si quelque chose ne fonctionne pas, vérifiez d’abord les éléments suivants :
-
Node.js est la version 18 ou 20 (
node --version). -
Vous êtes connecté (
aio login) et vous vous trouvez dans l’organisation/le projet/l’espace de travail approprié (aio console where). -
Le nom du point d’extension correspond exactement, y compris la version :
fusion/nav-organization/1. -
Le
urldansgetWidget()correspond à un itinéraire dans votre application. -
Vos appels d’interface utilisateur visibles
attach({ id }). -
Vous recherchez le bon ensemble d’extensions dans Fusion :
- Pour afficher une version d’évaluation, déployez sur l’environnement d’évaluation et activez le bouton des extensions d’évaluation dans votre profil Fusion (Paramètres de produit > Profil Fusion > Préférences).
- Pour afficher une extension publiée, déployez-la en production et faites-la approuver.
Erreur 1060 : « Le point d’extension n’existe pas »
Message complet : CoreConsoleAPISDK ... 1060: Extension point 'fusion/nav-organization/1' does not exist lors de l’aio app deploy.
Signification : le point d’extension Fusion n’est pas encore activé (« intégré ») pour votre organisation Adobe. Adobe vérifie, au moment du déploiement, que le point d’extension existe dans le catalogue de votre organisation. Ce n’est pas un problème avec votre code ou votre YAML.
Correctif : demandez à l’équipe Fusion d’intégrer le ou les points d’extension (fusion/nav-organization/1 et/ou fusion/nav-team/1) pour votre organisation IMS. Lorsque vous demandez une intégration, incluez les éléments suivants :
- votre identifiant de l’organisation IMS (
XXXX@AdobeOrg), - le(s) point(s) d’extension dont vous avez besoin,
- vos noms de projet et espace de travail .
Une fois l’intégration confirmée, exécutez à nouveau aio app deploy.
« En attente du message initial de l’iframe cible » : le panneau tourne à tout jamais
Signification : Fusion a ouvert votre interface utilisateur visible, mais n’a pas terminé l’établissement de la liaison. Par conséquent, le délai de Fusion a expiré.
Causes fréquentes :
attachse trouve uniquement dans le composant d’enregistrement, et non dans le widget visible.- Le
urldansgetWidget()pointe vers un itinéraire qui effectue le rendu du composant enregistrement (ou une page vierge) au lieu de votre widget. - Le
idtransmis àattachdiffère duidutilisé dansregister. Ils doivent être identiques, donc gardez les deux enConstants.js.
Correctif : assurez-vous que votre composant visible appelle attach({ id }) :
useEffect(() => {
attach({ id: extensionId }).catch(console.error);
}, []);
Pour plus d’informations, voir Création de l’interface utilisateur de l’extension personnalisée.
Le bouton de navigation n’apparaît pas dans Fusion
Si le bouton de navigation de votre extension personnalisée n’apparaît pas dans Fusion, vérifiez ces éléments dans l’ordre :
- Cherchez-vous le bon jeu d’extensions ? Par défaut, Fusion affiche uniquement les extensions publiées, qui ont été déployées en production et approuvées. Si vous testez une version d’évaluation, activez le commutateur Extensions d’évaluation dans votre profil Fusion (Paramètres de produit > Profil Fusion > Préférences) et rechargez. Les éléments de l’étape sont étiquetés (étape).
Pour plus d’informations, voir Publication de votre extension personnalisée. - A-t-il été révoqué ou retiré ? Une extension révoquée ou retirée cesse d’apparaître dans Fusion sans erreur. Si un bouton qui fonctionnait auparavant disparaissait, vérifiez qu’il est toujours actif dans Adobe Exchange avant de rechercher un problème de code.
- Est-il déployé dans l’espace de travail approprié ? Déployez sur l’espace de travail que vous êtes en train de charger, l’espace de travail d’évaluation lorsque vous utilisez le commutateur de test d’évaluation.
- Est-il déployé dans la bonne organisation ? Connectez-vous à Fusion avec un compte de la même organisation IMS que celle sur laquelle vous avez déployé .
- Est-ce dans la bonne section ?
fusion/nav-organization/1affiche sous Organisation ;fusion/nav-team/1affiche sous Équipe (vous devez d’abord sélectionner une équipe). - Existe-t-il une faute de frappe du nom du point d’extension ? Il doit lire exactement
fusion/nav-organization/1dans les deuxapp.config.yamlet le chemin d’inclusionext.config.yamldu dossier .
Le bouton apparaît, mais le panneau est vide
Si le bouton apparaît mais que le panneau est vide, vérifiez les éléments suivants :
- Non-correspondance d’itinéraire : la
urldegetWidget()(telle que/index.html#/my-widget) doit correspondre à une<Route>dansApp.js. Une discordance charge une page sans composant. - Erreur JavaScript : ouvrez l’onglet Outils de développement (F12) > Console de votre navigateur et recherchez les erreurs provenant de l’iframe. Corrigez l’erreur signalée et effectuez un redéploiement.
- En-tête manquant/dupliqué :
hideWidgetHeaderdansgetWidget()contrôle si Fusion affiche le titre au-dessus de votre interface utilisateur. Définissez-le surtruesi vous effectuez le rendu de votre propre en-tête.
L’iframe est bloqué (politique de sécurité du contenu / « refus de créer un iframe »)
Fusion autorise uniquement les extensions hébergées sur le réseau CDN App Builder d’Adobe (*.adobeio-static.net), où aio app deploy place vos fichiers par défaut. Si vous hébergez votre interface utilisateur ailleurs, par exemple dans un domaine personnalisé, Fusion refuse de la charger. Effectuez le déploiement via App Builder comme indiqué ou demandez à l’équipe Fusion si votre domaine peut être placé sur la liste autorisée.
Le contexte est vide ou obsolète
- Vide juste après le chargement : lisez le contexte après la résolution du
attach, pas avant. D’ici là, afficher un état « Connexion… ». - Pas de mise à jour lorsque l’utilisateur change d’organisation ou d’équipe Abonnez-vous à l’événement
contextchangeet lisez à nouveau vos clés dans le gestionnaire. Pour plus d’informations, consultez la section Lire le contexte des partages Fusion dans l’article Créer l’interface utilisateur de l’extension personnalisée. - Les dates ne semblent pas correctes : les champs de date arrivent sous la forme de chaînes ISO strings, et non d’objets
Date. Enveloppez-les dans dunew Date(...). Voir Dates dans l’article Référence contextuelle de Fusion.
L’appel d’une API échoue avec une erreur CORS.
Symptôme : la console du navigateur affiche « Aucun en-tête « Access-Control-Allow-Origin » (ou la requête est bloquée) lorsque votre interface utilisateur appelle directement une API Workfront/Fusion.
Correctif : n’appelez pas ces API depuis le navigateur. Acheminez l’appel via votre propre action d’exécution App Builder (côté serveur, pas de CORS) et demandez à l’invité d’appeler l’action avec une URL relative de même origine. Pour plus d’informations, voir Appeler les API Workfront et Fusion.
L’action de proxy renvoie 401 même avec un jeton valide
Signification : avec require-adobe-auth: true, la passerelle Adobe valide l’appel avant l’exécution de votre action et peut rejeter ou supprimer des en-têtes personnalisés dont vous avez besoin en amont, en les faisant apparaître sous forme de 401.
Correction : définissez des require-adobe-auth: false sur l’action et appliquez l’autorisation vous-même. Demander un porteur de Authorization dans l’action, la transférer en amont, et garder une cible stricte. Voir required-adobe-auth : true ou false.
Fusion GET /api/v3/hooks renvoie 400
Signification : point d’entrée des points d’entrée des points d’entrée est de portée équipe, il s’teamId donc d’un paramètre de requête obligatoire.
Correctif : l’appel /api/v3/hooks?teamId=<team.id>. Les points d’extension ne sont disponibles que pour l’équipe active. Pour couvrir une organisation, bouclez ses équipes et fusionnez. Les scénarios, en revanche, acceptent les organizationId. Voir Spécificités de l’API Fusion v3.
Erreurs aio
aio: command not found: l’interface de ligne de commande n’est pas installée ou ne se trouve pas sur votre CHEMIN. Relanceznpm install -g @adobe/aio-cli, puis ouvrez un nouveau terminal.- La création/le déploiement échoue sur une toute nouvelle version de nœud : utilisez le nœud 18 ou 20 LTS. Les nouvelles versions non-LTS rompent parfois la chaîne d’outils.
- « Vous n’êtes pas un développeur » / ne peut pas voir votre organisation : l’administrateur de l’organisation Adobe doit vous accorder le rôle Développeur et l’accès à App Builder. Pour plus d’informations, voir Configurer des outils et un compte d’extension d’interface utilisateur.
- 401 / jeton non valide lors du déploiement ou de la découverte : votre session a expiré ou vous mélangez des environnements. Exécutez
aio logoutpuisaio login, confirmez leaio console whereet déployez-le dans l’espace de travail que vous êtes en train de charger.
Collecte d’informations à des fins d’assistance
Collectez ces informations pour établir un diagnostic beaucoup plus rapidement :
- La commande exacte que vous avez exécutée et la sortie d’erreur full.
- Votre ID d’organisation IMS, projet et espace de travail.
- Le point d’extension vous ciblez.
- Si
aio app deploya réussi et si l’extension est publiée (ou, pour un test d’évaluation, si les extensions d’évaluation sont activées). - Erreurs éventuelles dans le navigateur Console (F12) lors de l’ouverture du panneau dans Fusion.