Logs with Vercel integration

Overview

Vercel is a popular platform for deploying and hosting frontend applications, offering seamless integration with serverless functions. By integrating Lumigo with Vercel, you can enhance observability by capturing, analyzing, and monitoring logs in real-time.

Prerequisites

Before setting up Lumigo with Vercel, ensure you have the following:

• A Lumigo account with access to your API key.
• A Vercel account with an active project and the Pro Plan .

Setting Up Lumigo with Vercel

To set up a Log Drain for Lumigo in your Vercel project, follow these steps:

Obtain Your Lumigo Token:

1. Log in to your Lumigo account.
2. Navigate to the Tracing section to find your unique Lumigo token. This token is required for the integration.
3. Contact Lumigo Support for the Verification Header. Reach out to Lumigo Support to obtain the necessary verification header for Vercel. This header is essential for verifying the Log Drain endpoint.

Configure the Log Drain in Vercel:

1. Access your Vercel dashboard and go to Team Settings > Log Drains.
2. Click on Add a Log Drain.
3. Select the projects you want to collect logs from.
4. Choose the log sources you wish to include (e.g., Function, Edge).
5. Set the delivery format to NDJSON.
6. Enter the following endpoint URL, replacing XXXXXXXXXX with your Lumigo token:

https://logs-ga.lumigo-tracer-edge.golumigo.com/api/vercel-logs?token=XXXXXXXXXX

7. Under Custom Headers, add the verification header provided by Vercel. For example:

Header Key: x-vercel-verify
Header Value: f20eab3717014bdb9e7b9876789ea974c46bce5ce

After acquiring the header, send it to Lumigo. We will add it, after which you can proceed to the next step of verifying your log drain.

Verify the Endpoint

After configuring the Log Drain, Vercel will prompt you to verify the endpoint. Ensure that the verification header is correctly set up to complete this process.

Advanced Configuration

Custom Logging

Enhance logging by using structured logs:

console.log(JSON.stringify({ event: "user_signup", userId: "12345" }));

Error Tracking

You can also capture errors by wrapping functions in a try-catch block:

export default lumigo.trace(async (req, res) => {
  try {
    throw new Error("Test error");
  } catch (error) {
    console.error("Error occurred:", error);
  }
  res.status(500).json({ error: "Something went wrong" });
});