Merge pull request #9 from aptabase/fix/events-before-init

fix: send events tracked before init

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/cold-flies-suffer.md

@@ -0,0 +1,5 @@
+---
+'@aptabase/react': patch
+---
+
+fix: events tracked at page load are sometimes not sent

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": ["next-with-approuter", "next-with-pages", "plasmo-browserext", "remix-example"]
+}

examples/remix-app/package.json

@@ -1,4 +1,5 @@
 {
+  "name": "remix-example",
   "private": true,
   "sideEffects": false,
   "scripts": {

package.json

@@ -12,10 +12,11 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "devDependencies": {
-    "tsup": "7.2.0",
     "@types/node": "20.5.7",
     "prettier": "3.0.3",
-    "turbo": "1.10.13"
+    "tsup": "7.2.0",
+    "turbo": "1.10.13",
+    "@changesets/cli": "^2.27.8"
   },
   "engines": {
     "npm": ">=7.0.0",

packages/react/src/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useEffect } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
 import { getApiUrl, inMemorySessionId, sendEvent, validateAppKey, type AptabaseOptions } from '../../shared';
 
 // Session expires after 1 hour of inactivity
@@ -10,10 +10,12 @@ const sdkVersion = `aptabase-react@${process.env.PKG_VERSION}`;
 let _appKey = '';
 let _apiUrl: string | undefined;
 let _options: AptabaseOptions | undefined;
+let _eventsBeforeInit: { [key: string]: Record<string, string | number | boolean> | undefined } = {};
 
 type ContextProps = {
   appKey?: string;
   options?: AptabaseOptions;
+  isInitialized: boolean;
 };
 
 function init(appKey: string, options?: AptabaseOptions) {
@@ -22,6 +24,11 @@ function init(appKey: string, options?: AptabaseOptions) {
   _apiUrl = options?.apiUrl ?? getApiUrl(appKey, options);
   _appKey = appKey;
   _options = options;
+
+  Object.keys(_eventsBeforeInit).forEach((eventName) => {
+    trackEvent(eventName, _eventsBeforeInit[eventName]);
+  });
+  _eventsBeforeInit = {};
 }
 
 async function trackEvent(eventName: string, props?: Record<string, string | number | boolean>): Promise<void> {
@@ -41,7 +48,12 @@ async function trackEvent(eventName: string, props?: Record<string, string | num
   });
 }
 
-const AptabaseContext = createContext<ContextProps>({});
+function trackEventBeforeInit(eventName: string, props?: Record<string, string | number | boolean>): Promise<void> {
+  _eventsBeforeInit[eventName] = props;
+  return Promise.resolve();
+}
+
+const AptabaseContext = createContext<ContextProps>({ isInitialized: false });
 
 type Props = {
   appKey: string;
@@ -56,11 +68,14 @@ export type AptabaseClient = {
 };
 
 export function AptabaseProvider({ appKey, options, children }: Props) {
+  const [isInitialized, setIsInitialized] = useState(false);
+
   useEffect(() => {
     init(appKey, options);
+    setIsInitialized(true);
   }, [appKey, options]);
 
-  return <AptabaseContext.Provider value={{ appKey, options }}>{children}</AptabaseContext.Provider>;
+  return <AptabaseContext.Provider value={{ appKey, options, isInitialized }}>{children}</AptabaseContext.Provider>;
 }
 
 export function useAptabase(): AptabaseClient {
@@ -77,6 +92,12 @@ export function useAptabase(): AptabaseClient {
     };
   }
 
+  if (!ctx.isInitialized) {
+    return {
+      trackEvent: trackEventBeforeInit,
+    };
+  }
+
   return {
     trackEvent,
   };

packages/shared.ts

@@ -9,7 +9,7 @@ let _lastTouched = new Date();
 const _hosts: { [region: string]: string } = {
   US: 'https://us.aptabase.com',
   EU: 'https://eu.aptabase.com',
-  DEV: 'http://localhost:3000',
+  DEV: 'https://localhost:3000',
   SH: '',
 };
 
@@ -158,4 +158,4 @@ function getIsDebug(): boolean {
   defaultIsDebug = location.hostname === 'localhost';
 
   return defaultIsDebug;
-}
+}