React Native - Android Studio - azure/service-bus: ERROR [Error: Error 0: Error: [object Object]] Error: [object Object]

[Giuseppe-Lo-Re]

• Package Name: @azure/service-bus
• Package Version: 7.9.5
• Operating system: Windows 11 Enterprise
• [x] nodejs
  • version: 20.15.0
• [x] react-native
  • name/version: 0.73.6
• [x] typescript
  • version: 5.0.4

Describe the bug I am building an android app with react native/android studio + azure/service-bus. When I try to send the form, I get an error. initially I had a different error which I solved by following this case: https://github.com/Azure/azure-sdk-for-js/issues/25082. Below is the form code:

import 'react-native-get-random-values';
import { Buffer } from 'buffer';
global.Buffer = Buffer;
global.process = require('process');

import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import { useForm } from 'react-hook-form';
import { ServiceBusClient } from '@azure/service-bus';
import CustomButton from '../../../../common/components/CustomButton/custom-button';
import CustomTextInput from '../../../../common/components/CustomButton/CustomTextInput/CustomTextInput';

import { styles } from './styles';

interface IForm {
    onClose: () => void; 
}

const connectionString = "*hidden*";
const topicName = "*hidden*";

const Form: React.FunctionComponent<IForm>= ({ onClose }) => {
    const [sending, setSending] = useState<boolean>(false) 
    const defaultValues = {
        firstName: '',
        lastName: '',
        description: '',
    };

    const { control, handleSubmit, formState: { errors }, reset } = useForm({
        defaultValues,
    });

    const sendMessage = async (data: any) => {
        setSending(true);

        const sbClient = new ServiceBusClient(connectionString);
        const sender = sbClient.createSender(topicName);

        try {
            const message = {
                body: JSON.stringify(data),
                applicationProperties: { device: 1 },
            };
            console.log("Message to be sent:", message);
            console.log("Sending message...");
            await sender.sendMessages(message);
            console.log(`Sent message: ${JSON.stringify(data)} to the topic: ${topicName}`);

            await sender.close();
        } catch (error: any) {
            console.error(error, error?.stack);
        } finally {
            await sbClient.close();
            setSending(false);
        }
    };

    const onSubmit = (data: any) => {
        console.log("data:", data);
        sendMessage(data).catch(error => {
            console.error("Submit error:", error);
        });
    };

    useEffect(() => {
        reset(defaultValues);
    }, []);

    return (
        <View style={styles.container}>
            <TouchableOpacity style={styles.closeButton} onPress={onClose}>
                <View style={styles.circle}>
                    <Text style={styles.cross}>X</Text>
                </View>
            </TouchableOpacity>
            <View style={styles.logoContainer}>
                <Image
                    source={require('../../../../public/logo.png')}
                    style={styles.logo}
                />
            </View>
            <CustomTextInput
                control={control}
                name="firstName"
                rules={{ required: true }}
                error={errors.firstName}
                errorMessage="First name is required"
                placeholder="First name"
                style={styles.input}
            />
            <CustomTextInput
                control={control}
                name="lastName"
                rules={{ required: true }}
                error={errors.lastName}
                errorMessage="Last name is required"
                placeholder="Last name"
                style={styles.input}
            />
            <CustomTextInput
                control={control}
                name="description"
                rules={{ required: true }}
                error={errors.description}
                errorMessage="Description is required"
                placeholder="Description"
                multiline={true}
                numberOfLines={10}
                style={[styles.input, styles.textArea]}
            />
            <View style={styles.buttonWrapper}>
                <CustomButton 
                    title={sending ? "Sending..." : "Submit"}
                    disabled={sending}
                    buttonStyle={styles.button}
                    textStyle={styles.buttonText}
                    onPress={handleSubmit(onSubmit)} 
                />
            </View>
        </View>
    );
};

export default Form;

below are logs and error:

 LOG  data: {"description": "Test", "firstName": "Giuseppe", "lastName": "Lo Re"}
 LOG  Message to be sent: {"applicationProperties": {"device": 1}, "body": "{\"firstName\":\"Giuseppe\",\"lastName\":\"Lo Re\",\"description\":\"Test\"}"}
 ERROR  [Error: Error 0: Error: [object Object]] Error: [object Object]
    at translate (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:143935:104)
    at ?anon_0_ (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:130871:95)
    at throw (native)
    at asyncGeneratorStep (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:28380:19)
    at _throw (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:28397:29)
    at tryCallOne (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/2b6q3t3f/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:53:16)
    at anonymous (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/2b6q3t3f/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:139:27)
    at apply (native)
    at anonymous (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:35066:26)
    at _callTimer (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:34945:17)
    at _callReactNativeMicrotasksPass (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:34990:17)  
    at callReactNativeMicrotasks (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:35196:44)       
    at __callReactNativeMicrotasks (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:3369:48)      
    at anonymous (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:3142:45)
    at __guard (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:3341:15)
    at flushedQueue (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:3141:21)
    at callFunctionReturnFlushedQueue (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:3126:33)

