Monitor Frontend Performance with DebugBear and Vercel

Automatically test each Vercel deployment and report performance changes to GitHub.

DebugBear is a website monitoring tool that helps developers keep track of site performance and Lighthouse scores.

This guide walks you through setting up continuous monitoring for your production sites, as well as automatic testing of every Preview Deployment.

Step 1: Import and Deploy with Vercel

There are two ways to deploy with Vercel. We recommend using a Vercel for Git Integration for ease-of-use. Alternatively, Vercel CLI can be used to generate a manual Preview Deployment.


To deploy your project with a Vercel for Git Integration, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git Integration of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the default branch (commonly "master") will result in a Production Deployment.

Step 2: Install the DebugBear Vercel Integration

With your project set up with Vercel, install the DebugBear integration from the Vercel Integrations Marketplace to add it to your account.

Select the account or team your deployed project belongs to. You will then be redirected to DebugBear.

Add the DebugBear integration and grant it access to the account that your project belongs to.

Step 3: Set Up a DebugBear Account

If you do not have a DebugBear account already, click Create account on DebugBear to automatically sign up with your Vercel email address. Otherwise, you can continue with your existing account.

When logged in with DebugBear, select which of your Vercel projects you would like to monitor and click Set up.

Sign up to DebugBear and pick which Vercel project you want to monitor.

DebugBear will automatically start monitoring your project's homepage and up to 3 other pages on your site.

Note: It may take a few minutes for reports to come in.

By default these pages are tested once a day from a US-based server, but you can change these settings later. Additionally, you can add any extra pages you would like to monitor.

The DebugBear dashboard showing daily monitoring data.

Step 4: Push Changes on a Branch

Make some changes to your project, then push the branch to your git repository. Vercel will create a Preview Deployment, and DebugBear will test the performance of the deployed site.

You can see test results for your deployment in any of these places:

  • The integration configuration page on Vercel
  • The project Builds tab on DebugBear
  • Posted to a Slack channel
  • Or, on GitHub (described in the next section)

Viewing build results on the Vercel integration configuration page.

hint: If you see a drop in your SEO score, this may be because DebugBear is comparing a preview deployment, that's blocked from indexing, to the production site.

Selecting Pages to Test

You can configure which of your monitored pages should be tested after each deployment. Normally you don't need to change anything here, but if you use a custom deployment suffix other than now.sh you need to specify it.

Build Statuses

By default, all DebugBear tests will finish in a neutral state. To get meaningful pass or failure results you need to set up a performance budget that defines metric thresholds that shouldn't be exceeded.

Send Reports to GitHub

If you use GitHub, DebugBear can report test results directly on your pull request. You need to install the DebugBear GitHub app.

  1. Go to the Integrations tab of your DebugBear project and connect your user account to GitHub.

  2. Click Install Github integration and grant access to the repository that contains your Vercel site.

After your next deployment, you will see one commit status on your GitHub pull request for each tested page.

GitHub commit statuses for a Vercel deployment.



Written By
Written by mattzeunertmattzeunert