Vercel Integration

​

Overview

Integrating Vercel with Middleware allows you to monitor, analyze, and store traces generated by your Serverless Functions. Additionally, Middleware provides a centralized dashboard where you can view logs, metrics, traces, and profiling data all in one place. Real User Monitoring allows you to monitor performance and understand user behavior. Profiling, on the other hand, enables you to capture detailed performance data and gain deeper insights into the behavior of your applications. Lastly, Synthetics Monitoring allows you to simulate global traffic and measure endpoint uptime.

This comprehensive set of features empowers you to proactively manage and optimize the performance of your applications on Vercel with ease.

​

Additional Information

Once you set up the integration, traces from your Vercel project will be streamed to Middleware, and you can view all the logs, and profiling information in Middleware’s Application Performance Monitoring (APM) dashboard. Our Vercel dashboard provides summary metrics and access points to drill down into your traces. You can monitor and analyze your Vercel traces along with traces from your infrastructure and applications in Middleware’s APM.

In Middleware’s APM, you can view all the details, including service name, latency, number of requests, success ratio, duration, method name, trace profiling, and attributes. This allows you to identify performance bottlenecks and optimize your applications for better user experience.

You can also create custom dashboards in Middleware to view the log, trace and profiling data that is most important to you and create alerts on different parameters. This helps you stay on top of critical issues and respond to them proactively.

​

Prerequisites

After this integration, you need to create a project that will be deployed on the Vercel platform. You can refer to this link to learn more about Vercel deployment.

​

Steps to integrate

To integrate the Middleware, follow these steps.

1. Go to Vercel’s marketplace, and search for “Middleware”, or go directly to this link.
2. Click “Add Integration”.
3. From the popup window, select the Vercel account, that you want to connect, and then click “Continue”.
4. Select the project, which you want to track, so here you can select all of your projects or choose any specific also, then click “Continue”.
5. On the next step, the popup will show which of the permission should be granted to track your project. To proceed, click “Add integration”.
6. You will be redirected to the Middleware’s Login page, where you can log in with your account so that Vercel will be able to send all the activity to your Middleware’s dashboard.
7. After logging in, Middleware and Vercel will exchange tokens to establish seamless collaboration, enabling comprehensive activity tracking. Upon completing this final step, you will receive a confirmation message indicating a successful installation.
8. After 3sec, You will be redirected back to the marketplace page with Middleware integrated.

​

Essential Considerations

• The instrumentation.ts file must be located at the root of your project, not inside the app or pages directory.
• In case you’re using the src folder, please ensure that the instrumentation.ts file is placed within the src directory, alongside the pages and app directories.
• If you use the pagesExtension config option to add a suffix, it is essential to synchronize the instrumentation filename accordingly. For example, if you use pagesExtension: ['ts'], the instrumentation file should be named instrumentation.ts.
• It’s important to note that when you don’t have any APIs (or Serverless functions) integrated, the Vercel platform will treat the app as a static website during deployment. Consequently, in this scenario, the instrumentation.ts file will not be invoked, resulting in the absence of traces or logs in your Middleware account.
  
  If you’re looking to set up a sample Next.js project with API routes, you can use the following command in your terminal: npx create-next-app@latest --example api-routes

​

Getting Started with Code

Once you have successfully integrated Middleware, proceed with the following steps to incorporate it into your Vercel project and monitor real-time activity:

1. Install the following package that will help to send all the traces and profiling data generated from your project. This package will instrument your project based on the OpenTelemetry approach.
   Make sure you have installed the latest version of Next.js or a version greater than 13.4+, as Vercel introduced their experimental feature in that release.
   Before proceeding with the Next.js APM setup, make sure you have the @opentelemetry/api package installed. If it’s not already installed, run the following command: npm install @opentelemetry/api@">=1.3.0 <1.5.0"

npm install @middleware.io/agent-apm-nextjs

