Expo React Native FunctionsHttpError: Edge Function returned a non-2xx status code

[Joonas16]

I have a problem here running edge functions on my React Native app with Expo. Things are working correctly, when I'm serving this function and running POST function in PostMan. The error I'm getting from running this: [FunctionsHttpError: Edge Function returned a non-2xx status code]

supabaseClient.ts:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = Deno.env.get('SUPABASE_URL')!;
const supabaseAnonKey = Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!;
export const supabaseClient = createClient(supabaseUrl, supabaseAnonKey);

Edge function (upload-user-file):

import { multiParser, FormFile } from '@multiparser';
import { serve } from 'deno-server';
import { supabaseClient } from '../_shared/supabaseClient.ts';
import { corsHeaders } from '../_shared/cors.ts';

const MB = 1024 * 1024;

serve(async (req: any) => {
    if (req.method === 'OPTIONS') {
        return new Response('ok', { headers: corsHeaders });
    }
    try {
        const form = await multiParser(req);

        if (!form) {
            return new Response(JSON.stringify({ error: 'No files found' }), {
                headers: { ...corsHeaders, 'Content-Type': 'application/json' },
                status: 400,
            });
        }

        const image: FormFile = form.files.file as FormFile;
        const contentType = image.contentType;
        const userId = form.fields.user_id as string;
        const filePath = `${userId}/${Math.random()}-${image.filename}`;

        const { data: newData, error: uploadError } = await supabaseClient.storage
            .from('user_bucket')
            .upload(filePath, image.content!.buffer);

        if (uploadError) {
            return new Response(JSON.stringify({ error: uploadError }), {
                headers: { ...corsHeaders, 'Content-Type': 'application/json' },
                status: 404,
            });
        }
        const newImagePath = newData.path;

        const {
            data: { publicUrl },
        } = supabaseClient.storage.from('user_bucket').getPublicUrl(newImagePath);

        const { data: insertedImage, error: insertImageError } = await supabaseClient
            .from('user_storage')
            .insert({
                user_id: userId,
                public_url: publicUrl,
                content_type: contentType,
                file_path: newImagePath,
            })
            .eq('user_id', userId)
            .select('*')
            .single();

        if (insertImageError) {
            return new Response(JSON.stringify({ error: insertImageError }), {
                headers: { ...corsHeaders, 'Content-Type': 'application/json' },
                status: 403,
            });
        }

        return new Response(JSON.stringify({ ...insertedImage }), {
            headers: { ...corsHeaders, 'Content-Type': 'application/json' },
            status: 200,
        });
    } catch (error) {
        return new Response(JSON.stringify({ error }), {
            headers: { ...corsHeaders, 'Content-Type': 'application/json' },
            status: 409,
        });
    }
});

Client code:

import { ImagePickerAsset } from 'expo-image-picker';
import { Database } from '../lib/database.types';
import { SupabaseClient } from '@supabase/supabase-js';

export const uploadImage = async (
    client: SupabaseClient<Database>,
    image: ImagePickerAsset,
    userId: string
) => {
    const photo = {
        uri: image.uri,
        name: `${image.uri.split('/').pop()}`,
        type: image.type,
    } as any;

    const formData = new FormData();
    formData.append('file', photo);
    formData.append('user_id', userId);

    const fileExt = photo.name;
    const filePath = `${userId}/${fileExt}`;

    const { data, error } = await client.functions.invoke('upload-user-file', {
        body: formData,
    });

    return { ...data, filePath };
};

[thorwebdev]

Can you use https://docs.expo.dev/debugging/tools/#react-native-debugger to inspect the network traffic of the function call and see if there's more detail available there?

Anything in the Functions logs in your supabase dashboard? https://supabase.com/docs/guides/functions/debugging

OOC, any reason you're routing your file upload through a function rather than uploading directly to storage from your client?

[Joonas16]

For some reason I cant get react-native-debugger to work, even though I've followed the instructions. I'm using the latest versions and expo-router.

But to the error, there are nothing specific in the invocation logs. Is there a way to populate the error with Deno, to get the actual error to logs aswell?

EDIT: and I would like the edge functions to handle all the logic: upload file to bucket -> get public url of that file -> insert the new public url to DB -> query all public .

I have structured my bucket like: user-id/picture1.png, so I would be able to get them directly from there, but then I would need to convert every single file to public URL on client-side, which feels quite off. Do you have any other solution to achieve this rather than using edge functions?