gibbon-replay

La version 5 de Svelte vient de sortir : 5.0.0.

Il y a un an, j'avais lu le billet Introducing runes. Depuis, j'ai suivi ce sujet de loin.

J'aimerais tester et apprendre à utiliser la fonctionnalité rune.
#JeMeDemande dans quel projet 🤔. Est-ce que je préfère refactorer vers rune le projet sklein-pkm-engine ou gibbon-replay 🤔. Je pense que ces deux projets utilisent trop peu de "reactive state".
Je souhaite prochainement débuter le projet que j'ai présenté dans 2023-10-28_2008. Je pense que ça serait une bonne occasion pour créer mon premier projet 100% TypeScript avec Svelte 5 avec Rune.

Je viens de mettre en œuvre better-sqlite3-helper ici dans le projet gibbon-replay, afin d'utiliser son système de migration de schemas.

L'expérience développeur (DX) est bonne, j'ai apprécié les fonctions helpers query, queryFirstRow, queryFirstCell, insert, etc.

gibbon-replay n'enregistre pas les sessions de Safari sous MacOS et iOS.

En analysant le problème, j'ai découvert le message d'erreur suivant :

Beacon API cannot load ... Reached maximum amount of queued data of 64Kb for keepalive requests

Je n'ai trouvé la limitation de 64Kb ni dans https://www.w3.org/TR/beacon/, ni dans https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon.
Cela semble être une spécificité de Safari.

#JaiDécouvert que posthog-js utilise fflate pour compresser les données. La compression a été ajoutée en décembre 2020, dans cette Merge Request : Compress events using fflate (gzip-js).

Ce que je compte faire pour corriger le bug que j'ai sous Safari :

• Si les données à envoyer ont une taille supérieure à 50ko, alors utiliser fetch sinon utiliser sendBeacon ;
• Utiliser fflate pour compresser les données.

#JaiDécouvert better-sqlite3-migrate, #JeShouhaiteTester dans gibbon-replay.

#JaiDécouvert aussi better-sqlite3-helper qui propose un mécanisme de migration de base de données SQLite.

#JaiDécouvert aussi la méthode suivante, un peu plus "raw" : https://github.com/n1ru4l/character-overlay/blob/ed7b2e1a1f18982196b41fb544067db54cef433f/server/migrateDatabase.ts#L10

Ici, dans le projet gibbon-replay, j'ai utilisé la librairie Temporal.

import { Temporal } from 'temporal-polyfill';

return Temporal.PlainDateTime
	.from(value)
	.toZonedDateTime('UTC')
	.withTimeZone(
		Intl.DateTimeFormat().resolvedOptions().timeZone
	)
	.toString({
		offset: 'never',
		timeZoneName: 'never'
	})
	.replace('T', ' ');

Le but est de convertir une donnée datetime UTC vers la timezone du navigateur.

Cependant, j'ai été déçu de constater qu'il n'existe pas de fonction de formatage intégrée similaire à celle de date-fns pour formater une date/heure.

Je trouve dommage de devoir utiliser .replace('T', ' '); pour supprimer le caractère T dans la date formatée.

#JaiDécouvert https://github.com/sapics/ip-location-api (pour gibbon-replay).

#JaiDécouvert better-sqlite3, je vais sans doute l'utiliser dans gibbon-replay à la place de Redis.

Dans le cadre du projet gibbon-replay, j'ai étudié sendBeacon pour traiter l'erreur NS_BINDING_ABORTED

qui a lieu ici lors de l'exécution de fetch lors d'événements beforeunload :

window.addEventListener('beforeunload', save);

C'est-à-dire, quand l'utilisateur quitte la page.

Dans ce commit, j'ai remplacé fetch par navigator.sendBeacon.

#JaiDécouvert Window.sessionStorage

L'objet global sessionStorage est similaire à Window.localStorage, à la différence que les données enregistrées dans sessionStorage ont une durée vie limitée et expirent à la fin de la session de navigation actuelle.

...

En revanche, une session de navigation n'est valable que pour le contexte de navigation actuel, c'est-à-dire que le fait d'ouvrir une page dans un nouvel onglet ou dans une nouvelle fenêtre provoquera l'initialisation d'une nouvelle session de navigation, ce qui diffère du comportement des sessions utilisant des cookies.

-- from

Je vais avoir besoin de sessionStorage pour le projet Idée d'un outil de session recoding web minimaliste basé sur rrweb.

---

2024-09-14 : j'ai nommé ce projet gibbon-replay.

J'ai envie d'essayer de créer un "mini" service de session recording, basé sur rrweb, SvelteKit et KeyDB ou DragonflyDB.
Je pense que ce projet pourrait être minimaliste 🤔.

-- from

J'ai publié https://github.com/stephane-klein/gibbon-replay (gibbon-replay).

J'ai passé 2h sur ce projet.