From 3596c0aa41f63c4c2890b5139bfa830e6bffd32a Mon Sep 17 00:00:00 2001 From: Olaf Rosendahl Date: Tue, 7 Nov 2023 14:21:16 +0100 Subject: [PATCH] chore: use navigator.sendBeacon instead of fetch --- packages/stats/README.md | 2 +- packages/stats/src/index.ts | 19 ++++++------------- packages/stats/tsconfig.json | 6 +++--- packages/stats/yarn.lock | 8 ++++---- web/app/routes/script[.js].ts | 8 +------- web/package.json | 2 +- web/remix.config.js | 1 + web/tsconfig.json | 6 +++--- web/yarn.lock | 8 ++++---- 9 files changed, 24 insertions(+), 36 deletions(-) diff --git a/packages/stats/README.md b/packages/stats/README.md index 22746c9..9bdc8ac 100644 --- 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 index f95e08e..233c358 100644 --- a/packages/stats/src/index.ts +++ b/packages/stats/src/index.ts @@ -28,13 +28,6 @@ export type StatsInit = { * ``` */ export const Stats = ({ 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 = ({ team, project, baseUrl, all * Track a pageview * @param options Optional PageviewOptions */ - const pageview = async (options: PageviewOptions = {}): Promise => { + const pageview = (options: PageviewOptions = {}): boolean => { if (isBotOrLocalhost()) { - return; + return false; } const pathname = options.pathname || location.pathname; @@ -63,21 +56,21 @@ export const Stats = ({ 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 => { + 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 index 8973862..0cb8ed0 100644 --- 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 index 30a3a29..cd2bf06 100644 --- 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 index 64af42e..0af5132 100644 --- 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 index 5c9b8b1..c5b1ffa 100644 --- 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 index 0f4d03d..af00e78 100644 --- 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 index edfa758..d3547aa 100644 --- 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 index 9be2642..35544d3 100644 --- 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"