@rpcbase/client 0.185.0 → 0.187.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.185.0",
+  "version": "0.187.0",
   "scripts": {
     "test": "../../node_modules/.bin/wireit"
   },
@@ -97,7 +97,9 @@
     "pouchdb-core": "8.0.1",
     "pouchdb-find": "8.0.1",
     "react-i18next": "15.0.0",
-    "socket.io-client": "4.7.5"
+    "rrweb": "1.1.3",
+    "socket.io-client": "4.7.5",
+    "web-vitals": "3.1.1"
   },
   "devDependencies": {
     "@babel/core": "7.24.8",

package/rpc.js

@@ -0,0 +1,32 @@
+/* @flow */
+// import assert from "assert"
+import axios from "axios"
+
+import {SERVER_PORT} from "env"
+
+export const rpcClientPost = async(rpcName, payload) => {
+  const baseUrl = `http://localhost:${SERVER_PORT}`
+  const rpcUrl = `/rpc/${rpcName.replace("server/", "")}`
+
+  const reqUrl = `${baseUrl}${rpcUrl}`
+
+  let res
+  try {
+    res = await axios.post(reqUrl, payload, {
+      // headers: {"x-native-app": "yes"},
+      withCredentials: true,
+      headers: {
+        "user-agent": "rb-rpc-client/dev"
+      }
+    })
+  } catch (err) {
+    console.log("RPC got err", err)
+    console.log(err.message)
+    console.log(err.response)
+  }
+
+  // console.log("LABASE", baseUrl)
+  // console.log("GOT RPC CALL", rpcName, payload)
+  // console.log("LARES", res.data)
+  return res.data
+}

package/rr-trace/get_fingerprint.js

@@ -0,0 +1,10 @@
+/* @flow */
+import FingerprintJS from "@fingerprintjs/fingerprintjs"
+
+const get_fingerprint = async() => {
+  const fp = await FingerprintJS.load()
+  const fp_result = await fp.get()
+  return fp_result.visitorId
+}
+
+export default get_fingerprint

package/rr-trace/get_perf_vitals.js

@@ -0,0 +1,24 @@
+/* @flow */
+import {getTTFB, getFCP} from "web-vitals"
+
+let _ttfb = null
+let _fcp = null
+
+getTTFB(({value}) => {
+  _ttfb = value
+})
+
+getFCP(({value}) => {
+  _fcp = value
+})
+
+const get_perf_vitals = async() => {
+  return {
+    perf_vitals: {
+      ttfb: _ttfb,
+      fcp: _fcp,
+    }
+  }
+}
+
+export default get_perf_vitals

package/rr-trace/get_session_id.js

@@ -0,0 +1,29 @@
+/* @flow */
+import * as uuid from "uuid"
+
+const SESSION_STORAGE_KEY = "rb::rr-trace-session-uuid"
+const LOCAL_STORAGE_KEY = "rb::rr-trace-storage-uuid"
+
+// runtime: regenrated each time the page realoads
+const runtime_id = uuid.v4()
+// session
+let session_id = sessionStorage.getItem(SESSION_STORAGE_KEY)
+if (!session_id) {
+  session_id = uuid.v4()
+  sessionStorage.setItem(SESSION_STORAGE_KEY, session_id)
+}
+// storage id: kept as long as the local storage isn't cleared
+let storage_id = localStorage.getItem(LOCAL_STORAGE_KEY)
+if (!storage_id) {
+  storage_id = uuid.v4()
+  localStorage.setItem(LOCAL_STORAGE_KEY, storage_id)
+}
+
+// TODO: add user_id if is authenticated
+
+const get_session_id = () => {
+  return {runtime_id, session_id, storage_id}
+}
+
+
+export default get_session_id

package/rr-trace/index.js

@@ -0,0 +1,138 @@
+/* @flow */
+import * as rrweb from "rrweb"
+
+import * as env from "env"
+
+import write_session_data from "./write_session_data"
+import get_session_id from "./get_session_id"
+
+const SAVE_INTERVAL = 11000
+// TODO: sessions should not last longer than 10 minutes
+const MAX_SESSION_LENGTH = 30 * 1000 // 10s
+
+// when was the session started
+const start_time = Date.now()
+
+// rr events store
+const events = []
+
+//
+const is_session_over = () => {
+  const now = Date.now()
+  const delta = now - start_time
+  return delta > MAX_SESSION_LENGTH
+}
+
+// POST payload to rr-trace backend
+const send_payload = async(payload) => {
+  if (!env.RR_TRACE_URL) {
+    console.log("send_payload: RR_TRACE_URL is not set, returning")
+    return
+  }
+
+  // TODO: body compression
+  const body = JSON.stringify(payload)
+
+  const url = `${env.RR_TRACE_URL}/api/v1/write_events`
+
+  try {
+    const fetch_response = await fetch(url, {
+      method: "POST",
+      cache: "no-cache",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      referrerPolicy: "no-referrer",
+      body,
+    })
+    const json = await fetch_response.json()
+    if (json.status !== "ok") {
+      console.log("status not ok", json)
+    }
+  } catch(err) {
+    console.log(err)
+  }
+}
+
+
+// while has events, shift array, add to new array
+// send events to backend
+const send_events = async() => {
+  const events_payload = []
+
+  let should_break = false
+  // force stop loop after a short delay
+  setTimeout(() => {
+    should_break = true
+  }, 100)
+
+  while (events.length > 0 && !should_break) {
+    const ev = events.shift()
+    events_payload.push(ev)
+  }
+
+  if (events_payload.length > 0) {
+    // console.log("SEND PAYLOAD", JSON.stringify(events_payload, null, 2))
+    await send_payload({
+      events: events_payload,
+      session_id: get_session_id(),
+    })
+  }
+}
+
+const init = async() => {
+  // rrweb record
+  const stop_recording = rrweb.record({
+    inlineStylesheet: false,
+    emit(event) {
+      // if event contains html snapshot, replace the vendor script tag ?
+      // if (event.type === 2 && event.data?.node?.childNodes) {
+      //   console.log("got dom snapshot", event)
+      // }
+      events.push(event)
+
+      if (is_session_over()) {
+        console.log("session exceeded timeout, stopping recording")
+        stop_recording()
+      }
+    },
+  })
+
+  await write_session_data()
+}
+
+
+const delay = (time) => new Promise((resolve) => setTimeout(resolve, time))
+
+// send new events to backend every 1500 ms + random delay
+const send_interval = setInterval(async() => {
+  const random_time = Math.floor(Math.random() * 500)
+  await delay(random_time)
+
+  send_events()
+
+  if (is_session_over()) {
+    console.log("session timeout, clear interval")
+    clearInterval(send_interval)
+  }
+}, SAVE_INTERVAL)
+
+export default {init}
+
+// TODO:
+// send last events before window unload
+// fetch + keepalive with 64kb max payload and 30s timeout
+// window.addEventListener("beforeunload", async(event) => {
+//   const res = await hello({hello: "world"})
+//   console.log("unload alert res", res)
+//   // event.returnValue = "hello wlert"
+// })
+
+// window.onunload = function() {
+//   fetch("/analytics", {
+//     method: 'POST',
+//     body: "statistics",
+//     keepalive: true
+//   });
+// };

package/rr-trace/write_session_data.js

@@ -0,0 +1,86 @@
+/* @flow */
+import {RR_TRACE_URL} from "env"
+
+import get_fingerprint from "./get_fingerprint"
+import get_perf_vitals from "./get_perf_vitals"
+import get_session_id from "./get_session_id"
+
+const get_screen = () => ({
+  screen_w: window.screen.width,
+  screen_h: window.screen.height,
+  window_w: window.innerWidth,
+  window_h: window.innerHeight,
+  pixel_ratio: window.devicePixelRatio,
+  orientation: window.screen.orientation?.type,
+})
+
+const get_analytics_data = async() => {
+  const payload = {
+    date_now: Date.now()
+  }
+  // screen info
+  Object.assign(payload, get_screen())
+
+  // nav info
+  Object.assign(payload, {
+    referrer: window.document.referrer,
+    location: window.location.href,
+    language: navigator.language,
+    user_agent: navigator.userAgent,
+  })
+
+  // Battery (WARNING: battery api is deprecated)
+  if (typeof navigator.getBattery === "function") {
+    const battery = await navigator.getBattery()
+    Object.assign(payload, {
+      battery_charging: battery.charging,
+      battery_level: battery.level
+    })
+  }
+
+  // get fingerprint
+  // TODO: save fingerprint to localStorage and check if it changed across sessions
+  const visitor_id = await get_fingerprint()
+  payload.visitor_id = visitor_id
+
+  // runtime ids
+  Object.assign(payload, {...get_session_id()})
+
+  const perf_vitals = await get_perf_vitals()
+  Object.assign(payload, perf_vitals)
+
+  return payload
+}
+
+
+const write_session_data = async() => {
+  if (!RR_TRACE_URL) {
+    console.log("RR_TRACE_URL is not set, skipping")
+    return
+  }
+
+  const payload = await get_analytics_data()
+
+  try {
+    const url = `${RR_TRACE_URL}/api/v1/write_session_data`
+    const fetch_response = await fetch(url, {
+      method: "POST",
+      cache: "no-cache",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      referrerPolicy: "no-referrer",
+      body: JSON.stringify(payload), // TODO: compress + encrypt
+    })
+
+    console.log("write_session_data: got fetch response", fetch_response)
+  } catch (err) {
+    console.log("failed to fetch write_session_data", err)
+    console.log("Error", JSON.stringify(err))
+    console.log(err)
+  }
+
+}
+
+export default write_session_data