Shift-Left Monitoring for GitHub and Vercel Workflows

A recent LinkedIn poll by Peter Zaitsev asked:
“What is the most common preventable cause of downtime in your environment?”

Guess what most respondents said it was? Surprise, surprise – the top answer is Deploying Broken Code, with 57% of respondents selecting it.

This reinforces how critical it is to catch issues before they hit production. Now, you might say that you have unit tests for this purpose, but unit tests, or even “artificial” integration tests won’t catch everything.

Code changes can unintentionally break key parts of your site. Pages may stop loading, APIs might fail, or important user journeys could be disrupted. These problems often go unnoticed until someone reports them, which is usually too late.

However, by adding automated checks to your CI/CD pipeline, you can simulate real user journeys, test endpoint availability, and catch issues before each deployment. This gives you fast feedback and confidence that your site is working as expected.

If you’re deploying your website with Vercel and using GitHub for version control, it’s important to automatically verify that everything works in PR environments before merging. By shifting testing left in the development cycle, you can catch issues early, simulate real user interactions, and ensure reliability before any changes reach production.

Now, let’s walk through how to do this using Sematext Synthetics. More specifically, how to use CI/CD Monitors to set this up.

How to Set It Up

Before we dive into the setup, here’s what you can expect once this is up and running:

• Results of automated checks displayed next to your commits in GitHub showing whether your latest changes broke anything.
• On-demand testing for PRs and deployments, so you catch issues early, not in production.
• A single GitHub Action that runs a full suite of API and user journey tests when a change is pushed. Side note: don’t want to use your precious Github Action minutes for this? No problem, you can easily use the Standalone Runner. That’s actually what we use ourselves here at Sematext.
• Commit level traceability that links each test result directly to the GitHub commit that triggered it. You can instantly see which code change caused a failure and fix it without guessing. Yes, this is priceless! Thank us later. 😉
• Alerts when something breaks. After each test run, you’ll get notified through your configured Notification Hooks (Slack, email, webhooks, and more) so you can react immediately to failures.
• Fast debugging using monitor results and Vercel logs, shown side by side in Sematext Cloud.

In short, you’ll have visibility into the health of your site or API without needing to manually test each change.

Let’s walk through how to set this up.

Create CI/CD Monitors

Log in to Sematext Cloud and create a Synthetics App. Then set up a CI/CD Browser or HTTP Monitor.

Use Browser Monitors to simulate user journeys like logging in or navigating pages, and HTTP Monitors to check specific endpoints such as API health or response times.

Unlike regular monitors that run continuously on a schedule, CI/CD Monitors are triggered manually or automatically within your CI/CD pipelines. For example, they can run when new code is pushed, a pull request is opened, or a new version is deployed. This helps you catch issues early before a deployment, or right after they are in production.

Group Monitors for CI/CD

To run multiple monitors together as part of your CI/CD pipeline, organize them into a CI/CD Monitor Group. This lets you trigger a full suite of tests with a single GitHub Action.

When you create a group, you’ll be asked to enter your GitHub repository URL. Paste it in, and after saving the group, you’ll see step-by-step instructions for configuring your GitHub Action.

Add a GitHub Action

In your repository, create a workflow file, for example:

.github/workflows/sematext_cicd.yaml

You can find a complete example along with variable explanations and customization options in the CI/CD example workflow.

With this setup, your CI/CD Monitor Group will run its synthetic tests when the deployment_status event is triggered. If your repository is managed by Vercel, this happens automatically after each push to pull requests and the main branch. This makes it easy to catch issues early and test your site or API before going live.

Review Results

Here’s what the check looks like next to your commits in GitHub:

In Sematext Cloud, you’ll see a summary of the test results. For example:
“10 of 13 monitors failed.”

You can create as many monitors as needed depending on which endpoints or user journeys you want to test in pull request environments or after deployments.

Click on a result to view detailed insights for each monitor, including:

• Error responses
• Failed steps or scripts
• Full-page screenshots
• Performance metrics

Tip: If your Browser Monitors extract performance data (like heap size), you can track memory usage after each deployment. This helps you detect memory related issues early and fix them before they impact users.
To learn more, check out How to Monitor Website Memory Usage Over Time.

Each result links to:

• The specific GitHub commit that triggered the run
  So you know exactly what code change introduced the issue.
• The branch name
  To help you trace failures in feature branches, master branch, or PRs.
• A direct link to the commit for quick review and debugging
  This makes it easy to jump straight into the diff, understand what changed, and fix the problem quickly, no digging required.

Investigate Failures Using Vercel Logs (Optional)

Sematext has a Vercel Logs integration that lets you send your Vercel logs directly to Sematext Cloud. This helps you find and fix issues faster.

To set it up, follow the Vercel integration guide. First, create a Vercel Logs App. Then connect your Logs App with your Synthetics App that runs your CI/CD monitors.

Once connected, Sematext will automatically show related logs when a monitor fails. You’ll see logs from the same time period as the error, including any warnings or issues. The logs and monitor results can appear side by side using Split Screen, so you can check everything in one place without switching tabs.

Conclusion

Integrating automated monitoring into your GitHub and Vercel workflows is a powerful way to catch issues early before they impact your users. By simulating real user flows and checking endpoint health immediately before every deployment, you gain fast and actionable feedback that helps maintain site reliability and performance.

With Sematext Cloud, setting up CI/CD Browser and HTTP monitors is super straightforward. The integration with GitHub Actions lets you run test suites within your pipeline. Combined with Vercel Logs integration, troubleshooting becomes faster and more effective by bringing all relevant data into one place.

By adopting this shift-left monitoring approach, you empower your team to detect, diagnose, and fix problems early, ultimately delivering a smoother and more reliable experience to your users with every deployment.