How to Receive and Replay External Webhooks in Vercel Serverless Functions with Hookdeck

Webhooks play a crucial role in modern application development, as they enable real-time communication and data transfer between different systems. When it comes to serverless applications hosted on the Vercel platform, receiving and handling webhooks efficiently becomes crucial.

Hookdeck is a webhook management platform that helps developers reliably receive webhooks, manage events, and troubleshoot any issues quickly.. By integrating Hookdeck with Vercel, you can enhance the management and reliability of your webhook events, ensuring seamless integration with external systems.

This article explores the process of receiving and replaying external webhooks in Vercel Serverless Functions using Hookdeck.

Create a Vercel webhook function

Before receiving webhooks, let's set up a Vercel Serverless Function to handle incoming webhook events. Vercel provides a seamless platform for deploying Serverless Functions in a scalable and efficient manner.

This example assumes you have a Vercel account; it demonstrates how to create a Vercel Serverless Function with Node.js.

To create a Vercel webhook function:

• Install the Vercel CLI by running npm install -g vercel in your terminal.
• Create an api/ folder in the root of your project directory.
• Create a webhook.js file inside api/ with the following code snippet as the content.

module.exports = async (req, res) => {
  try {
    if (req.method !== "POST") {
      res.status(405).json({ error: "Method Not Allowed" });
      return;
    }

    // Process the webhook payload
    const payload = req.body; // Assuming the payload is in the request body

    // Do something with the payload
    console.log("Webhook received:", payload);

    // Return a response (optional)
    res.status(200).json({ message: "Webhook received successfully!" });
  } catch (error) {
    console.error("Webhook error:", error);
    res
      .status(500)
      .json({ error: "An error occurred while processing the webhook." });
  }
};

• In your terminal, navigate to your project's directory and run vercel to deploy your project to Vercel. Follow the prompts to configure your deployment — this involves making the appropriate settings, such as the project name and scope of deployment
• The function gets deployed and its link is provided for inspection. Note the URL given.

Read more about Vercel Serverless Functions here.

Replay webhooks

Using Hookdeck as a gateway between your source platform webhooks to Vercel, you can replay any failed event that doesn’t make it to Vercel by following the steps below.

Create a Hookdeck connection

• Sign up or log in to your Hookdeck dashboard.
• Click on Connections on the side panel then Create + a new connection. This opens a right sidebar; fill in the required information and Save.
  • Source: Specify the source to be any platform or application you want to receive webhooks from.
  • Destination: Create a destination pointing to the URL of your Vercel function above with the path of your serverless function (webhook.js) within the api folder, i.e. <https://your-project-name.vercel.app>/api/webhook.

After creating the connection, you are given a URL to use on the source platform.

The created connection makes it possible for webhook events from your source to be relayed directly to Vercel.

Receive webhook events

You can utilize Hookdeck Console to simulate example webhooks from popular webhook sources.

Say for example your webhook source is GitHub. When an event is triggered, it can be seen on the Hookdeck dashboard and also monitored on Vercel Logs.

From your Hookdeck dashboard, switch to the Events tab from the side panel and filter as per the connection created above. This shows the activities of events on that connection.

From your Vercel dashboard, select the project deployed. Switch to the Logs tab and filter the logs based on the function in /api/webhook.

Replaying error or failed webhooks

One of the key features provided by Hookdeck is the ability to replay webhooks. This is useful when you need to replay a failed webhook event in cases where the Vercel function doesn’t execute properly,

Click on the kebab menu across the failed event and Retry. This attempts to send the event to your destination again.

You now know how to replay webhook events for your Vercel functions using Hookdeck. By leveraging Hookdeck's powerful features, such as security, routing, and analytics, you can effectively manage and troubleshoot webhook events from third-party platforms. Take a look at Hookdeck's documentation to explore more.