Symptome
Bei der Integration des Napster Companion Web SDK in eine Next.js- (oder eine ähnliche React-basierte) Anwendung verbindet sich der Agent beim ersten Laden erfolgreich, schlägt aber bei jedem nachfolgenden Neuladen fehl. In der Browserkonsole erscheinen Fehler, die auf einen WebSocket-Verbindungsfehler hinweisen.
Grundursache
Napster-Sitzungstoken sind einmalig verwendbar und kurzlebig. Wenn Ihre Anwendung ein Token nur einmal abruft (z. B. zur Build-Zeit oder aus einer JSON-Datei bzw. Umgebungsvariable) und es anschließend über mehrere Sitzungen oder Seiten-Neuladungen hinweg wiederverwendet, wird das Token bei der erneuten Verwendung ungültig, wodurch der WebSocket-Handshake fehlschlägt.
Dies passiert häufig, wenn ein Token fest in eine Konfiguration codiert, in einem Zustand zwischengespeichert wird, der Hot-Reloads übersteht, oder einmalig serverseitig erzeugt und als statische Prop eingebettet wird.
Lösung
Generieren Sie bei jedem Laden der Seite ein neues Token, indem Sie den Token-Endpunkt zur Laufzeit unmittelbar vor der Initialisierung des SDK aufrufen. Speichern oder verwenden Sie Tokens niemals sitzungsübergreifend erneut.
useEffect (React) oder einem gleichwertigen Lifecycle-Hook aus, der beim Mounten ausgeführt wird — nicht in einer Variablen auf Modulebene, nicht in getStaticProps und nicht im lokalen Speicher.Schrittweise Behebung
- Finden Sie heraus, wo Ihre Anwendung das Sitzungstoken abruft. Wird es in einer Variablen, Datei oder statischen Prop gespeichert, ist dies die Ursache des Problems.
- Verschieben Sie den Token-Abruf in den Mount-Lifecycle Ihrer Komponente, z. B. innerhalb von
useEffect(() = { ... }, [])in React oderonMountedin Vue. - Übergeben Sie das frisch abgerufene Token direkt an
NapsterCompanionApiSdk.init({ token, ... }), ohne es zwischen den Aufrufen zu speichern. - Stellen Sie sicher, dass Ihre Cleanup-Funktion (der Rückgabewert von
useEffect) die SDK-Instanz zerstört, damit das nächste Mounten sauber startet. - Laden Sie die Seite zweimal neu, um zu bestätigen, dass der Agent bei beiden Aufrufen erfolgreich initialisiert wird.
Zusätzliche Anmerkungen
Dieses Problem ist nicht spezifisch für Next.js – jedes Framework, das den Zustand auf Modulebene über Hot-Reloads hinweg zwischenspeichert (Vite, Remix usw.), kann das gleiche Verhalten zeigen. Der Fix ist derselbe: Behandeln Sie das Token als einmaligen Nachweis, der für jede SDK-Initialisierung neu abgerufen werden muss.