I hope you can help me solve

Regards, Giuseppe Lo Re

[jeremymeng]

Thanks for reporting this @Giuseppe-Lo-Re! In my quick testing I got an error too with ERROR [Error: Error 0: Error: [object Object]] Error: [object Object]. It seems to be an error from websocket but I don't know why yet. I will keep investigating.

[jeremymeng]

@Giuseppe-Lo-Re looks that you also need

1. WebSocket wrapper to set binaryType to "blob" as described here: https://github.com/Azure/azure-sdk-for-js/blob/6aa191c96734adfb5c559e9250583ecbde3a061a/samples/frameworks/react-native-expo/ts/messaging/README.md#add-a-websocket-wrapper

[github-actions[bot]]

Hi @Giuseppe-Lo-Re. Thank you for opening this issue and giving us the opportunity to assist. To help our team better understand your issue and the details of your scenario please provide a response to the question asked above or the information requested above. This will help us more accurately address your issue.

[Giuseppe-Lo-Re]

@Giuseppe-Lo-Re looks that you also need

1. WebSocket wrapper to set binaryType to "blob" as described here: https://github.com/Azure/azure-sdk-for-js/blob/6aa191c96734adfb5c559e9250583ecbde3a061a/samples/frameworks/react-native-expo/ts/messaging/README.md#add-a-websocket-wrapper

HI @jeremymeng, thank you for your reply. I followed the guide to create WebSocket wrapper to set binaryType to "blob":

added the following to src/wsWrapper.ts

interface ExtendedWebSocket extends WebSocket {
    binaryType: 'blob' | 'arraybuffer';
}

export class WebSocketWrapper {
    constructor(...args: ConstructorParameters<typeof WebSocket>) {
        const instance = new WebSocket(...args) as ExtendedWebSocket;
        instance.binaryType = "blob";
        return instance;
    }
}

and updated the component:

import 'react-native-get-random-values';
import { Buffer } from 'buffer';
global.Buffer = Buffer;
global.process = require('process');
import { WebSocketWrapper } from '../../../../wsWrapper';

import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import { useForm } from 'react-hook-form';

import { ServiceBusClient } from '@azure/service-bus';
import CustomButton from '../../../../common/components/CustomButton/custom-button';
import CustomTextInput from '../../../../common/components/CustomButton/CustomTextInput/CustomTextInput';

import { styles } from './styles';

interface IForm {
    onClose: () => void; 
}

const connectionString = "*hidden*";
const topicName = "*hidden*";

const Form: React.FunctionComponent<IForm>= ({ onClose }) => {
    const [sending, setSending] = useState<boolean>(false) 
    const defaultValues = {
        firstName: '',
        lastName: '',
        description: '',
    };

    const { control, handleSubmit, formState: { errors }, reset } = useForm({
        defaultValues,
    });

    const sendMessage = async (data: any) => {
        setSending(true);

        const sbClient = new ServiceBusClient(connectionString, {
            webSocketOptions: {
                webSocket: WebSocketWrapper as any,
            },
        });
        const sender = sbClient.createSender(topicName);

        try {
            const message = {
                body: JSON.stringify(data),
                applicationProperties: { device: 1 },
            };
            console.log("Message to be sent:", message);
            console.log("Sending message...");
            await sender.sendMessages(message);
            console.log("Message sent successfully.");
            console.log(`Sent message: ${JSON.stringify(data)} to the topic: ${topicName}`);

            await sender.close();
        } catch (error: any) {
            console.error(error, error?.stack);
        } finally {
            await sbClient.close();
            setSending(false);
        }
    };

    const onSubmit = (data: any) => {
        console.log("data:", data);
        sendMessage(data).catch(error => {
            console.error("Submit error:", error);
        });
    };

    useEffect(() => {
        reset(defaultValues);
    }, []);

    return (
        <View style={styles.container}>
            <TouchableOpacity style={styles.closeButton} onPress={onClose}>
                <View style={styles.circle}>
                    <Text style={styles.cross}>X</Text>
                </View>
            </TouchableOpacity>
            <View style={styles.logoContainer}>
                <Image
                    source={require('../../../../public/logo.png')}
                    style={styles.logo}
                />
            </View>
            <CustomTextInput
                control={control}
                name="firstName"
                rules={{ required: true }}
                error={errors.firstName}
                errorMessage="First name is required"
                placeholder="First name"
                style={styles.input}
            />
            <CustomTextInput
                control={control}
                name="lastName"
                rules={{ required: true }}
                error={errors.lastName}
                errorMessage="Last name is required"
                placeholder="Last name"
                style={styles.input}
            />
            <CustomTextInput
                control={control}
                name="description"
                rules={{ required: true }}
                error={errors.description}
                errorMessage="Description is required"
                placeholder="Description"
                multiline={true}
                numberOfLines={10}
                style={[styles.input, styles.textArea]}
            />
            <View style={styles.buttonWrapper}>
                <CustomButton 
                    title={sending ? "Sending..." : "Submit"}
                    disabled={sending}
                    buttonStyle={styles.button}
                    textStyle={styles.buttonText}
                    onPress={handleSubmit(onSubmit)} 
                />
            </View>
        </View>
    );
};

