@streamlayer/sdk-web-api 0.18.0 → 0.20.0

package/lib/grpc/queries/user.d.ts

@@ -1,13 +1,13 @@
 import { ReadableAtom } from 'nanostores';
-import type { BypassAuthRequest, BypassAuthResponse } from '@streamlayer/sl-eslib/users/users_pb';
+import type { BypassAuthRequest } from '@streamlayer/sl-eslib/users/users_pb';
 import { PlainMessage } from '@bufbuild/protobuf';
 import { Transport } from '../transport';
 export declare const $user: ($userToken: ReadableAtom<string | undefined>, transport: Transport) => import("@nanostores/query").FetcherStore<import("@streamlayer/sl-eslib/users/users_pb").MeResponse, any>;
-export declare const $bypassLogin: (transport: Transport) => import("@nanostores/query").MutatorStore<PlainMessage<BypassAuthRequest>, PlainMessage<BypassAuthResponse>, any>;
+export declare const bypassLogin: (transport: Transport) => ({ userKey, schema, init }: PlainMessage<BypassAuthRequest>) => Promise<import("@streamlayer/sl-eslib/users/users_pb").BypassAuthResponse>;
 export declare const bypassAuth: (transport: Transport, params: {
     userKey?: string;
     schema?: string;
     init?: boolean;
-}) => Promise<BypassAuthResponse>;
+}) => Promise<import("@streamlayer/sl-eslib/users/users_pb").BypassAuthResponse>;
 export declare const $userSettings: ($userToken: ReadableAtom<string | undefined>, transport: Transport) => import("@nanostores/query").FetcherStore<import("@streamlayer/sl-eslib/sdkSettings/client/client_pb").ClientSettings | undefined, any>;
 export declare const register: (transport: Transport, phone: string) => Promise<import("@streamlayer/sl-eslib/users/users_pb").RegisterResponse>;

package/lib/grpc/queries/user.js

@@ -12,14 +12,9 @@ export const $user = ($userToken, transport) => {
         fetcher: () => client.me({}),
     });
 };
