@blux.ai/web-sdk 2.2.0 → 2.2.2

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blux.ai/web-sdk",
-    "version": "2.2.0",
+    "version": "2.2.2",
     "description": "The official Blux JavaScript browser client library",
     "main": "dist/src/index.js",
     "module": "dist/src/index.js",

package/dist/src/BluxClient.d.ts

@@ -1,4 +1,4 @@
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, Subject } from "rxjs";
 import { DevicePlatform, type APIs } from "./apis/APIs";
 import { BridgePlatform } from "./bridges/Bridge";
 import type { Event as BluxEvent } from "./events/Event";
@@ -13,7 +13,7 @@ type BluxUser = {
     id: string;
     bluxAPIKey: string;
     applicationId: string;
-    deviceId?: string;
+    deviceId: string;
     userId?: string;
 };
 type BridgeOptions = {
@@ -24,13 +24,38 @@ type BridgeOptions = {
 } | {
     bridgePlatform?: BridgePlatform;
 };
+type ApiRequestQueueJob<T> = {
+    action: () => Promise<T>;
+    resolve: (value: T) => void;
+    reject: (error: unknown) => void;
+};
+type UserPropertiesQueueItem = {
+    userProperties?: APIs.bluxUsersUpdateProperties.Body["user_properties"];
+    customUserProperties?: APIs.bluxUsersUpdateProperties.Body["custom_user_properties"];
+    resolve: () => void;
+    reject: (error: unknown) => void;
+};
 export declare class BluxClient {
     private readonly api;
     private readonly sdkInfo;
     readonly bluxUser$: BehaviorSubject<BluxUser | undefined>;
-    readonly requestQueue$: BehaviorSubject<EventRequest[]>;
-    readonly inappQueue$: BehaviorSubject<APIs.inappsDispatcher.ResponseData | undefined>;
-    private readonly inappPollDelay$;
+    /**
+     * 내부 async 작업을 1개씩 직렬로 처리하는 큐입니다.
+     * `enqueueRequest()`로 넣으면, 호출자는 완료 시점까지 `await` 할 수 있습니다.
+     */
+    readonly apiRequestQueue$: Subject<ApiRequestQueueJob<any>>;
+    readonly inappQueue$: BehaviorSubject<{
+        notificationId: string;
+        inappId: string;
+        htmlString: string;
+        baseUrl: string;
+    } | undefined>;
+    readonly eventQueue$: Subject<EventRequest>;
+    readonly userPropertiesQueue$: Subject<UserPropertiesQueueItem>;
+    private readonly INITIAL_NEXT_POLL_DELAY_MS;
+    private readonly nextPollDelayMs$;
+    private cachedNextPollDelayMs;
+    private lastPollTimestamp;
     private readonly bluxApplicationId;
     private readonly bluxAPIKey;
     private readonly bridge;
@@ -47,9 +72,8 @@ export declare class BluxClient {
         errorMessage?: string;
         success: boolean;
     }) => void);
+    private enqueueRequest;
     private generateApiHeader;
-    private handleSendRequest;
-    private handleInappEvent;
     private displayInapp;
     private init;
     setLogLevel(logLevel: LogLevel): void;
@@ -59,19 +83,10 @@ export declare class BluxClient {
     }): Promise<void>;
     signOut(): Promise<void>;
     setUserProperties({ userProperties, }: {
-        userProperties: {
-            phone_number?: string;
-            email_address?: string;
-            marketing_notification_consent?: boolean;
-            nighttime_notification_consent?: boolean;
-            marketing_notification_sms_consent?: boolean;
-            marketing_notification_email_consent?: boolean;
-            marketing_notification_push_consent?: boolean;
-            marketing_notification_kakao_consent?: boolean;
-        };
+        userProperties: NonNullable<APIs.bluxUsersUpdateProperties.Body["user_properties"]>;
     }): Promise<void>;
     setCustomUserProperties({ customUserProperties, }: {
-        customUserProperties: Record<string, string | boolean | number | null>;
+        customUserProperties: NonNullable<APIs.bluxUsersUpdateProperties.Body["custom_user_properties"]>;
     }): Promise<void>;
     sendEvent(event: BluxEvent | BluxEvent[]): void;
     private urlAndRef$;

