Symptômes
Lorsque vous intégrez le Napster Companion Web SDK dans une application Next.js (ou toute autre application basée sur React), l'agent se connecte correctement au premier chargement, mais échoue à chaque rechargement suivant. Des erreurs apparaissent alors dans la console du navigateur, faisant référence à un échec de connexion WebSocket.
Cause
Les jetons de session Napster sontà usage unique et de courte durée. Si votre application récupère un jeton une seule fois (par exemple au moment du build, ou si elle le stocke dans unJSONfichier ou une variable d'environnement) puis le réutilise sur plusieurs sessions ou rechargements de page, ce jeton sera invalide dès sa seconde utilisation, ce qui provoque l'échec de l'établissement de la connexion WebSocket.
Ce cas se produit fréquemment lorsqu'un jeton est codé en dur dans une configuration, mis en cache dans un état qui persiste entre les rechargements à chaud, ou généré une seule fois côté serveur puis transmis comme prop statique.
Résolution
Générez un nouveau jeton àchaque chargement de pageen appelant le point de terminaison du jeton au moment de l'exécution, juste avant d'initialiser le SDK. Ne stockez et ne réutilisez jamais de jeton entre plusieurs sessions.
useEffect(React) ou d'un hook de cycle de vie équivalent qui s'exécute au montage du composant — jamais dans une variable de niveau module partagée, ni dansgetStaticProps, ni dans le stockage local.Correction étape par étape
- Repérez l'endroit où votre application récupère le jeton de session. S'il est stocké dans une variable, un fichier ou transmis comme prop statique, c'est la source du problème.
- Déplacez l'appel de récupération du jeton dans le cycle de vie de votre composant (par exemple à l'intérieur de
useEffect(() = { ... }, [])avec React, ou deonMountedavec Vue). - Transmettez le jeton nouvellement récupéré directement à
NapsterCompanionApiSdk.init({ token, ... }), sans le stocker entre les appels. - Assurez-vous que votre fonction de nettoyage (la valeur de retour de
useEffect) détruit l'instance du SDK, afin que le prochain montage démarre proprement. - Rechargez la page deux fois pour confirmer que l'agent s'initialise correctement à chaque chargement.
Notes complémentaires
Ce problème n'est pas spécifique à Next.js : tout framework qui met en cache un état de niveau module lors des rechargements à chaud (Vite, Remix, etc.) peut présenter le même comportement. La correction reste la même : traiter le jeton comme une ressource à usage unique, à récupérer intégralement à chaque initialisation du SDK.