Merge pull request #13 from Robert27/feat/react-native-web

feat: add react native web support

Author: ivnbogdan

README.md

@@ -20,6 +20,22 @@ If you're targeting Android, you'll need to add the following permissions to you
 <uses-permission android:name="android.permission.INTERNET" />
 ```
 
+## Web Support
+
+This SDK also supports React Native Web! 
+
+> [!NOTE]
+> This feature is disabled by default. To enable it, you need to pass the `enableWeb` option when initializing the SDK.
+
+```js
+Aptabase.init("<YOUR_APP_KEY>", {
+  enableWeb: true,
+  appVersion: "1.0.0", // required on web — no native module provides it
+});
+```
+
+When enabled, the SDK will track events in web environments using the same behavior as the web SDKs. Which means that events will be sent immediately to the `/event` endpoint instead of grouped to the `/events` endpoint.
+
 ## Usage
 
 First, you need to get your `App Key` from Aptabase, you can find it in the `Instructions` menu on the left side menu.
@@ -64,7 +80,9 @@ export function Counter() {
   );
 }
 ```
-To disable tracking events, you can call the `dispose` function. This will stop and deinitalize the SDK.
+
+To disable tracking events, you can call the `dispose` function. This will stop and deinitialize the SDK.
+
 ```js
 import Aptabase from "@aptabase/react-native";
 

src/client.spec.ts

@@ -119,4 +119,79 @@ describe("AptabaseClient", () => {
     expect(sessionId3).toBeDefined();
     expect(sessionId3).not.toBe(sessionId1);
   });
+
+  describe("Web tracking", () => {
+    const webEnv: EnvironmentInfo = {
+      ...env,
+      osName: "web",
+      osVersion: "web",
+    };
+
+    it("should not track events when web tracking is disabled", async () => {
+      const client = new AptabaseClient("A-DEV-000", webEnv);
+      client.trackEvent("test_event");
+      await client.flush();
+      expect(fetchMock.requests().length).toEqual(0);
+    });
+
+    it("should track events when web tracking is enabled", async () => {
+      const client = new AptabaseClient("A-DEV-000", webEnv, {
+        enableWeb: true,
+      });
+      client.trackEvent("test_event");
+      await client.flush();
+      expect(fetchMock.requests().length).toEqual(1);
+      const body = await fetchMock.requests().at(0)?.json();
+      expect(body.eventName).toEqual("test_event");
+      expect(body.systemProps.osName).toBeUndefined();
+      expect(body.systemProps.osVersion).toBeUndefined();
+    });
+
+    it("should use correct endpoint for web events", async () => {
+      const client = new AptabaseClient("A-DEV-000", webEnv, {
+        enableWeb: true,
+      });
+      client.trackEvent("test_event");
+      await client.flush();
+      const request = fetchMock.requests().at(0);
+      expect(request?.url).toContain("/api/v0/event");
+    });
+
+    it("should use correct endpoint for native events", async () => {
+      const client = new AptabaseClient("A-DEV-000", env);
+      client.trackEvent("test_event");
+      await client.flush();
+      const request = fetchMock.requests().at(0);
+      expect(request?.url).toContain("/api/v0/events");
+    });
+  });
+
+  describe("Native tracking", () => {
+    it("should track events on iOS", async () => {
+      const client = new AptabaseClient("A-DEV-000", env);
+      client.trackEvent("test_event");
+      await client.flush();
+      expect(fetchMock.requests().length).toEqual(1);
+      const body = await fetchMock.requests().at(0)?.json();
+      expect(body[0].eventName).toEqual("test_event");
+      expect(body[0].systemProps.osName).toEqual("iOS");
+      expect(body[0].systemProps.osVersion).toEqual("14.3");
+    });
+
+    it("should track events on Android", async () => {
+      const androidEnv: EnvironmentInfo = {
+        ...env,
+        osName: "Android",
+        osVersion: "13",
+      };
+      const client = new AptabaseClient("A-DEV-000", androidEnv);
+      client.trackEvent("test_event");
+      await client.flush();
+      expect(fetchMock.requests().length).toEqual(1);
+      const body = await fetchMock.requests().at(0)?.json();
+      expect(body[0].eventName).toEqual("test_event");
+      expect(body[0].systemProps.osName).toEqual("Android");
+      expect(body[0].systemProps.osVersion).toEqual("13");
+    });
+  });
 });

src/client.ts

@@ -1,12 +1,14 @@
-import type { Platform } from "react-native";
 import type { AptabaseOptions } from "./types";
 import type { EnvironmentInfo } from "./env";
-import { EventDispatcher } from "./dispatcher";
+import { NativeEventDispatcher, WebEventDispatcher } from "./dispatcher";
 import { newSessionId } from "./session";
 import { HOSTS, SESSION_TIMEOUT } from "./constants";
 
 export class AptabaseClient {
-  private readonly _dispatcher: EventDispatcher;
+  private readonly _dispatcher:
+    | WebEventDispatcher
+    | NativeEventDispatcher
+    | null;
   private readonly _env: EnvironmentInfo;
   private _sessionId = newSessionId();
   private _lastTouched = new Date();
@@ -21,22 +23,36 @@ export class AptabaseClient {
       this._env.appVersion = options.appVersion;
     }
 
-    this._dispatcher = new EventDispatcher(appKey, baseUrl, env);
+    const isWeb = this._env.osName === "web";
+    const isWebTrackingEnabled = isWeb && options?.enableWeb === true;
+
+    const shouldEnableTracking = !isWeb || isWebTrackingEnabled;
+    const dispatcher = shouldEnableTracking
+      ? isWeb
+        ? new WebEventDispatcher(appKey, baseUrl, env)
+        : new NativeEventDispatcher(appKey, baseUrl, env)
+      : null;
+
+    this._dispatcher = dispatcher;
   }
 
   public trackEvent(
     eventName: string,
     props?: Record<string, string | number | boolean>
   ) {
+    if (!this._dispatcher) return;
+
+    const isWeb = this._env.osName === "web";
+
     this._dispatcher.enqueue({
       timestamp: new Date().toISOString(),
       sessionId: this.evalSessionId(),
       eventName: eventName,
       systemProps: {
         isDebug: this._env.isDebug,
         locale: this._env.locale,
-        osName: this._env.osName,
-        osVersion: this._env.osVersion,
+        osName: isWeb ? undefined : this._env.osName,
+        osVersion: isWeb ? undefined : this._env.osVersion,
         appVersion: this._env.appVersion,
         appBuildNumber: this._env.appBuildNumber,
         sdkVersion: this._env.sdkVersion,
@@ -46,6 +62,10 @@ export class AptabaseClient {
   }
 
   public startPolling(flushInterval: number) {
+    if (!(this._dispatcher instanceof NativeEventDispatcher)) {
+      return;
+    }
+
     this.stopPolling();
 
     this._flushTimer = setInterval(this.flush.bind(this), flushInterval);
@@ -59,6 +79,7 @@ export class AptabaseClient {
   }
 
   public flush(): Promise<void> {
+    if (!this._dispatcher) return Promise.resolve();
     return this._dispatcher.flush();
   }
 

src/dispatcher.spec.ts

@@ -1,7 +1,7 @@
 import "vitest-fetch-mock";
-import { EventDispatcher } from "./dispatcher";
+import { NativeEventDispatcher, WebEventDispatcher } from "./dispatcher";
 import { beforeEach, describe, expect, it } from "vitest";
-import { EnvironmentInfo } from "./env";
+import type { EnvironmentInfo } from "./env";
 
 const env: EnvironmentInfo = {
   isDebug: false,
@@ -32,11 +32,11 @@ const expectEventsCount = async (
   expect(body.length).toEqual(expectedNumOfEvents);
 };
 
-describe("EventDispatcher", () => {
-  let dispatcher: EventDispatcher;
+describe("NativeEventDispatcher", () => {
+  let dispatcher: NativeEventDispatcher;
 
   beforeEach(() => {
-    dispatcher = new EventDispatcher(
+    dispatcher = new NativeEventDispatcher(
       "A-DEV-000",
       "https://localhost:3000",
       env
@@ -138,3 +138,63 @@ describe("EventDispatcher", () => {
     expectRequestCount(1);
   });
 });
+
+describe("WebEventDispatcher", () => {
+  let dispatcher: WebEventDispatcher;
+
+  beforeEach(() => {
+    dispatcher = new WebEventDispatcher(
+      "A-DEV-000",
+      "https://localhost:3000",
+      env
+    );
+    fetchMock.resetMocks();
+  });
+
+  it("should send event with correct headers", async () => {
+    dispatcher.enqueue(createEvent("app_started"));
+
+    const request = await fetchMock.requests().at(0);
+    expect(request).not.toBeUndefined();
+    expect(request?.url).toEqual("https://localhost:3000/api/v0/event");
+    expect(request?.headers.get("Content-Type")).toEqual("application/json");
+    expect(request?.headers.get("App-Key")).toEqual("A-DEV-000");
+  });
+
+  it("should dispatch single event", async () => {
+    fetchMock.mockResponseOnce("{}");
+
+    dispatcher.enqueue(createEvent("app_started"));
+
+    expectRequestCount(1);
+    const body = await fetchMock.requests().at(0)?.json();
+    expect(body.eventName).toEqual("app_started");
+  });
+
+  it("should dispatch multiple events individually", async () => {
+    fetchMock.mockResponseOnce("{}");
+    fetchMock.mockResponseOnce("{}");
+
+    dispatcher.enqueue([createEvent("app_started"), createEvent("app_exited")]);
+
+    expectRequestCount(2);
+    const body1 = await fetchMock.requests().at(0)?.json();
+    const body2 = await fetchMock.requests().at(1)?.json();
+    expect(body1.eventName).toEqual("app_started");
+    expect(body2.eventName).toEqual("app_exited");
+  });
+
+  it("should not retry requests that failed with 4xx", async () => {
+    fetchMock.mockResponseOnce("{}", { status: 400 });
+
+    dispatcher.enqueue(createEvent("hello_world"));
+
+    expectRequestCount(1);
+    const body = await fetchMock.requests().at(0)?.json();
+    expect(body.eventName).toEqual("hello_world");
+
+    dispatcher.enqueue(createEvent("hello_world"));
+
+    expectRequestCount(2);
+  });
+});