Using the UnsubscribeFunc for different collections results in an error

[Aragur]

Using the returned UnsubscribeFunc from the subscribe(...) for two different collections results in the following error:

ClientResponseError.ts:13 Uncaught (in promise) ClientResponseError 404: Missing or invalid client id.
    at new ClientResponseError (ClientResponseError.ts:13:9)
    at Client.ts:310:23

for the second call of the UnsubscribeFunc.

This is my wrapper function for the real-time events in my accounts.service.ts:

public static async subscribeToAccountChanges(
    callback: (data: RecordSubscription<AccountsResponse>)=> void,
  ): Promise<UnsubscribeFunc> {
    return await COLLECTION.subscribe<AccountsResponse>('*', (data) => {
      callback(data);
    });
  }

This is my onMounted-Hook in my View file:

onMounted(async () => {
  isAuthenticated.value = AuthService.isAuthenticated();
  if(isAuthenticated.value) {
    getData();
  }
  accountsSubscription.value = await AccountService.subscribeToAccountChanges(async () => {
    console.log('accounts changed');
    await getData();
    search(searchQuery.value);
  });
  transactionsSubscription.value = await BankService.subscribeToTransactionChanges(async () => {
    console.log('transactions changed');
    await getData();
    search(searchQuery.value);
  });
});

This is my onUnmounted-Hook in my View file:

onUnmounted(() => {
  accountsSubscription.value?.();
  transactionsSubscription.value?.();
});

Not calling each UnsubscribeFunc results in duplicate fired events on navigation change - so it has to be required.

[ganigeorgiev]

Please don't post code as screenshots as it is hard to read and follow. For code blocks you can use tripple backticks ("`").

Could you provide a minimal reproducuble repo or at least steps to consistently reproduce?

The above error indicates that the realtime client was already disconnected (or the locally stored client id has changed, but there is not enough context to understand where your code is executed) probably due to the async nature of the calls. You can either ignore the error or await the unsubscribe calls.

[Aragur]

Sorry I was brain-dead, never attached code screenshots ever before in an issue 🤦
Awaiting the function calls fixes the error. But that seems pretty weird to me.

[ganigeorgiev]

The unsubscribe functions are async. What probably is happening in your case is something like:

accountsSubscription.value?.();

// -> clears the local accounts subscription and start sending request to the server with the new change

transactionsSubscription.value?.();

// -> since it is the last subscription removing it automatically will disconnect the client
//    and this could happen before the submit call from the previous step has completed or even started being processed

What we can eventually do I guess is on disconnect to silently abort and catch any pending subscription change requests. I've added it in my todo and will consider it with the planned EventSource dependency removal in the near future.

[ganigeorgiev]

I've pushed a fix in v0.15.1 release as the refactoring may take a while since currently the Go internals refactoring and the JS app hooks integration are with higher priority.

[Aragur]

Wow, that was fast, thanks a lot 👍