package/dist/src/BluxClient.js

@@ -1,19 +1,17 @@
 import axios from "axios";
-// eslint-disable-next-line no-restricted-imports
+import ObjectId from "bson-objectid";
 import dayjs from "dayjs";
-import { asyncScheduler, BehaviorSubject, catchError, combineLatest, concatMap, debounceTime, distinctUntilChanged, exhaustMap, filter, firstValueFrom, from, groupBy, map, mergeMap, NEVER, observeOn, Subject, switchMap, throwError, timeout, timer, withLatestFrom, } from "rxjs";
+import { BehaviorSubject, bufferTime, catchError, combineLatest, concatMap, debounceTime, filter, first, firstValueFrom, from, groupBy, merge, mergeMap, NEVER, Subject, switchMap, throwError, timer, timeout, map, } from "rxjs";
 import packageJson from "../package.json";
 import { DevicePlatform } from "./apis/APIs";
 import { createCrmEvent } from "./apis/createCrmEvent";
 import { collectEvent } from "./apis/createEvent";
 import { getItemRecommendations } from "./apis/getItemRecommendations";
-import { inappsDispatch } from "./apis/inappsDispatch";
 import { initialize } from "./apis/initialize";
 import { notificationsUpdate } from "./apis/notificationsUpdate";
 import { signIn } from "./apis/signIn";
 import { signOut } from "./apis/signOut";
-import { updateCustomUserProperties } from "./apis/updateCustomUserProperties";
-import { updateUserProperties } from "./apis/updateUserProperties";
+import { updateProperties } from "./apis/updateProperties";
 import { FlutterBridge } from "./bridges/FlutterBridge";
 import { RNBridge } from "./bridges/RNBridge";
 import { BLUX_ATTRIBUTES } from "./constants/BLUX_ATTRIBUTES";
@@ -30,9 +28,19 @@ export class BluxClient {
         version: packageJson.version,
     };
     bluxUser$ = new BehaviorSubject(undefined);
