Monitor Frontend Performance with DebugBear and Vercel

Automatically test each Vercel deployment and report performance changes to GitHub.
Last updated on March 16, 2023
Integrations & LogsAnalytics

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.

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

Import the project into Vercel using your Git provider of choice.

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

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.
Add the DebugBear integration and grant it access to the account that your project belongs to.

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.
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.
The DebugBear dashboard showing daily monitoring data.

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.
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.

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.

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.

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.
GitHub commit statuses for a Vercel deployment.

Couldn't find the guide you need?