APM
Vercel
Traces | Metrics | App Logs | Custom Logs | Profiling |
---|---|---|---|---|
✅ | ✖️ | ✖️ | ✅ | ✅ |
Overview
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 demo code here.
Refer to our sample Vercel project to see the Middleware - Vercel Integration in action.
Prerequisites
-
Vercel Pro or Enterprise Account
-
Next.js version 13.4
or newer installed. Check your Next.js version with the following command:
Shell
npx next --version
@opentelemetry/api
package installed. If not, run the following command:
Shell
npm install @opentelemetry/api@">=1.3.0 <1.5.0"
You can read detailed prerequisites and essential information about OpenTelemetry in Vercel’s documentation. This information will be helpful when integrating Middleware with Vercel.
Install
Step 1: Add Middleware Integration
- Add the Middleware integration from the Vercel marketplace:
- Select a Vercel Account to add the Integration to:
- Select the Project you want to track:
- Allow Permissions and Add Integration:
You must accept the below permissions in order to proceed with the rest of the integration
- Login to your Middleware Account:
- The below screen indicates you have successfully integrated Vercel and Middleware:
After three seconds you should be redirected back to the Vercel marketplace
- In Vercel, enable traces prior to deploying your project
Step 2: Install Next.js APM Package
Run the following command in your terminal:
Shell
npm install @middleware.io/agent-apm-nextjs
Step 3: Modify Config File
Add the following code to your next.config.js file:
Next.js
const nextConfig = {
// ...
// Your existing config
experimental: {
instrumentationHook: true
}
// ...
// Your existing config
}
module.exports = nextConfig
Step 4: Create Instrumentation File
- Create a custom instrumentation.ts (or .js) file in your project root directory or inside the src folder
The
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
Example: If you use pagesExtension: [‘ts’], the instrumentation file should be named
instrumentation.ts
- Add the below code snippet. The access token is your account key, which can be found on the Installation page:
Next.js
// @ts-ignore
import tracker from '@middleware.io/agent-apm-nextjs';
export function register() {
tracker.track({
projectName: "<PROJECT-NAME>",
serviceName: "<SERVICE-NAME>",
accessToken: "<xxxxxxxxxx>",
target: "vercel"
});
}
- 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.
Vercel does not support instrumentation for edge functions.
Step 5: Enable Logging
Ingest custom logs by using the following functions based on desired log severity levels:
Next.js
// @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
}
Step 6: Deploy on Vercel
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
Troubleshooting
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.
Need assistance or want to learn more about Middleware? Contact us at support[at]middleware.io.
Was this page helpful?