-    requestQueue$ = new BehaviorSubject([]);
+    /**
+     * 내부 async 작업을 1개씩 직렬로 처리하는 큐입니다.
+     * `enqueueRequest()`로 넣으면, 호출자는 완료 시점까지 `await` 할 수 있습니다.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    apiRequestQueue$ = new Subject();
     inappQueue$ = new BehaviorSubject(undefined);
-    inappPollDelay$ = new BehaviorSubject(5000);
+    eventQueue$ = new Subject();
+    userPropertiesQueue$ = new Subject();
+    INITIAL_NEXT_POLL_DELAY_MS = 10 * 1000;
+    nextPollDelayMs$ = new BehaviorSubject(this.INITIAL_NEXT_POLL_DELAY_MS);
+    cachedNextPollDelayMs = this.INITIAL_NEXT_POLL_DELAY_MS;
+    lastPollTimestamp = Date.now();
     bluxApplicationId;
     bluxAPIKey;
     bridge;
@@ -75,39 +83,114 @@ export class BluxClient {
         const baseUrl = window?._BLUX_SDK_?.baseUrl ?? "https://api.blux.ai/prod";
         this.api.defaults.baseURL = baseUrl;
         this.bridge = this.resolveBridge(bridgeOptions);
+        // api 요청 항상 하나씩 처리
+        this.apiRequestQueue$
+            .pipe(concatMap(async (job) => {
+            try {
+                const result = await job.action();
+                job.resolve(result);
+            }
+            catch (error) {
+                job.reject(error);
+            }
+        }))
+            .subscribe();
+        /**
+         * (1) 보내야할 이벤트를 100ms씩 뭉쳐서 보내고, 1개 이상 쌓여있을 때 api 요청
+         * (2) collectEvent의 응답에서 온 nextPollDelayMs 값 만큼 이후에 빈 배열로 api 요청 (1)로 보내면 초기화됨
+         */
         if (!this.bridge) {
-            onlineAndVisible$
-                .pipe(switchMap((active) => active
-                ? this.inappPollDelay$.pipe(distinctUntilChanged(), switchMap((delay, index) => 
-                // init 직후는 바로 호출, 이후에는 delay 후 호출
-                index === 0 ? timer(0, delay) : timer(delay, delay)))
-                : NEVER), withLatestFrom(this.bluxUser$), map(([_, bluxUser]) => bluxUser), filterNullable(), exhaustMap((bluxUser) => this.handleInappEvent(bluxUser)))
+            merge(this.eventQueue$.pipe(bufferTime(100), filter((requests) => requests.length > 0)), 
+            // onlineAndVisible일 때만 polling, 남은 시간 계산하여 타이머 시작
+            combineLatest([this.nextPollDelayMs$, onlineAndVisible$]).pipe(switchMap(([delay, isOnlineAndVisible]) => {
+                if (!isOnlineAndVisible || delay == null)
+                    return NEVER;
+                const targetTime = this.lastPollTimestamp + delay;
+                const remainingDelay = Math.max(0, targetTime - Date.now());
+                return timer(remainingDelay);
+            }), map(() => [])))
+                .pipe(concatMap(async (requests) => {
+                this.nextPollDelayMs$.next(null);
+                try {
+                    const bluxUser = await this.getBluxUserWithTimeout();
+                    const events = requests.map((request) => ({
+                        ...request,
+                        internal_event_properties: {
+                            ...request.internal_event_properties,
+                            url: `${this.urlAndRef$.value?.url ?? null}`,
+                            ref: `${this.urlAndRef$.value?.ref ?? null}`,
+                        },
+                        blux_id: bluxUser.id,
+                        device_id: bluxUser.deviceId,
+                    }));
+                    const { data: { nextPollDelayMs, inapp }, } = await this.enqueueRequest(() => collectEvent(this.api, {
+                        blux_user_id: bluxUser.id,
+                        application_id: bluxUser.applicationId,
+                    }, {
+                        device_id: bluxUser.deviceId,
+                        events,
+                    }, this.generateApiHeader(bluxUser)));
+                    this.lastPollTimestamp = Date.now();
+                    this.cachedNextPollDelayMs = nextPollDelayMs;
+                    this.nextPollDelayMs$.next(nextPollDelayMs);
+                    if (inapp) {
+                        this.inappQueue$.next(inapp);
+                    }
+                }
+                catch (error) {
+                    Logger.error(error, { tags: { from: "eventQueue" } });
+                    this.lastPollTimestamp = Date.now();
+                    if (this.cachedNextPollDelayMs !== null) {
+                        const nextPollDelay = this.cachedNextPollDelayMs > 1000 * 60 * 60 * 24
+                            ? this.cachedNextPollDelayMs
+                            : this.cachedNextPollDelayMs * 2;
+                        this.cachedNextPollDelayMs = nextPollDelay;
+                        this.nextPollDelayMs$.next(nextPollDelay);
+                    }
+                }
+            }))
                 .subscribe();
         }