2. As this feature is experimental, modify your next.config.js where you need to explicitly opt-in by enabling the instrumentation hook as true. Check the following code for a better idea:

const nextConfig = {
    // ...
    // Your existing config

     experimental: {
         instrumentationHook: true
     }

    // ...
    // Your existing config
}
module.exports = nextConfig

3. Create a custom instrumentation.ts (or .js) file in your project root directory (or inside src folder, if using one), and add the following code:

// @ts-ignore
import tracker from '@middleware.io/agent-apm-nextjs';

export function register() {
    tracker.track({
        projectName: "<PROJECT-NAME>",
        serviceName: "<SERVICE-NAME>",
        accessToken: "<ACCESS-TOKEN>",
        target: "vercel"
    });
}

4. To enable logging in your project, add the following code in your file:

// @ts-ignore
import tracker from '@middleware.io/agent-apm-nextjs';

export default async function handler(req, res) {
    // ...
    // Your existing code

    tracker.info("Info Sample");
    tracker.warn("Warn Sample", {
        "tester": "Alex"
    });
    tracker.debug("Debug Sample");
    tracker.error("Error Sample");

    // ...
    // Your existing code
}

5. Now deploy your project to vercel platform.

​

Visualize Your Data

Once you have set up the integration between Vercel and Middleware, you can visualize your data in Middleware’s dashboard. The dashboard provides an overview of your Vercel project’s performance and allows you to drill down into your traces, logs, and profiling data.

​

Traces

You can view your Traces in the dedicated Traces screen, which shows you detailed information about each trace, including service name, latency, number of requests, success ratio, duration, method name, trace profiling, and attributes. In addition to the Traces screen, you can also view your Vercel traces along with traces from your infrastructure and applications in Middleware’s Application Performance Monitoring (APM).

​

Logs

For logs, Middleware provides a dedicated screen where you can see all the logs generated from your project. You can filter the logs based on service name, log level, attributes, and time.

​

Profiling

Profiling is like having a detailed stopwatch that measures the time taken for each part of your app to do its job. This information is then shown in a visual graph, highlighting the areas that may be slowing down your app. By using this data, you can find and fix those slow parts, making your app faster and smoother for users to enjoy. It’s like finding and improving the sluggish spots in your app to make it run better overall.

With precise timing for each operation, Profiling offers a powerful tool to enhance application efficiency and deliver an exceptional user experience.

​

Troubleshoot

If you have integrated Middleware and are still not getting your traces, logs and profiling data, it’s important to ensure that you’ve followed Essential Considerations, mentioned earlier:

1. File Location: Please ensure that our instrumentation.ts file must be located at the root of your project. If you are using the src folder, make sure that the instrumentation.ts file is placed within the src directory, alongside the pages and app directories.
2. Synchronize File Name: Sync the instrumentation.ts filename with your pagesExtension configuration; e.g., with pagesExtension: [‘ts’], name the file instrumentation.ts.
3. Non-Static Project: Make sure you’re not instrumenting a static website or project, as this will not provide you expected traces and logs.

If you’ve verified that you’ve followed these essential considerations and are still encountering issues with your data, follow these additional troubleshooting step:

4. Redeploy: Try redeploying your project by clicking “Redeploy” on Vercel. This should ensure that the traces and profiling data are properly generated and collected by Middleware.

If you continue to experience problems, we recommend consulting the Middleware documentation for more detailed guidance or reaching out to our support team for assistance.

​

Conclusion

Integrating Vercel with Middleware allows you to monitor and analyze traces and profiling data generated by your serverless functions in a unified dashboard, along with logs and other data. By following the steps outlined in this guide, you can easily set up the integration and start tracking your project’s raw activity on a live basis.

With Middleware’s real user monitoring and synthetics monitoring capabilities, you can gain valuable insights into user behavior and endpoint uptime. If you encounter any issues or have any questions, reach out to Middleware’s support team for assistance.