Skip to main content

Vercel integration

The Vercel integration automatically tests the performance and Lighthouse scores of Vercel deployments.

Vercel dashboard Lighthouse scores

Getting started

  1. Install the integration on Vercel
  2. Create a DebugBear account, or use an existing one
  3. Select a Vercel project to monitor

DebugBear will crawl your site and try to automatically set up monitoring for up to 3 pages. You can add customize these pages or add additional ones.

Go to the Vercel website to read the full guide to setting up performance testing for your Vercel project.

Branch builds

When you push a commit, DebugBear will compare it to the latest build on the master branch.

By default the build status will be neutral, but you can get pass/fail statuses by setting up performance budgets.

(Expect your SEO score on the branch to be lower, as the preview build is blocked from indexing.)

Reporting to GitHub

If you install the GitHub integration the build statuses will also be added to your GitHub pull requests.

DebugBear build statuses for Vercel deployments on Github

URL filter

By default, each time you deploy your site pages in your project with URLs matching project-name* will be tested. However, you might want to exclude some pages, or use a custom deployment suffix. The URL filter setting allows you to do that.

  1. Go to the project home page on DebugBear
  2. Select the Integrations tab
  3. Click the gear icon next to your Vercel integration
  4. Change the URL filter (the value will be saved when you leave the text field)

Page URL filter setting to customize what deployed pages to test

Branch filter

By default, every Vercel deployment in your project will be tested. This can result in a large number of tests being run, and you might want restrict testing to deployments on certain branches.

You can do this by specifying one or more branch names in the Branch Filter setting. Separate branch names with spaces, for example staging dev prod.

You can exclude specific branches using an exclamation mark: !prod !main.

Base branches

This specifies the branch that preview deployments are compared to. You can provide a comma-separated list of branches.

For example if the base branches are set to develop,main:

  • tests on branch my-feature will be compared to develop, if there's an existing test result for the develop branch
    • if there is no test result on develop the my-feature build will be compared to main
    • if there is no test result on main then my-feature is compared to the latest scheduled test result
  • tests on develop will be compared to main
  • tests on main will be compared to the latest scheduled test result
    • if the commit branch is specified as a base branch then base branches preceding it will be ignored
    • that means if the base branches are develop,main,other then a build on master will be compared to other (as long as other has a test result to compare to)

Vercel password protection

If you use Vercel's password protection feature you can set up a login flow to fill out the password before testing the page.

If you production deployment is not password protected, but your branch deployments are then please get in touch and we can set up access.