-        combineLatest([this.requestQueue$, this.bluxUser$.pipe(filterNullable())])
-            .pipe(filter(([requests]) => requests.length > 0), exhaustMap(async ([requests, bluxUser]) => {
-            const events = requests.map((request) => ({
-                ...request,
-                internal_event_properties: {
-                    ...request.internal_event_properties,
-                    url: `${this.urlAndRef$.value?.url ?? null}`,
-                    ref: `${this.urlAndRef$.value?.ref ?? null}`,
-                },
-                blux_id: bluxUser.id,
-                device_id: bluxUser.deviceId,
-            }));
-            await this.handleSendRequest({ bluxUser, events });
-            return requests.map((r) => r.id); // TODO: @all return successed requests only
-        }), map((requestIdsSucceeded) => this.requestQueue$.value.filter((request) => !requestIdsSucceeded.includes(request.id))), observeOn(asyncScheduler))
-            .subscribe(this.requestQueue$);
+        // api 호출 수 절감을 위해 100ms씩 뭉쳐서 보내고, custom_user_properties와 user_properties를 합쳐서 보냄
+        this.userPropertiesQueue$
+            .pipe(bufferTime(100), filter((items) => items.length > 0), concatMap(async (items) => {
+            try {
+                const bluxUser = await this.getBluxUserWithTimeout();
+                const mergedUserProperties = items.reduce((acc, item) => ({ ...acc, ...(item.userProperties ?? {}) }), {});
+                const mergedCustomUserProperties = items.reduce((acc, item) => ({ ...acc, ...(item.customUserProperties ?? {}) }), {});
+                const payload = {};
+                if (Object.keys(mergedUserProperties).length > 0) {
+                    payload.user_properties = mergedUserProperties;
+                }
+                if (Object.keys(mergedCustomUserProperties).length > 0) {
+                    payload.custom_user_properties = mergedCustomUserProperties;
+                }
+                if (Object.keys(payload).length === 0) {
+                    items.forEach((item) => item.resolve());
+                    return;
+                }
+                await this.enqueueRequest(() => updateProperties(this.api, {
+                    application_id: bluxUser.applicationId,
+                    blux_user_id: bluxUser.id,
+                }, payload, this.generateApiHeader(bluxUser)));
+                items.forEach((item) => item.resolve());
+            }
+            catch (error) {
+                items.forEach((item) => item.reject(error));
+                Logger.error(error, { tags: { from: "userPropertiesQueue" } });
+            }
+        }))
+            .subscribe();
         this.bluxUser$.subscribe((bluxUser) => {
             if (bluxUser)
                 SessionStorage.setBluxUserId(bluxUser.id);
         });
-        this.inappQueue$
-            .pipe(filterNullable())
-            .pipe(concatMap((inapp) => from(this.displayInapp(inapp))))
-            .subscribe();
+        if (!this.bridge) {
+            this.inappQueue$
+                .pipe(filterNullable())
+                .pipe(concatMap((inapp) => onlineAndVisible$.pipe(first(Boolean), concatMap(() => from(this.displayInapp(inapp))))))
+                .subscribe();
+        }
         this.init()
             .then(() => {
             completionCallback?.({ success: true });
@@ -116,44 +199,19 @@ export class BluxClient {
             completionCallback?.({ success: false, errorMessage: error.message });
         });
     }
+    async enqueueRequest(action) {
+        return new Promise((resolve, reject) => {
+            const item = { action, resolve, reject };
+            this.apiRequestQueue$.next(item);
+        });
+    }
     generateApiHeader({ bluxAPIKey }) {
         return {
             Authorization: bluxAPIKey,
         };
     }
