chore: use navigator.sendBeacon instead of fetch

olros · Nov 7, 2023 · 3596c0a · 3596c0a · vercel · Nov 7, 2023
1 parent 64d6242
commit 3596c0a
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 36 deletions.
diff --git a/packages/stats/README.md b/packages/stats/README.md
@@ -1,6 +1,6 @@
 # Stats
 
-Simple tool to track analytics to Stats (https://stats.olafros.com).
+Simple tool to track analytics to Stats (https://stats.olafros.com). This package is only exported as an ESM-module.
 
 ## Usage
 

diff --git a/packages/stats/src/index.ts b/packages/stats/src/index.ts
@@ -28,13 +28,6 @@ export type StatsInit = {
  * ```
  */
 export const Stats = <CustomEvents extends string>({ team, project, baseUrl, allowLocalhost = false }: StatsInit) => {
-
-  const requestInit: RequestInit = {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    mode: 'no-cors',
-    credentials: 'omit',
-  };
 
   const url = `${baseUrl || 'https://stats.olafros.com'}/api/${team}/${project}`;
 
@@ -52,9 +45,9 @@ export const Stats = <CustomEvents extends string>({ team, project, baseUrl, all
    * Track a pageview
    * @param options Optional PageviewOptions
    */
-  const pageview = async (options: PageviewOptions = {}): Promise<void> => {
+  const pageview = (options: PageviewOptions = {}): boolean => {
     if (isBotOrLocalhost()) {
-      return;
+      return false;
     }
     const pathname = options.pathname || location.pathname;
 
@@ -63,21 +56,21 @@ export const Stats = <CustomEvents extends string>({ team, project, baseUrl, all
       screen_width: typeof window !== 'undefined' ? window.innerWidth : undefined,
     };
 
-    await fetch(`${url}/pageview/`, { ...requestInit, body: JSON.stringify(data) });
+    return navigator.sendBeacon(`${url}/pageview/`, JSON.stringify(data));
   };
 
   /**
    * Track a custom event
    * @param name The event name
    */
-  const event = async (name: CustomEvents): Promise<void> => {
+  const event = (name: CustomEvents): boolean => {
     if (isBotOrLocalhost()) {
-      return;
+      return false;
     }
 
     const data = { name };
 
-    await fetch(`${url}/event/`, { ...requestInit, body: JSON.stringify(data) });
+    return navigator.sendBeacon(`${url}/event/`, JSON.stringify(data));
   };
 
   return { event, pageview };

diff --git a/packages/stats/tsconfig.json b/packages/stats/tsconfig.json
@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
-    "target": "ES2019",
-    "lib": ["ES2019", "dom"],
-    "module": "CommonJS",
+    "target": "ES2022",
+    "lib": ["ES2022", "dom"],
+    "module": "ES2022",
     "moduleResolution": "node",
     "allowJs": false,
     "declaration": true,

diff --git a/packages/stats/yarn.lock b/packages/stats/yarn.lock
@@ -2,7 +2,7 @@
 # yarn lockfile v1
 
 
-typescript@^4.9.5:
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+typescript@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78"
+  integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
diff --git a/web/app/routes/script[.js].ts b/web/app/routes/script[.js].ts
@@ -20,13 +20,7 @@ const pageviewScript = () => {
       screen_width: window.innerWidth,
     };
 
-    fetch(`${baseUrl}/api/` + team + '/' + project + '/pageview/', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data),
-      mode: 'no-cors',
-      credentials: 'omit',
-    });
+    navigator.sendBeacon(`${baseUrl}/api/` + team + '/' + project + '/pageview/', JSON.stringify(data));
   } catch {}
 };
 

diff --git a/web/package.json b/web/package.json
@@ -26,7 +26,7 @@
     "@nivo/bar": "^0.83.0",
     "@nivo/core": "^0.83.0",
     "@nivo/line": "^0.83.0",
-    "@olros/stats": "1.3.0",
+    "@olros/stats": "^2.1.1",
     "@prisma/adapter-neon": "^5.5.2",
     "@prisma/client": "^5.5.2",
     "@remix-run/node": "^2.2.0",

diff --git a/web/remix.config.js b/web/remix.config.js
@@ -9,6 +9,7 @@ module.exports = {
     '@nivo/bar',
     '@nivo/core',
     '@nivo/legends',
+    '@olros/stats',
     /^remix-utils.*/,
     'is-ip',
     'ip-regex',

diff --git a/web/tsconfig.json b/web/tsconfig.json
@@ -1,14 +1,14 @@
 {
   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "app/routes/__authed"],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2020"],
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
-    "target": "ES2020",
-    "module": "ES2020",
+    "target": "ES2022",
+    "module": "ES2022",
     "strict": true,
     "allowJs": false,
     "forceConsistentCasingInFileNames": true,

diff --git a/web/yarn.lock b/web/yarn.lock
@@ -1309,10 +1309,10 @@
   dependencies:
     which "^3.0.0"
 
-"@olros/stats@1.3.0":
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/@olros/stats/-/stats-1.3.0.tgz"
-  integrity sha512-OO7y+mvD46ERsNLwg3qtFFx1/DOKcwXr7dWPMdbojGnMmzPfJmewzjC3k49JDTaq88toVNSUfWLHokHRkHGWXg==
+"@olros/stats@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@olros/stats/-/stats-2.1.1.tgz#eafb617adf5a58f6062f8f8b985c721cf7f54f06"
+  integrity sha512-c+a5Vyvtc/7nDBC+NJF44ekyDA3QRm4T0+6XhHROHLvbfO2ZvnZmuwjhMDyhvAXMRLY/tjgriNwlpRsOqM1ZQA==
 
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"