απαιτήσεις: Το αναπτυγμένο προϊόν δεν μπορεί να εγγυηθεί ότι δεν υπάρχουν σφάλματα, ακόμη και αν δεν υπάρχουν προβλήματα στο στάδιο της δοκιμής, που έχουν αναπτυχθεί στο περιβάλλον παραγωγής, ενδέχεται να υπάρχουν απροσδόκητες καταστάσεις για τους χρήστες και το ίδιο ισχύει και για τις σελίδες front-end. Το Sentry και το Bugsnag είναι και τα δύο πολύ καλά προϊόντα παρακολούθησης.
αναθεώρηση
Μετά την παρακολούθηση των πληροφοριών ανωμαλίας, πώς μπορώ να υποβάλω τα δεδομένα στο backend API; Το Navigator.sendBeacon είναι ένα API για την αποστολή μικρών ποσοτήτων δεδομένων στον διακομιστή, ειδικά όταν μια σελίδα πρόκειται να εκφορτωθεί, όπως καταγραφή, ανάλυση συμπεριφοράς χρήστη κ.λπ.
Εάν χρησιμοποιείτε παραδοσιακό XHR για την αποστολή δεδομένων, πρέπει να κάνετε ειδική λογική επεξεργασία στη διεπαφή παρακολούθησης στο frontend. navigator.sendBeacon() μέθοδοςΑποθέστε ένα μήνυμα σε μια ουρά του προγράμματος περιήγησης, έτσι ώστε ακόμη και αν η αποστολή αποτύχει, το μήνυμα σφάλματος δεν θα εντοπιστεί από το frontend。
Παρουσιάστηκε το Navigator.sendBeacon
Η μέθοδος navigator.sendBeacon() στέλνει ένα αίτημα HTTP POST με μια μικρή ποσότητα δεδομένων στον διακομιστή web ασύγχρονα. Παράμετροι: url, δεδομένα (δεδομένα τύπου ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData ή URLSearchParams)
Τεκμηρίωση:
Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Σενάρια χρήσης
Καταγραφή κατά την απεγκατάσταση της σελίδας: Καταγράφει δεδομένα συμπεριφοράς, όπως χρόνο παραμονής σελίδας, συμπεριφορά κλικ, PV, UV κ.λπ., όταν ο χρήστης αποχωρεί από τη σελίδα.
Αναλύσεις και παρακολούθηση: Αποστολή δεδομένων συμπεριφοράς χρήστη σε διακομιστές ανάλυσης για παρακολούθηση της απόδοσης του ιστότοπου και ανάλυση της συμπεριφοράς των χρηστών.
Αναφορά κατάστασης: Αναφέρει την κατάσταση της εφαρμογής ή πληροφορίες σφάλματος στον διακομιστή.
Δοκιμή
Ο κωδικός έχει ως εξής:
Ποιες είναι οι ομοιότητες και οι διαφορές μεταξύ του Navigator.sendBeacon και του XHR και του fetch;
Ομοιότητες
Αποστολή αιτημάτων δικτύου: Και οι τρεις μέθοδοι χρησιμοποιούνται για την αποστολή δεδομένων από τον πελάτη στον διακομιστή.
Υποστήριξη για πολλαπλές μορφές δεδομένων: Μπορούν να στείλουν δεδομένα σε διάφορες μορφές όπως συμβολοσειρές, JSON, δυαδικά δεδομένα κ.λπ.
Διαφορές
Navigator.sendBeacon
Χρησιμοποιείται για την αποστολή μικρού όγκου δεδομένων κατά την απεγκατάσταση της σελίδας και είναι κατάλληλο για καταγραφή, ανάλυση δεδομένων κ.λπ.
Η αποστολή δεδομένων είναι ασύγχρονη, αλλά δεν επιστρέφει καμία πληροφορία στον καλούντα και δεν μπορεί να επεξεργαστεί την απάντηση του διακομιστή.
Σχεδιασμένο για να εγγυάται την παράδοση δεδομένων κατά την απεγκατάσταση της σελίδας, ακόμη και όταν το πρόγραμμα περιήγησης είναι κλειστό ή η σελίδα μεταπηδά.
Χρησιμοποιείτε πάντα αιτήματα HTTPPOST.
Δεν χρειάζεται να επεξεργαστείτε απαντήσεις, απλό στη χρήση.
XMLHttpΑίτημα
Για πιο σύνθετα αιτήματα AJAX που απαιτούν επεξεργασία απαντήσεων.
Μπορούν να γίνουν σύγχρονα ή ασύγχρονα αιτήματα.
Μπορείτε να επεξεργαστείτε την απόκριση του διακομιστή και να κάνετε περαιτέρω επεξεργασία (π.χ. ανάλυση JSON, χειρισμός κωδικών κατάστασης κ.λπ.).
Παρέχει πλούσια συμβάντα όπως onload, onerror, onprogress κ.λπ., για την παρακολούθηση των διαφόρων σταδίων του αιτήματος.
Υποστηρίζεται ευρέως σε όλα τα μεγάλα προγράμματα περιήγησης, συμπεριλαμβανομένων ορισμένων παλαιότερων προγραμμάτων περιήγησης.
Είναι πιο περίπλοκο στη χρήση και απαιτεί χειρισμό των διαφόρων σταδίων και καταστάσεων του αιτήματος.
Φέρνω
Μια σύγχρονη διεπαφή αιτημάτων για την αντικατάσταση του XMLHttpRequest για απλούστερη και πιο ευέλικτη επεξεργασία αιτημάτων και απαντήσεων.
Πάντα να κάνετε μια ασύγχρονη αίτηση, επιστρέφοντας ένα αντικείμενο Promise.
Υποστηρίζει αλυσιδωτές αποκρίσεις επεξεργασίας, καθιστώντας εύκολη την ανάλυση JSON, την επεξεργασία κωδικών κατάστασης και πολλά άλλα.
Υποστηρίζει σύνταξη async/await, η οποία είναι περισσότερο σύμφωνη με τις σύγχρονες συνήθειες ανάπτυξης JavaScript.
Καλύτερη υποστήριξη για αιτήματα μεταξύ τομέων και CORS (Cross-Domain Resource Sharing).
Επιτρέπει την προσθήκη περισσότερων επιλογών στο αίτημα (π.χ. προσαρμοσμένη κεφαλίδα, μέθοδος αιτήματος κ.λπ.).
περίληψη
Το Navigator.sendBeacon είναι ένα API σχεδιασμένο για αξιοπιστία, ειδικά για την αποστολή μικρών ποσοτήτων δεδομένων κατά την απεγκατάσταση μιας σελίδας.
Έχει τα πλεονεκτήματα της απλότητας, του μη αποκλεισμού και της αξιοπιστίας και είναι ιδιαίτερα κατάλληλο για σενάρια όπως η καταγραφή και η ανάλυση συμπεριφοράς χρήστη.
Υποβάλλεται ένα ασύγχρονο αίτημα και είναι αίτημα POST.
Μπορεί μόνο να προσδιορίσει εάν έχει τοποθετηθεί στην ουρά εργασιών του προγράμματος περιήγησης, αλλά δεν μπορεί να προσδιορίσει εάν έχει σταλεί με επιτυχία.
Δεν χρειάζεται να ασχοληθείτε με την τιμή επιστροφής.
Πρέπει να σημειωθούν ζητήματα συμβατότητας προγράμματος περιήγησης. |
Δημοσιεύτηκε στις 2025-3-5 09:46:14
|
|
|
|
