[ECO-5184] chore: use internal logger in react-hooks

src/platform/react-hooks/src/hooks/useChannelAttach.ts

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import { useConnectionStateListener } from './useConnectionStateListener.js';
 import { useAbly } from './useAbly.js';
 import { INACTIVE_CONNECTION_STATES } from './constants.js';
+import { logError } from '../utils.js';
 
 interface ChannelAttachResult {
   connectionState: Ably.ConnectionState;
@@ -35,7 +36,7 @@ export function useChannelAttach(
       channel.attach().catch((reason) => {
         // we use a fire-and-forget approach for attaching, but calling detach during the attaching process or while
         // suspending can cause errors that will be automatically resolved
-        console.log(reason);
+        logError(ably, reason.toString());
       });
     }
   }, [shouldAttachToTheChannel, channel]);

src/platform/react-hooks/src/utils.ts

@@ -0,0 +1,14 @@
+/**
+ * In rare cases when we need to access core logger to log error messages
+ *
+ * @param ablyClient ably core SDK client, it has any type because we access internal Logger class
+ * @param message message to log
+ */
+export const logError = (ablyClient: any, message: string) => {
+  try {
+    ablyClient.Logger.logAction(ablyClient.logger, ablyClient.Logger.LOG_ERROR, `[react-hooks] ${message}`);
+  } catch (error) {
+    // we don't want to fail on logger if something change
+    console.error(`Unable to access ably-js logger, while sending ${message}`);
+  }
+};