Συμπτώματα
Κατά την ενσωμάτωση του Napster Companion Web SDK σε μια εφαρμογή Next.js (ή παρόμοια React-based), ο πράκτορας συνδέεται με επιτυχία στην πρώτη φόρτωση, αλλά αποτυγχάνει σε κάθε επόμενη επαναφόρτωση. Σφάλματα εμφανίζονται στην κονσόλα του προγράμματος περιήγησης, αναφερόμενα σε αποτυχία σύνδεσης WebSocket.
Βασική Αιτία
Τα tokens συνεδρίας του Napster είναι μίας χρήσης και βραχύβια. Αν η εφαρμογή σας ανακτά ένα token μία φορά (π.χ. κατά τον χρόνο build, ή το αποθηκεύει σε ένα αρχείο JSON ή σε μεταβλητή περιβάλλοντος) και το επαναχρησιμοποιεί σε πολλαπλές συνεδρίες ή επαναφορτώσεις σελίδας, το token θα είναι παρωχημένο μέχρι τη στιγμή που χρησιμοποιηθεί ξανά, προκαλώντας αποτυχία στη χειραψία (handshake) του WebSocket.
Αυτό συμβαίνει συνήθως όταν ένα token είναι hardcoded σε ένα αρχείο ρυθμίσεων (config), αποθηκευμένο σε state που διατηρείται κατά τα hot-reloads, ή δημιουργείται μία φορά στο server-side και ενσωματώνεται ως στατικό prop.
Λύση
Δημιουργήστε ένα νέο instance σε κάθε φόρτωση σελίδας, καλώντας το token endpoint σας κατά τον χρόνο εκτέλεσης (runtime), αμέσως πριν από την αρχικοποίηση του SDK. Ποτέ μην αποθηκεύετε ή επαναχρησιμοποιείτε tokens μεταξύ συνεδριών.
useEffect (React) ή ισοδύναμο lifecycle hook που εκτελείται στο mount — όχι σε μια module-level μεταβλητή, όχι σε getStaticProps, και όχι στο localStorage.Βήμα προς Βήμα
- Εντοπίστε πού η εφαρμογή σας ανακτά το token συνεδρίας. Αν είναι αποθηκευμένο σε μεταβλητή, αρχείο, ή static prop, αυτή είναι η πηγή του προβλήματος.
- Μετακινήστε την κλήση ανάκτησης του token στον κύκλο ζωής του component σας (π.χ. μέσα σε
useEffect(() => { ... }, [])στο React ήonMountedστο Vue). - Περάστε το φρεσκοανακτημένο token κατευθείαν στο
NapsterCompanionApiSdk.init({ token, ... }), χωρίς να το αποθηκεύσετε πουθενά μεταξύ των κλήσεων. - Βεβαιωθείτε ότι η συνάρτηση καθαρισμού (η τιμή επιστροφής του
useEffect) καταστρέφει το instance του SDK, ώστε η επόμενη προσάρτηση (mount) να ξεκινά καθαρή. - Επαναφορτώστε τη σελίδα δύο φορές για να επιβεβαιώσετε ότι η σύνδεση πετυχαίνει και στις δύο φορτώσεις.
Συμπληρωματικές Σημειώσεις
Αυτό το ζήτημα δεν αφορά αποκλειστικά το Next.js — οποιοδήποτε framework αποθηκεύει state σε επίπεδο module κατά τα hot reloads (Vite, Remix, κ.λπ.) μπορεί να παρουσιάσει την ίδια συμπεριφορά. Η λύση είναι η ίδια: αντιμετωπίστε το token ως διαπιστευτήριο μίας χρήσης που πρέπει να ανακτάται φρέσκο σε κάθε αρχικοποίηση του SDK.