-    async handleSendRequest({ bluxUser, events, }) {
-        try {
-            await collectEvent(this.api, {
-                blux_user_id: bluxUser.id,
-                application_id: bluxUser.applicationId,
-            }, {
-                events,
-            }, this.generateApiHeader(bluxUser));
-        }
-        catch (error) {
-            Logger.error(error, { tags: { from: "request-events-api" } });
-        }
-    }
-    async handleInappEvent(bluxUser) {
-        try {
-            const { data } = await inappsDispatch(this.api, {
-                application_id: bluxUser.applicationId,
-            }, {
-                blux_user_id: bluxUser.id,
-                device_id: bluxUser.deviceId ?? "",
-                platform: this.sdkInfo.type,
-            }, this.generateApiHeader(bluxUser));
-            this.inappPollDelay$.next(data.nextPollDelay);
-            this.inappQueue$.next(data);
-        }
-        catch (error) {
-            Logger.error(error, { tags: { from: "request-inapps-api" } });
-        }
-    }
     async displayInapp(inapp) {
         return new Promise((resolve) => {
-            if (!inapp.shouldDisplay)
-                return resolve(true);
             const bluxUser = this.bluxUser$.getValue();
             const hideTimestamp = LocalStorage.getInappHideTimestamp(inapp.inappId);
             const isShouldSkip = hideTimestamp !== null && dayjs().isBefore(dayjs(hideTimestamp));
@@ -197,19 +255,24 @@ export class BluxClient {
                 }
                 else if (message.action === "link") {
                     if (bluxUser) {
-                        createCrmEvent(this.api, {
+                        this.enqueueRequest(() => createCrmEvent(this.api, {
                             application_id: this.bluxApplicationId,
                         }, {
                             notification_id: inapp.notificationId,
                             crm_event_type: "inapp_opened",
                             captured_at: new Date().toISOString(),
-                        }, this.generateApiHeader(bluxUser));
+                        }, this.generateApiHeader(bluxUser)));
                     }
                     if (message.data.is_blux_landing) {
                         // TODO: @all 스키마상에는 개인화 랜딩이 존재하나, 콘솔에는 필드가 없음 -> 추후 이에 따른 핸들링이 필요함
                     }
                     else {
-                        window.open(message.data.url, "_blank");
+                        if (message.data.open_in_new_tab) {
+                            window.open(message.data.url, "_blank");
+                        }
+                        else {
+                            window.location.href = message.data.url;
+                        }
                     }
                 }
                 iframeElement.remove();
@@ -222,12 +285,12 @@ export class BluxClient {
             window.visualViewport?.addEventListener("scroll", handleViewportChange);
             window.addEventListener("message", handleMessage);
             if (bluxUser) {
-                notificationsUpdate(this.api, {
+                this.enqueueRequest(() => notificationsUpdate(this.api, {
                     application_id: this.bluxApplicationId,
                     notification_id: inapp.notificationId,
                 }, {
                     status: "received",
-                }, this.generateApiHeader(bluxUser));
+                }, this.generateApiHeader(bluxUser)));
             }
         });
     }
@@ -240,6 +303,8 @@ export class BluxClient {
             return;
         }
         const blux_user_id = new URLSearchParams(window.location.search).get("blux_user_id");
+        const sessionId = SessionStorage.getSessionId() ?? new ObjectId().toHexString();
+        SessionStorage.setSessionId(sessionId);
         const isBluxUserIdExistInSessionStorage = SessionStorage.getBluxUserId();
         if (!isBluxUserIdExistInSessionStorage)
             this.sendEvent(new VisitEvent({}));
@@ -284,7 +349,7 @@ export class BluxClient {
             this.impressedElements.push(entry.target);
         });
         const { data } = await initialize(this.api, { application_id: this.bluxApplicationId }, {
-            isVisitHandlingInSdk: true,
+            session_id: sessionId ?? undefined,
             device_id: deviceId ?? undefined,
             country_code: navigator.language.split("-")[1],
             device_model: navigator.userAgent,
@@ -319,18 +384,19 @@ export class BluxClient {
         return bluxUser;
     }
     async signIn({ userId }) {
-        if (this.bridge) {
-            this.bridge.signIn({ userId });
-            return;
-        }
         try {
+            if (this.bridge) {
+                this.bridge.signIn({ userId });
+                return;
+            }
             const bluxUser = await this.getBluxUserWithTimeout();
-            const { data: { blux_user_id: bluxIdInResponse }, } = await signIn(this.api, { application_id: bluxUser.applicationId, blux_user_id: bluxUser.id }, { user_id: userId, device_id: bluxUser.deviceId }, this.generateApiHeader(bluxUser));
+            const { data: { blux_user_id: bluxIdInResponse }, } = await this.enqueueRequest(() => signIn(this.api, { application_id: bluxUser.applicationId, blux_user_id: bluxUser.id }, { user_id: userId, device_id: bluxUser.deviceId }, this.generateApiHeader(bluxUser)));
             if (bluxIdInResponse !== bluxUser.id) {
                 Logger.debug("Blux id is changed in signIn.");
                 this.bluxUser$.next({
                     ...bluxUser,
                     id: bluxIdInResponse,
+                    userId,
                 });
             }
         }
@@ -339,17 +405,18 @@ export class BluxClient {
         }
     }
     async signOut() {
-        if (this.bridge) {
-            this.bridge.signOut();
-            return;
-        }
         try {
+            if (this.bridge) {
+                this.bridge.signOut();
+                return;
+            }
             const bluxUser = await this.getBluxUserWithTimeout();
-            const { data: { blux_user_id: bluxIdInResponse }, } = await signOut(this.api, { application_id: bluxUser.applicationId, blux_user_id: bluxUser.id }, { device_id: bluxUser.deviceId }, this.generateApiHeader(bluxUser));
+            const { data: { blux_user_id: bluxIdInResponse }, } = await this.enqueueRequest(() => signOut(this.api, { application_id: bluxUser.applicationId, blux_user_id: bluxUser.id }, { device_id: bluxUser.deviceId }, this.generateApiHeader(bluxUser)));
             Logger.debug("Blux id is changed in signOut.");
             this.bluxUser$.next({
                 ...bluxUser,
                 id: bluxIdInResponse,
+                userId: undefined,
             });
         }
         catch (error) {
@@ -357,41 +424,55 @@ export class BluxClient {
         }
     }
     async setUserProperties({ userProperties, }) {
-        if (this.bridge) {
-            this.bridge.setUserProperties(userProperties);
-            return;
-        }
         try {
-            const bluxUser = await this.getBluxUserWithTimeout();
-            await updateUserProperties(this.api, { application_id: bluxUser.applicationId, blux_user_id: bluxUser.id }, { properties: userProperties }, this.generateApiHeader(bluxUser));
+            if (this.bridge) {
+                this.bridge.setUserProperties(userProperties);
+                return;
+            }
+            await new Promise((resolve, reject) => {
+                this.userPropertiesQueue$.next({
+                    userProperties,
+                    resolve,
+                    reject,
+                });
+            });
         }
         catch (error) {
             Logger.error(error, { tags: { from: "setUserProperties" } });
         }
     }
     async setCustomUserProperties({ customUserProperties, }) {
-        if (this.bridge) {
-            this.bridge.setCustomUserProperties(customUserProperties);
-            return;
-        }
         try {
-            const bluxUser = await this.getBluxUserWithTimeout();
-            await updateCustomUserProperties(this.api, { application_id: bluxUser.applicationId, blux_user_id: bluxUser.id }, { properties: customUserProperties }, this.generateApiHeader(bluxUser));
+            if (this.bridge) {
+                this.bridge.setCustomUserProperties(customUserProperties);
+                return;
+            }
+            await new Promise((resolve, reject) => {
+                this.userPropertiesQueue$.next({
+                    customUserProperties,
+                    resolve,
+                    reject,
+                });
+            });
         }
         catch (error) {
             Logger.error(error, { tags: { from: "setCustomUserProperties" } });
         }
     }
     sendEvent(event) {
-        const requests = (Array.isArray(event) ? event : [event]).map((e) => e.request);
-        if (this.bridge) {
-            this.bridge.sendEvent({ requests });
-            return;
+        try {
+            const requests = (Array.isArray(event) ? event : [event]).map((e) => e.request);
+            if (this.bridge) {
+                this.bridge.sendEvent({ requests });
+                return;
+            }
+            requests.forEach((request) => {
+                this.eventQueue$.next(request);
+            });
+        }
+        catch (error) {
+            Logger.error(error, { tags: { from: "sendEvent" } });
         }
-        this.requestQueue$.next([
-            ...this.requestQueue$.value,
-            ...requests.filter((request) => !this.requestQueue$.value.map((r) => r.id).includes(request.id)),
-        ]);
     }
     urlAndRef$ = new BehaviorSubject(undefined);
     handleUrlAndRef() {