How to debug Supabase edge functions?

 

Step 1: Set Up Your Development Environment

 

Before you start debugging Supabase Edge Functions, ensure that your development environment is correctly set up. This includes having Node.js installed as well as the Supabase CLI.

# Install Node.js if you haven't
# Visit nodejs.org to download the installer or use a package manager 

# Install Supabase CLI
npm install -g supabase

 

Step 2: Initialize Supabase Project

 

To work with Supabase Edge Functions, you must initialize a project. Make sure you are signed into your Supabase account.

# Create a new directory for your project and navigate into it
mkdir my-supabase-project && cd my-supabase-project

# Initialize the Supabase project
supabase init

# Authenticate your Supabase account
supabase login

 

Step 3: Create an Edge Function

 

Supabase Edge Functions can be created using the command line. Write your logic in JavaScript or TypeScript.

# Create a new Edge Function
supabase functions new hello-world

# Navigate to the created function directory
cd supabase/functions/hello-world

 

Step 4: Write Your Function Logic

 

Modify the index.ts (or index.js if using JavaScript) file inside your function directory. Write the logic you need for your edge function.

// index.ts

export default async function handler(req: Request) {
  const { name } = await req.json();
  return new Response(`Hello, ${name}`, { status: 200 });
}

 

Step 5: Develop and Test Locally

 

Testing locally is crucial to ensure that your function works before deploying. Use supabase serve to serve the function locally.

# Start the local development server
supabase functions serve hello-world

# Your function should be accessible at http://localhost:54321/functions/v1/hello-world

 

Step 6: Debugging Locally

 

While the function is running locally, debug using console.log() or a similar logging utility. Open your browser's developer console or CLI to read logs.

// Add console statements in your function for debugging
export default async function handler(req: Request) {
  const { name } = await req.json();
  console.log("Received request with name:", name); // Debugging log
  return new Response(`Hello, ${name}`, { status: 200 });
}

// Logs will be visible in the terminal where you ran the 'supabase functions serve' command.

 

Step 7: Deploy Your Function

 

Once satisfied with local testing, deploy your function to Supabase, allowing it to run in the production environment.

# Deploy your function to Supabase
supabase functions deploy hello-world

 

Step 8: Monitor Logs on Supabase

 

After deploying, monitor your Edge Function for any issues using the Supabase dashboard, where you can see logs and execution metrics.

# Use the Supabase dashboard to access function logs:
# Navigate to your Supabase project
# Go to the "Functions" section
# Select your deployed function to view logs

 

Step 9: Handle Errors Gracefully

 

Implement error handling within your Edge Function to troubleshoot effectively.

export default async function handler(req: Request) {
  try {
    const { name } = await req.json();
    if (!name) {
      throw new Error("Name is required");
    }
    return new Response(`Hello, ${name}`, { status: 200 });
  } catch (error) {
    console.error("Error handling request:", error); // Log error
    return new Response("Internal Server Error", { status: 500 });
  }
}

By following these steps, you will be able to effectively debug your Supabase Edge Functions, ensuring they perform as expected both locally and in production.