feat: add optional logging for sqlite methods

[santhoshvai]

The goal is to provide a way to enable sqlite logging so that customers can easily report to us sqlite errors with trace of the reproduction steps.

in entry point of the app (index.js or App.tsx), integrators can add a custom logger.

For example, in TS example app the following logger is added:

QuickSqliteClient.logger = (level, message, extraData) => {
  console.log(level, `QuickSqliteClient: ${message}`, extraData);
};

Which results in rich logging in the chrome console:

Similarly, loggers can be added to crashlytics or bugsnag etc to trace this and report to us.

[stream-ci-bot]

🎉 This PR is included in version 5.26.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[RRaideRR]

Hey @santhoshvai ,

just letting you know: with the upgrade from stream-chat-expo@5.24.0 to stream-chat-expo@5.26.0, I receive the following warning when I try to send a message:

• offline capabilities enabled
• I see my sent message on my device but the receiver never gets it
• "react-native-quick-sqlite": "^8.0.6",

Not quite sure if this PR is the root cause but there were some JSON.stringify in it.

[santhoshvai]

@RRaideRR thank you for letting me know..

JSON.stringify is not compliant with cyclical structure so this must be fixed

[santhoshvai]

@RRaideRR it seems like the PR is not the root cause here since the strigify was already present. I tried to send multiple messages and reactions and couldnt reproduce it. Do you have any reproduction paths of sending a message for me if any please?

[RRaideRR]

@santhoshvai

hey... it took me quite some time to create a minimal reproducible example here. The key is the CustomSendButton here. It seems like this is the root cause of all evil - if I strip it out, its working.

import { StyleSheet, Text, TouchableOpacity } from 'react-native';
import 'react-native-gesture-handler';

import { StreamChat } from 'stream-chat';
import { useEffect, useState } from 'react';
import {
  Channel,
  ChannelList,
  Chat,
  MessageInput,
  MessageList,
  OverlayProvider,
  useMessageInputContext,
} from 'stream-chat-expo';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import Svg, { Path } from 'react-native-svg';

const client = StreamChat.getInstance('myinstance');

function CustomSendButton() {
  const { sendMessage, } = useMessageInputContext();

  return (
    <TouchableOpacity onPress={sendMessage}>
      <Text>Send</Text>
    </TouchableOpacity>
  );
}

export default function App() {
  const [channel, setChannel] = useState();
  const [isClientReady, setIsClientReady] = useState(false);

  useEffect(() => {
    client.connectUser(
      {
        id: 'myid',
      },
      'mytoken',
    );

    setIsClientReady(true);
  }, []);

  const filter = {
    type: 'support', members: { $in: ['myid'] }
  };

  if (!isClientReady) return null;

  return (
    <GestureHandlerRootView style={{ flex: 1, paddingTop: 100 }}>
      <OverlayProvider>
        <Chat client={client} enableOfflineSupport>
        {channel ?
          <Channel
            channel={channel}
            enableOfflineSupport
            SendButton={CustomSendButton}
          >
            <MessageList />
            <MessageInput />
          </Channel>
          : <ChannelList filters={filter} onSelect={setChannel} />
        }
        </Chat>
      </OverlayProvider>
    </GestureHandlerRootView>
  );
}

[santhoshvai]

oh wow thanks, that should be it

[santhoshvai]

@RRaideRR

as per the typescript signature we provide.. your typing check should have broken this <TouchableOpacity onPress={sendMessage}> but rather only allow <TouchableOpacity onPress={() => sendMessage(undefined)}>

and changing that should have fixed it

I am creating a fix for this, many thanks for pointing this out with reproducible example, that helped to find the cause of this issue 💯 👍 🎉

[RRaideRR]

@santhoshvai

You're right. In my minimal reproducible example, TypeScript notified me about this. However, in my real-world scenario, I have something like this which runs fine:

  const customOnPress = () => {
    // some custom logic here
    // ...
    sendMessage();
  };

  return (
    <TouchableOpacity onPress={customOnPress}>
      <SendMessageSVG />
    </TouchableOpacity>
  );

Glad, that it's fixed now :=)

[santhoshvai]

Thank you @RRaideRR !