export default Form;

but now i have a different error:

[ReferenceError: Error 0: ReferenceError: Property 'TextEncoder' doesn't exist] ReferenceError: Property 'TextEncoder' doesn't exist
    at ?anon_0_ (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:145142:21)      
    at next (native)
    at asyncGeneratorStep (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:28380:19)
    at _next (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:28394:29)
    at anonymous (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:28399:14)      
    at tryCallTwo (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/2b6q3t3f/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:61:9)  
    at doResolve (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/2b6q3t3f/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:216:25) 
    at Promise (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/2b6q3t3f/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:82:14)    
    at anonymous (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:28391:25)      
    at apply (native)
    at _signString (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:145154:29)   
    at apply (native)
    at signString (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:145138:29)    
    at ?anon_0_ (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:144837:94)      
    at next (native)
    at asyncGeneratorStep (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:28380:19)
    at _next (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:28394:29)
    at anonymous (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:28399:14)      
    at tryCallTwo (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/2b6q3t3f/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:61:9)  
    at doResolve (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/2b6q3t3f/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:216:25) 
    at Promise (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/2b6q3t3f/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:82:14)    
    at anonymous (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:28391:25)      
    at apply (native)
    at _createToken (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:144843:30)  
    at apply (native)
    at createToken (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:144830:30)   
    at ?anon_0_ (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:144806:31)      
    at next (native)
    at asyncGeneratorStep (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:28380:19)
    at _next (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:28394:29)
    at anonymous (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:28399:14)      
    at tryCallTwo (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/2b6q3t3f/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:61:9)  
    at doResolve (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/2b6q3t3f/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:216:25) 
    at Promise (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/2b6q3t3f/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:82:14)    
    at anonymous (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:28391:25)      
    at apply (native)
    at getToken (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:144815:33)      
    at ?anon_0_ (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:161165:71)      
    at next (native)
    at asyncGeneratorStep (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:28380:19)
    at _next (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:28394:29)
    at tryCallOne (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/2b6q3t3f/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:53:16) 
    at anonymous (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/2b6q3t3f/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:139:27) 
    at apply (native)
    at anonymous (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:35066:26)      
    at _callTimer (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:34945:17)     
    at _callReactNativeMicrotasksPass (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:34990:17)
    at callReactNativeMicrotasks (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:35196:44)
    at __callReactNativeMicrotasks (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:3369:48)
    at anonymous (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:3142:45)       
    at __guard (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:3341:15)
    at flushedQueue (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:3141:21)    
    at callFunctionReturnFlushedQueue (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.qrcode&modulesOnly=false&runModule=true:3126:33)

[mpodwysocki]

@Giuseppe-Lo-Re The TextEncoder is not shipped as part of React-Native, and instead you need to use a polyfill as described here: https://github.com/hapijs/joi/issues/2141

[github-actions[bot]]

Hi @Giuseppe-Lo-Re. Thank you for opening this issue and giving us the opportunity to assist. To help our team better understand your issue and the details of your scenario please provide a response to the question asked above or the information requested above. This will help us more accurately address your issue.

[github-actions[bot]]

Hi @Giuseppe-Lo-Re, we're sending this friendly reminder because we haven't heard back from you in 7 days. We need more information about this issue to help address it. Please be sure to give us your input. If we don't hear back from you within 14 days of this comment the issue will be automatically closed. Thank you!