Vercel APM - Setup & Installation Docs | Middleware
Traces | Metrics | App Logs | Custom Logs | Profiling |
---|---|---|---|---|
✅ | ✖️ | ✅ | ✅ | ✅ |
This guide walks you through setting up the Vercel APM integration. These instructions can also be found on the Installation page in your Middleware Account. View example code here.
Vercel Account
Vercel Pro or Enterprise Account
Next.js Version
Next.js version 13.4
or above. Check your Next.js version with the following command:
OpenTelemetry Package
@opentelemetry/api
package installed. If not, run the following command:
Add Middleware integration from Vercel Marketplace
Select a Vercel Account to add the Integration to
Select the Project you want to track
The below screen indicates you have successfully integrated Vercel and Middleware
After integrating Middleware with Vercel, you will be able to centralize your data in Middleware’s Log page. Change your Vercel log collection configuration by navigating to Integrations, selecting Log Drains, and clicking Manage:
Value | Details |
---|---|
Static | Collects logs for static assets like HTML and CSS files |
Edge | Outputs log data from Edge Functions like Middleware |
Lambda | Outputs log data from Vercel Functions like API Routes |
External | Collects log results for external rewrites to a different domain |
Build | Outputs log data from the Build Step |
If you would like to enable traces and profiling within your application, navigate to Vercel and enable traces prior to deploying your project and completing steps two through six.
Next.js
APM PackageRun the following command in your terminal:
Add the following code to your next.config.js
file:
instrumentation.ts (or .js)
FileCreate a custom instrumentation.ts (or .js)
file in your project root directory or inside the src folder
instrumentation.ts
file must be located at the root
of your project unless you are using the src
directory. If you are using the src
directory, ensure the instrumentation.ts
file is placed within the src
directory, alongside the pages and app directories.Synchronize your instrumentation filename if you are using the pagesExtension
config option to add suffixes
instrumentation.ts
Add the below code snippet. The access token is your account key, which can be found on the Installation page:
Integrate your APIs or Serverless functions prior to deployment. Vercel will treat your app as a static website during deployment if you have not integrated any APIs or Serverless functions and the instrumentation.ts
file will not be invoked, resulting in the absence of traces or logs in your Middleware account.
Ingest custom logs by using the following functions based on desired log severity levels:
npx create-next-app@latest --example api-routes
Continuous profiling captures real-time performance insights from your application to enable rapid identification of resource allocation, bottlenecks, and more. Navigate to the Continuous Profiling section to learn more about using Continuous Profiling with the Vercel APM.
If you do not see any data appear on the Middleware dashboard, redeploy your project on Vercel. This should ensure that the traces and profiling data are properly generated and collected by Middleware.