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
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.
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.
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.
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.
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)
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.
- Go to the Integrations tab of your DebugBear project and connect your user account to GitHub.
- 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.