-export const $bypassLogin = (transport) => {
-    const { client, queryKeyStr } = transport.createPromiseClient(Users, { method: 'bypassAuth' });
-    return transport.nanoquery.createMutatorStore(async ({ data: { userKey, schema, init }, getCacheUpdater }) => {
-        const [updateCache] = getCacheUpdater(queryKeyStr);
-        const user = await client.bypassAuth({ userKey, schema, init });
-        updateCache(user);
-        return user;
-    });
+export const bypassLogin = (transport) => {
+    const { client } = transport.createPromiseClient(Users, { method: 'bypassAuth' });
+    return ({ userKey, schema, init }) => client.bypassAuth({ userKey, schema, init });
 };
 export const bypassAuth = (transport, params) => {
     const { client } = transport.createPromiseClient(Users, { method: 'bypassAuth' });

package/lib/grpc/subscription.d.ts

@@ -1,11 +1,14 @@
-import { CallbackClient } from '@connectrpc/connect';
+import { PromiseClient } from '@connectrpc/connect';
 import { Atom } from 'nanostores';
 import type { ServiceType, Message, PlainMessage, MethodInfoServerStreaming } from '@bufbuild/protobuf';
 import { Transport } from './transport';
+type StreamPromiseClient<T extends ServiceType> = {
+    [P in keyof PromiseClient<T> as T['methods'][P] extends MethodInfoServerStreaming<any, any> ? P : never]: T['methods'][P] extends MethodInfoServerStreaming<any, any> ? PromiseClient<T>[P] : never;
+};
 type StreamMethods<T extends ServiceType> = {
-    [P in keyof CallbackClient<T> as T['methods'][P] extends MethodInfoServerStreaming<any, any> ? P : never]: P;
+    [P in keyof StreamPromiseClient<T>]: P;
 };
-export type StreamMethod<T extends ServiceType> = StreamMethods<T>[keyof StreamMethods<T>] extends keyof CallbackClient<T> ? StreamMethods<T>[keyof StreamMethods<T>] : never;
+export type StreamMethod<T extends ServiceType> = StreamMethods<T>[keyof StreamMethods<T>] extends keyof StreamPromiseClient<T> ? StreamMethods<T>[keyof StreamMethods<T>] : never;
 declare enum ServerStreamSubscriptionStatus {
     Init = "init",
     Ready = "ready",
@@ -13,21 +16,28 @@ declare enum ServerStreamSubscriptionStatus {
     Connected = "connected",
     Disconnected = "disconnected",
     Failed = "failed",
+    Reconnect = "reconnect",
     Reconnecting = "reconnecting"
 }
 export type ServerStreamSubscriptionOptions = {
     name: string;
     withStore?: boolean;
+    reconnectDelay?: number;
+    reconnectMaxDelay?: number;
+    reconnectMaxAttempts?: number;
 };
-export declare class ServerStreamSubscription<T extends ServiceType, Request extends Message<Request>, Response extends Message<Response>, M extends StreamMethod<T> = StreamMethod<T>, Method extends CallbackClient<T>[M] = CallbackClient<T>[M]> {
+export declare class ServerStreamSubscription<T extends ServiceType, Request extends Message<Request>, Response extends Message<Response>, M extends keyof StreamMethods<T> = keyof StreamMethods<T>, Method extends StreamPromiseClient<T>[M] = StreamPromiseClient<T>[M]> {
     params: Atom<PlainMessage<Request>> | PlainMessage<Request>;
-    private stream?;
+    private streamCancel?;
     private method;
-    private name;
+    private options;
     private headers;
     private listeners;
     private state;
     private store?;
+    private paramsListener?;
+    private reconnectTimeout?;
+    private attempt;
     constructor(headers: Transport['$headers'], method: Method, params: Atom<PlainMessage<Request>> | PlainMessage<Request>, options: ServerStreamSubscriptionOptions);
     updateState: (status: ServerStreamSubscriptionStatus) => void;
     addStateLog: (msg: string) => void;
@@ -35,9 +45,17 @@ export declare class ServerStreamSubscription<T extends ServiceType, Request ext
     removeListener: (name: string) => void;
     connect: () => void;
     disconnect: () => void;
+    /**
+     * Reconnect after delay, if not already reconnecting, otherwise do nothing
+     */
     reconnect: () => void;
     getStore: () => import("nanostores").WritableAtom<Response | null | undefined> | undefined;
     private onData;
+    /**
+     * Disconnect if error is not instance of ConnectError or stream is Canceled,
+     * Reconnect in other cases
+     * Do nothing if error is undefined
+     */
     private onStreamError;
 }
 export {};

package/lib/grpc/subscription.js

@@ -1,5 +1,5 @@
 import { MapStore, SingleStore, createMapStore, createSingleStore } from '@streamlayer/sdk-web-interfaces';
-import { Code } from '@connectrpc/connect';
+import { ConnectError, Code } from '@connectrpc/connect';
 var ServerStreamSubscriptionStatus;
 (function (ServerStreamSubscriptionStatus) {
     ServerStreamSubscriptionStatus["Init"] = "init";
@@ -8,17 +8,21 @@ var ServerStreamSubscriptionStatus;
     ServerStreamSubscriptionStatus["Connected"] = "connected";
     ServerStreamSubscriptionStatus["Disconnected"] = "disconnected";
     ServerStreamSubscriptionStatus["Failed"] = "failed";
+    ServerStreamSubscriptionStatus["Reconnect"] = "reconnect";
     ServerStreamSubscriptionStatus["Reconnecting"] = "reconnecting";
 })(ServerStreamSubscriptionStatus || (ServerStreamSubscriptionStatus = {}));
 export class ServerStreamSubscription {
     params;
-    stream;
+    streamCancel;
     method;
-    name;
+    options;
     headers;
     listeners;
     state;
     store;
+    paramsListener;
+    reconnectTimeout;
+    attempt = 0;
     constructor(headers, method, params, options) {
         const initState = {
             status: ServerStreamSubscriptionStatus.Init,
@@ -26,7 +30,13 @@ export class ServerStreamSubscription {
             log: [],
         };
         this.state = new MapStore(createMapStore(initState), `subscription:${options.name}:state`);
-        this.name = options.name;
+        this.options = {
+            ...options,
+            reconnectDelay: options.reconnectDelay ?? 1000,
+            reconnectMaxDelay: options.reconnectMaxDelay ?? 30000,
+            reconnectMaxAttempts: options.reconnectMaxAttempts ?? 10,
+            withStore: options.withStore ?? false,
+        };
         this.headers = headers;
         this.listeners = new Map();
         this.params = params;
@@ -35,8 +45,11 @@ export class ServerStreamSubscription {
             this.store = new SingleStore(createSingleStore(null), `subscription:${options.name}:store`);
         }
         if ('subscribe' in params && typeof params.subscribe === 'function') {
-            params.subscribe(() => {
-                this.reconnect();
+            this.paramsListener = params.subscribe((newParams) => {
+                if (this.state.getValue('status') === ServerStreamSubscriptionStatus.Connected) {
+                    this.addStateLog(`params updated, reconnect => ${JSON.stringify(newParams)}`);
+                    this.reconnect();
+                }
             });
         }
         this.updateState(ServerStreamSubscriptionStatus.Ready);
@@ -48,11 +61,14 @@ export class ServerStreamSubscription {
     };
     addStateLog = (msg) => {
         const log = this.state.getStore().get()['log'];
-        this.state.setValue('log', [...log, `${new Date().toLocaleString()}: ${msg}`]);
+        const newLog = `${this.options.name} ${new Date().toISOString()}: ${msg}`;
+        log.push(newLog);
+        this.state.setValue('log', log);
+        window.sessionStorage.setItem('slstreamlogs', window.sessionStorage.getItem('slstreamlogs') + '\n' + newLog);
     };
     addListener = (name, listener) => {
         if (this.listeners.has(name)) {
-            this.addStateLog(`listener '${name}' not added`);
+            this.addStateLog(`listener '${name}' not added, already exists`);
             return false;
         }
         this.listeners.set(name, listener);
@@ -65,50 +81,103 @@ export class ServerStreamSubscription {
     };
     connect = () => {
         this.updateState(ServerStreamSubscriptionStatus.Connecting);
-        if (this.stream) {
+        if (this.streamCancel) {
             this.addStateLog(`disconnect prev connection`);
-            this.stream();
+            this.streamCancel.abort();
+            this.streamCancel = undefined;
         }
-        const params = 'get' in this.params && typeof this.params.get === 'function' ? this.params.get() : this.params;
-        this.stream = this.method(params, 
-        // ToDo: fix types
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        this.onData, this.onStreamError, { headers: this.headers.getValues() });
+        const params = ('get' in this.params && typeof this.params.get === 'function' ? this.params.get() : this.params);
+        const fn = async () => {
+            this.streamCancel = new AbortController();
+            try {
+                const options = {
+                    headers: this.headers.getValues(),
+                    signal: this.streamCancel.signal,
+                };
+                const stream = this.method(params, options);
+                for await (const res of stream) {
+                    this.attempt = 0;
+                    this.onData(res);
+                }
+            }
+            catch (err) {
+                if (err instanceof ConnectError && err.code != Code.Canceled) {
+                    void this.onStreamError(err);
+                }
+            }
+        };
+        void fn();
         this.updateState(ServerStreamSubscriptionStatus.Connected);
     };
     disconnect = () => {
-        if (this.stream) {
-            this.stream();
+        if (this.streamCancel) {
+            this.streamCancel.abort();
         }
         this.listeners.clear();
+        this.paramsListener?.();
+        clearTimeout(this.reconnectTimeout);
+        this.reconnectTimeout = undefined;
         this.updateState(ServerStreamSubscriptionStatus.Disconnected);
     };
+    /**
+     * Reconnect after delay, if not already reconnecting, otherwise do nothing
+     */
     reconnect = () => {
-        this.updateState(ServerStreamSubscriptionStatus.Reconnecting);
-        this.connect();
+        if (!this.reconnectTimeout) {
+            if (this.attempt < this.options.reconnectMaxAttempts) {
+                this.updateState(ServerStreamSubscriptionStatus.Reconnect);
+                // https://aws.amazon.com/ru/blogs/architecture/exponential-backoff-and-jitter/
+                const backoff = Math.min(this.options.reconnectMaxDelay, Math.pow(2, this.attempt) * this.options.reconnectDelay);
+                const delayMs = Math.round((backoff * (1 + Math.random())) / 2);
+                this.reconnectTimeout = setTimeout(() => {
+                    this.attempt++;
+                    this.updateState(ServerStreamSubscriptionStatus.Reconnecting);
+                    this.addStateLog(`reconnect attempt ${this.attempt} after ${delayMs}ms`);
+                    this.connect();
+                    this.reconnectTimeout = undefined;
+                }, delayMs);
+            }
+            else {
+                this.addStateLog(`max reconnect attempts reached`);
+                this.disconnect();
+            }
+        }
+        else {
+            this.addStateLog(`already reconnecting`);
+        }
     };
     getStore = () => this.store?.getStore();
     onData = (response) => {
-        this.addStateLog(`received data => ${JSON.stringify(response)}`);
-        if (this.store) {
-            this.store.setValue(response);
+        try {
+            this.addStateLog(`received data => ${JSON.stringify(response)}`);
+            if (this.store) {
+                this.store.setValue(response);
+            }
+            for (const [, listener] of this.listeners) {
+                listener(response);
+            }
+            this.addStateLog(`data routed to ${this.listeners.size} listeners`);
         }
-        for (const [, listener] of this.listeners) {
-            listener(response);
+        catch (err) {
+            this.addStateLog(`error process data => ${err}`);
         }
-        this.addStateLog(`data routed to ${this.listeners.size} listeners`);
     };
+    /**
+     * Disconnect if error is not instance of ConnectError or stream is Canceled,
+     * Reconnect in other cases
+     * Do nothing if error is undefined
+     */
     onStreamError = (error) => {
+        this.addStateLog(`error => ${error ? JSON.stringify(error) : 'undefined'}}`);
         if (error === undefined) {
             return;
         }
-        if (error.code !== Code.Canceled && error.rawMessage !== '[canceled] BodyStreamBuffer was aborted') {
+        if (error instanceof ConnectError && error.code !== Code.Canceled) {
             this.updateState(ServerStreamSubscriptionStatus.Failed);
             this.state.setValue('error', error);
+            this.reconnect();
+            return;
         }
-        else {
-            this.disconnect();
-        }
+        this.disconnect();
     };
 }

package/lib/grpc/transport.d.ts

@@ -1,4 +1,4 @@
-import { createRouterTransport, ConnectRouter, Interceptor, PromiseClient, CallbackClient, UnaryRequest, StreamRequest } from '@connectrpc/connect';
+import { createRouterTransport, ConnectRouter, Interceptor, PromiseClient, UnaryRequest, StreamRequest } from '@connectrpc/connect';
 import type { ServiceType, Message, PlainMessage } from '@bufbuild/protobuf';
 import { createGrpcWebTransport } from '@connectrpc/connect-web';
 import type { KeyInput } from '@nanostores/query';
@@ -9,6 +9,7 @@ type KnownHeaders = {
     authorization?: string;
     sdk?: string;
     'sl-device-id': string;
+    'sl-user-id'?: string;
 } & Record<string, string>;
 export type GrpcTransport = Transport['transport'];
 type ReservedHeaders = 'sdk' | 'authorization';
@@ -34,6 +35,7 @@ export declare class Transport {
         useProtoFieldName: boolean;
     };
     readonly transport: ReturnType<typeof createGrpcWebTransport>;
+    readonly streamTransport: ReturnType<typeof createGrpcWebTransport>;
     readonly nanoquery: NanoqueryObjectType;
     readonly host: string;
     protected interceptors: Interceptor[];
@@ -42,13 +44,13 @@ export declare class Transport {
     private callbackClients;
     private subscriptions;
     constructor(host: string);
-    addSubscription: <T extends ServiceType, Req extends Message<Req>, Res extends Message<Res>>(method: CallbackClient<T>[import("./subscription").StreamMethod<T>], params: PlainMessage<Req> | Atom<PlainMessage<Req>>, options: ServerStreamSubscriptionOptions) => ServerStreamSubscription<ServiceType, Message<import("@bufbuild/protobuf").AnyMessage>, Message<import("@bufbuild/protobuf").AnyMessage>, never, never> | ServerStreamSubscription<T, Req, Res, import("./subscription").StreamMethod<T>, CallbackClient<T>[import("./subscription").StreamMethod<T>]>;
+    addSubscription: <T extends ServiceType, Req extends Message<Req>, Res extends Message<Res>>(method: { [P in keyof PromiseClient<T> as T["methods"][P] extends import("@bufbuild/protobuf").MethodInfoServerStreaming<any, any> ? P : never]: T["methods"][P] extends import("@bufbuild/protobuf").MethodInfoServerStreaming<any, any> ? PromiseClient<T>[P] : never; }[keyof { [P in keyof PromiseClient<T> as T["methods"][P] extends import("@bufbuild/protobuf").MethodInfoServerStreaming<any, any> ? P : never]: T["methods"][P] extends import("@bufbuild/protobuf").MethodInfoServerStreaming<any, any> ? PromiseClient<T>[P] : never; }], params: PlainMessage<Req> | Atom<PlainMessage<Req>>, options: ServerStreamSubscriptionOptions) => ServerStreamSubscription<ServiceType, Message<import("@bufbuild/protobuf").AnyMessage>, Message<import("@bufbuild/protobuf").AnyMessage>, never, never> | ServerStreamSubscription<T, Req, Res, keyof { [P in keyof PromiseClient<T> as T["methods"][P] extends import("@bufbuild/protobuf").MethodInfoServerStreaming<any, any> ? P : never]: T["methods"][P] extends import("@bufbuild/protobuf").MethodInfoServerStreaming<any, any> ? PromiseClient<T>[P] : never; }, { [P in keyof PromiseClient<T> as T["methods"][P] extends import("@bufbuild/protobuf").MethodInfoServerStreaming<any, any> ? P : never]: T["methods"][P] extends import("@bufbuild/protobuf").MethodInfoServerStreaming<any, any> ? PromiseClient<T>[P] : never; }[keyof { [P in keyof PromiseClient<T> as T["methods"][P] extends import("@bufbuild/protobuf").MethodInfoServerStreaming<any, any> ? P : never]: T["methods"][P] extends import("@bufbuild/protobuf").MethodInfoServerStreaming<any, any> ? PromiseClient<T>[P] : never; }]>;
     removeSubscription: (subscription: ServerStreamSubscription<ServiceType, Message, Message>) => void;
     disconnect: () => void;
     registerInterceptor: (interceptor: Interceptor) => void;
     removeInterceptor: (interceptor: Interceptor) => void;
     getClient: <T extends ServiceType>(service: T) => PromiseClient<T>;
-    getCallbackClient: <T extends ServiceType>(service: T) => CallbackClient<T>;
+    getStreamClient: <T extends ServiceType>(service: T) => PromiseClient<T>;
     createPromiseClient: <T extends ServiceType>(service: T, { params, method }: {
         params?: KeyInput | undefined;
         method: keyof T["methods"];
@@ -57,11 +59,11 @@ export declare class Transport {
         queryKey: ((string | number | true) | import("nanostores").ReadableAtom<(string | number | true) | (false | void | null | undefined)> | import("@nanostores/query").FetcherStore<any, any>)[];
         queryKeyStr: string;
     };
-    createCallbackClient: <T extends ServiceType>(service: T) => {
-        client: CallbackClient<T>;
+    createStreamClient: <T extends ServiceType>(service: T) => {
+        client: PromiseClient<T>;
     };
     setSdkKey: (sdkKey: string) => void;
-    setAuth: (token?: string) => void;
+    setAuth: (token: string, userId: string) => void;
     setHeader: <T extends string = string>(name: ExcludeReservedHeaders<T>, value: string) => void;
     getHeader: (name: keyof KnownHeaders) => string;
     getHeaders: () => KnownHeaders;

package/lib/grpc/transport.js

@@ -1,5 +1,5 @@
 import { MapStore, createMapStore } from '@streamlayer/sdk-web-interfaces';
-import { createRouterTransport, createPromiseClient, createCallbackClient, } from '@connectrpc/connect';
+import { createRouterTransport, createPromiseClient, } from '@connectrpc/connect';
 import { createGrpcWebTransport } from '@connectrpc/connect-web';
 import { nanoquery } from '@nanostores/query';
 import { __GRPC_DEVTOOLS_EXTENSION__ } from '../utils/devtools';
@@ -13,7 +13,10 @@ export class Transport {
         enumAsInteger: true,
         useProtoFieldName: false,
     };
+    // with timeout, using for unary requests
     transport;
+    // without timeout, using for server streaming requests
+    streamTransport;
     nanoquery;
     host;
     interceptors = [];
@@ -34,8 +37,12 @@ export class Transport {
         this.nanoquery = { createFetcherStore, createMutatorStore, utils };
         this.transport = createGrpcWebTransport({
             baseUrl: host,
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
+            defaultTimeoutMs: 30000,
+            interceptors: this.interceptors,
+            useBinaryFormat: true,
+        });
+        this.streamTransport = createGrpcWebTransport({
+            baseUrl: host,
             interceptors: this.interceptors,
             useBinaryFormat: true,
         });
@@ -61,9 +68,9 @@ export class Transport {
     };
     // cleanup subscriptions
     disconnect = () => {
-        for (const [name, subscription] of this.subscriptions) {
+        for (const [params, subscription] of this.subscriptions) {
             subscription.disconnect();
-            this.subscriptions.delete(name);
+            this.subscriptions.delete(params);
         }
     };
     registerInterceptor = (interceptor) => {
@@ -81,13 +88,13 @@ export class Transport {
         this.clients.set(serviceName, client);
         return client;
     };
-    getCallbackClient = (service) => {
-        const serviceName = service.typeName;
-        if (this.callbackClients.has(serviceName)) {
-            return this.callbackClients.get(serviceName);
+    getStreamClient = (service) => {
+        const serviceName = `stream-${service.typeName}`;
+        if (this.clients.has(serviceName)) {
+            return this.clients.get(serviceName);
         }
-        const client = createCallbackClient(service, this.transport);
-        this.callbackClients.set(serviceName, client);
+        const client = createPromiseClient(service, this.streamTransport);
+        this.clients.set(serviceName, client);
         return client;
     };
     // create unary client, used for query request
@@ -102,16 +109,17 @@ export class Transport {
         const queryKeyWithoutParams = [service.typeName, methodName.charAt(0).toLowerCase() + methodName.slice(1)];
         return { client, queryKey, queryKeyStr: queryKeyWithoutParams.join('') };
     };
-    // create callback client, used for server stream subscriptions
-    createCallbackClient = (service) => {
-        const client = this.getCallbackClient(service);
+    // create promise client, used for server stream subscriptions
+    createStreamClient = (service) => {
+        const client = this.getStreamClient(service);
         return { client };
     };
     setSdkKey = (sdkKey) => {
         this.$headers.setValue('sdk', sdkKey);
     };
-    setAuth = (token) => {
+    setAuth = (token, userId) => {
         this.$headers.setValue('authorization', token);
+        this.$headers.setValue('sl-user-id', userId);
     };
     setHeader = (name, value) => this.$headers.setValue(name, value);
     getHeader = (name) => this.$headers.getValue(name);
@@ -145,7 +153,7 @@ export class Transport {
 export class MockTransport extends Transport {
     calls;
     constructor(transport) {
-        super(process.env.NX_GRPC_HOST || 'https://grpc-web.next.streamlayer.io:443');
+        super(process.env.NX_GRPC_HOST || 'https://grpc-sdk.next.streamlayer.io:443');
         this.calls = [];
         this.interceptors.push((next) => (req) => {
             this.calls.push(req);

package/lib/index.d.ts

@@ -17,4 +17,5 @@ declare module '@streamlayer/sdk-web-interfaces' {
 export declare const transport: (instance: StreamLayerContext, opts: {
     sdkKey: string;
     host: string;
+    version?: string;
 }, done: () => void) => void;

package/lib/index.js

@@ -5,5 +5,6 @@ export const transport = (instance, opts, done) => {
     instance.transport = new Transport(opts.host);
     instance.sdk.host = instance.transport.host;
     instance.transport.setSdkKey(opts.sdkKey);
+    instance.transport.setHeader('sl-sdk-version', opts.version || '-');
     done();
 };

package/lib/utils/devtools.js

@@ -16,18 +16,20 @@ async function* logEach(store, stream) {
 export const __GRPC_DEVTOOLS_EXTENSION__ = () => (next) => async (request) => {
     const store = {
         name: request.url,
-        request: {},
+        stream: request.stream,
+        sent_at: Date.now(),
+        request: {
+            // clone headers to avoid mutating
+            header: Object.fromEntries(request.header.entries()),
+        },
         response: {},
     };
-    store.request.header = Object.fromEntries(request.header.entries());
-    store.sent_at = Date.now();
     try {
         const response = await next(request);
         store.received_at = Date.now();
-        store.stream = response.stream;
         store.response.header = Object.fromEntries(response.header.entries());
         store.response.trailer = Object.fromEntries(response.trailer.entries());
-        if (!response.stream) {
+        if (!request.stream) {
             store.request.message = request.message;
             store.response.message = response.message;
             store.latency = store.received_at - store.sent_at;
@@ -38,6 +40,15 @@ export const __GRPC_DEVTOOLS_EXTENSION__ = () => (next) => async (request) => {
             window.postMessage(msg);
         }
         else {
+            store.request.message = request.message;
+            const msg = {
+                type: '__GRPC_DEVTOOLS_EXTENSION__',
+                data: {
+                    ...store,
+                    stream: false,
+                },
+            };
+            window.postMessage(msg);
             return {
                 ...response,
                 message: logEach(store, response.message),

package/lib/utils/grpc-stub.js

@@ -3,7 +3,7 @@ export class GrpcStub {
     transport;
     stubs;
     constructor() {
-        this.transport = new Transport(process.env.NX_GRPC_HOST || 'https://grpc-web.next.streamlayer.io:443');
+        this.transport = new Transport(process.env.NX_GRPC_HOST || 'https://grpc-sdk.next.streamlayer.io:443');
         this.stubs = new Map();
         const stubbedUnary = (service, method, signal, timeoutMs, header, input) => {
             const key = `${service.typeName}${method.name}`.toLowerCase();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/sdk-web-api",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "type": "module",
   "main": "./lib/index.js",
   "typings": "./lib/index.d.ts",
@@ -21,16 +21,16 @@
     }
   },
   "dependencies": {
-    "@streamlayer/sdk-web-interfaces": "^0.1.0"
+    "@streamlayer/sdk-web-interfaces": "^0.20.0"
   },
   "devDependencies": {
-    "@swc/helpers": "*",
-    "@bufbuild/protobuf": "*",
-    "@connectrpc/connect": "*",
-    "@connectrpc/connect-web": "*",
-    "@nanostores/query": "*",
-    "@streamlayer/sl-eslib": "*",
-    "nanostores": "*",
-    "tslib": "*"
+    "@bufbuild/protobuf": "^1.6.0",
+    "@connectrpc/connect": "^1.3.0",
+    "@connectrpc/connect-web": "^1.3.0",
+    "@nanostores/query": "^0.2.8",
+    "@streamlayer/sl-eslib": "^5.63.3",
+    "@swc/helpers": "^0.5.3",
+    "nanostores": "^0.9.5",
+    "tslib": "^2.6.2"
   }
 }