refactor the packages to remove internal dependency
This commit is contained in:
goenning
parent
ff7b4b38e2
commit
9900d6ea6d
16 changed files with 939 additions and 178 deletions
|
|
@ -1,3 +1,7 @@
|
|||
## 0.4.0
|
||||
|
||||
- Internal refactor
|
||||
|
||||
## 0.3.2
|
||||
|
||||
- better version of the session id generator
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
|
||||
# JavaScript SDK for Aptabase
|
||||
# Aptabase SDK for Web Apps
|
||||
|
||||
A tiny SDK (1 kB) to instrument your web app with Aptabase, an Open Source, Privacy-First and Simple Analytics for Mobile, Desktop and Web Apps.
|
||||
|
||||
|
|
@ -12,7 +12,7 @@ Building a React app? Use the `@aptabase/react` package instead.
|
|||
|
||||
## Install
|
||||
|
||||
Install the SDK using your preferred JavaScript package manager
|
||||
Install the SDK using npm or your preferred JavaScript package manager
|
||||
|
||||
```bash
|
||||
npm add @aptabase/web
|
||||
|
|
@ -22,7 +22,7 @@ npm add @aptabase/web
|
|||
|
||||
First you need to get your `App Key` from Aptabase, you can find it in the `Instructions` menu on the left side menu.
|
||||
|
||||
Initialized the SDK using your `App Key`:
|
||||
Initialize the SDK using your `App Key`:
|
||||
|
||||
```js
|
||||
import { init } from '@aptabase/web';
|
||||
|
|
@ -32,7 +32,7 @@ init('<YOUR_APP_KEY>'); // 👈 this is where you enter your App Key
|
|||
|
||||
The init function also supports an optional second parameter, which is an object with the `appVersion` property.
|
||||
|
||||
It's up to you to decide what to get the version of your app, but it's generally recommended to use your bundler (like Webpack, Vite, Rollup, etc.) to inject the values at build time.
|
||||
It's up to you to decide how to get the version of your app, but it's generally recommended to use your bundler (like Webpack, Vite, Rollup, etc.) to inject the values at build time. Alternatively you can also pass it in manually.
|
||||
|
||||
Afterwards you can start tracking events with `trackEvent`:
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ trackEvent('play_music', { name: 'Here comes the sun' }); // An event with a cus
|
|||
|
||||
A few important notes:
|
||||
|
||||
1. The SDK will automatically enhance the event with some useful information, like the OS, the app version, and other things.
|
||||
1. The SDK will automatically enhance the event with some useful information, like the OS and other properties.
|
||||
2. You're in control of what gets sent to Aptabase. This SDK does not automatically track any events, you need to call `trackEvent` manually.
|
||||
- Because of this, it's generally recommended to at least track an event at startup
|
||||
3. You do not need to await the `trackEvent` function, it'll run in the background.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@aptabase/web",
|
||||
"version": "0.3.2",
|
||||
"version": "0.4.0",
|
||||
"type": "module",
|
||||
"description": "JavaScript SDK for Aptabase: Open Source, Privacy-First and Simple Analytics for Mobile, Desktop and Web Apps",
|
||||
"main": "./dist/index.cjs",
|
||||
|
|
|
|||
1
packages/web/src/global.d.ts
vendored
1
packages/web/src/global.d.ts
vendored
|
|
@ -1 +0,0 @@
|
|||
declare var __APTABASE_SDK_VERSION__: string;
|
||||
|
|
@ -1,123 +1,31 @@
|
|||
import { newSessionId } from './session';
|
||||
|
||||
export type AptabaseOptions = {
|
||||
host?: string;
|
||||
appVersion?: string;
|
||||
isDebug?: boolean;
|
||||
};
|
||||
|
||||
const locale = getBrowserLocale();
|
||||
import { inMemorySessionId, sendEvent, validateAppKey, type AptabaseOptions } from '../../shared';
|
||||
|
||||
// Session expires after 1 hour of inactivity
|
||||
const SESSION_TIMEOUT = 1 * 60 * 60;
|
||||
let _sessionId = newSessionId();
|
||||
let _lastTouched = new Date();
|
||||
let _appKey = '';
|
||||
let _apiUrl = '';
|
||||
let _isDebug = false;
|
||||
let _appVersion = '';
|
||||
const sdkVersion = `aptabase-web@${process.env.PKG_VERSION}`;
|
||||
|
||||
const _hosts: { [region: string]: string } = {
|
||||
US: 'https://us.aptabase.com',
|
||||
EU: 'https://eu.aptabase.com',
|
||||
DEV: 'http://localhost:3000',
|
||||
SH: '',
|
||||
};
|
||||
let _appKey = '';
|
||||
let _options: AptabaseOptions | undefined;
|
||||
|
||||
export { type AptabaseOptions };
|
||||
|
||||
export function init(appKey: string, options?: AptabaseOptions) {
|
||||
const parts = appKey.split('-');
|
||||
if (parts.length !== 3 || _hosts[parts[1]] === undefined) {
|
||||
console.warn(`The Aptabase App Key "${appKey}" is invalid. Tracking will be disabled.`);
|
||||
return;
|
||||
}
|
||||
if (!validateAppKey(appKey)) return;
|
||||
|
||||
const baseUrl = getBaseUrl(parts[1], options);
|
||||
_apiUrl = `${baseUrl}/api/v0/event`;
|
||||
_appKey = appKey;
|
||||
_isDebug = options?.isDebug ?? getIsDebug();
|
||||
_appVersion = options?.appVersion ?? '';
|
||||
_options = options;
|
||||
}
|
||||
|
||||
export async function trackEvent(eventName: string, props?: Record<string, string | number | boolean>): Promise<void> {
|
||||
if (!_appKey) return;
|
||||
const sessionId = inMemorySessionId(SESSION_TIMEOUT);
|
||||
|
||||
if (typeof window === 'undefined' || !window.fetch) {
|
||||
console.warn(`Aptabase: trackEvent requires a browser environment. Event "${eventName}" will not be tracked.`);
|
||||
return;
|
||||
}
|
||||
|
||||
let now = new Date();
|
||||
const diffInMs = now.getTime() - _lastTouched.getTime();
|
||||
const diffInSec = Math.floor(diffInMs / 1000);
|
||||
if (diffInSec > SESSION_TIMEOUT) {
|
||||
_sessionId = newSessionId();
|
||||
}
|
||||
_lastTouched = now;
|
||||
|
||||
try {
|
||||
const response = await window.fetch(_apiUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'App-Key': _appKey,
|
||||
},
|
||||
credentials: 'omit',
|
||||
body: JSON.stringify({
|
||||
timestamp: new Date().toISOString(),
|
||||
sessionId: _sessionId,
|
||||
eventName: eventName,
|
||||
systemProps: {
|
||||
locale,
|
||||
isDebug: _isDebug,
|
||||
appVersion: _appVersion,
|
||||
sdkVersion: globalThis.__APTABASE_SDK_VERSION__ ?? `aptabase-web@${process.env.PKG_VERSION}`,
|
||||
},
|
||||
props: props,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.status >= 300) {
|
||||
const responseBody = await response.text();
|
||||
console.warn(`Failed to send event "${eventName}": ${response.status} ${responseBody}`);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn(`Failed to send event "${eventName}"`);
|
||||
console.warn(e);
|
||||
}
|
||||
}
|
||||
|
||||
function getBaseUrl(region: string, options?: AptabaseOptions): string | undefined {
|
||||
if (region === 'SH') {
|
||||
if (!options?.host) {
|
||||
console.warn(`Host parameter must be defined when using Self-Hosted App Key. Tracking will be disabled.`);
|
||||
return;
|
||||
}
|
||||
return options.host;
|
||||
}
|
||||
|
||||
return _hosts[region];
|
||||
}
|
||||
|
||||
function getBrowserLocale(): string | null {
|
||||
if (typeof navigator === 'undefined') {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (navigator.languages.length > 0) {
|
||||
return navigator.languages[0];
|
||||
}
|
||||
|
||||
return navigator.language;
|
||||
}
|
||||
|
||||
function getIsDebug(): boolean {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (typeof location === 'undefined') {
|
||||
return false;
|
||||
}
|
||||
|
||||
return location.hostname === 'localhost';
|
||||
await sendEvent({
|
||||
sessionId,
|
||||
appKey: _appKey,
|
||||
isDebug: _options?.isDebug,
|
||||
appVersion: _options?.appVersion,
|
||||
sdkVersion,
|
||||
eventName,
|
||||
props,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
export function newSessionId(): string {
|
||||
const epochInSeconds = Math.floor(Date.now() / 1000).toString();
|
||||
const random = Math.floor(Math.random() * 100000000)
|
||||
.toString()
|
||||
.padStart(8, '0');
|
||||
|
||||
return epochInSeconds + random;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue