Exemples

Chaque exemple est un scénario réel que vous pouvez lancer dans FlowTrace. Lancez la simulation pour voir la requête voyager à travers chaque étape en 3D.

Lancer la simulation Explorer l'expérience en direct

Cliquer sur un bouton

Suivez une action simple jusqu'au serveur et de retour à l'écran.

Étapes

Navigateur
DOM
JS
État
HTTP
DNS
TLS
CDN
Passerelle
Serveur
Réponse
Rendu

Envoyer un formulaire

Suivez la requête à travers la validation, la passerelle, l'authentification, le serveur, la base de données et de retour au rendu.

Étapes

Navigateur
DOM
JS
État
HTTP
DNS
TLS
CDN
Passerelle
Authentification
Serveur
Base de données
Réponse
Rendu

Se connecter

Authentifiez un utilisateur et recherchez son enregistrement dans la base de données.

Étapes

Navigateur
DOM
JS
HTTP
DNS
TLS
Passerelle
Authentification
Serveur
Base de données
Réponse
Rendu

Aimer une publication

Une mise à jour optimiste qui touche le cache et écrit dans la base de données.

Étapes

Navigateur
DOM
JS
État
HTTP
TLS
CDN
Passerelle
Authentification
Serveur
Cache
Base de données
Réponse
Rendu

Requête de recherche

Une lecture qui vérifie le cache avant d'atteindre la base de données.

Étapes

Navigateur
DOM
JS
HTTP
DNS
TLS
CDN
Passerelle
Serveur
Cache
Base de données
Réponse
Rendu

Enregistrer un enregistrement

Une écriture qui confie une partie du travail à une file d'arrière-plan.

Étapes

Navigateur
DOM
JS
État
HTTP
TLS
Passerelle
Authentification
Serveur
File d'attente
Base de données
Réponse
Rendu

Simuler une erreur

Une requête qui échoue au serveur pour que vous voyiez comment les erreurs apparaissent.

Étapes

Navigateur
DOM
JS
HTTP
TLS
Passerelle
Authentification
Serveur (erreur)
Réponse
Rendu

Succès de cache

Une réponse servie depuis le bord et le cache sans toucher la base de données.

Étapes

Navigateur
DOM
JS
HTTP
TLS
CDN
Passerelle
Cache
Réponse
Rendu

Curieux de savoir ce que signifie chaque étape ? Voir comment ça marche

Lancer la simulation Retour à FlowTrace