Launching Performance and Error Tracing and new Vercel integration

Today, I'm super excited to announce our new Performance and Error tracing features for all Playwright-based browser checks. This means Checkly now collects:

• Network traces
• Web Vitals
• Console logs
• Screenshots on every error

One of our key initiatives is supporting you with deeper insights into what is causing issues in the web apps you monitor with Checkly. With this new set of features we give you actionable data for easy debugging; Collected automatically with no extra code needed.

Of course, fixing bugs in Production is great, but catching bugs before they go live is even better! Cue our vastly upgraded integration with Vercel.

On each deploy Vercel does, Checkly can now run all your checks on each git push and report results right back to Vercel, blocking you from shipping any critical bugs to either your Preview environment or Production environment.

Let's explore!

Performance tracing with Web Vitals

We have enhanced our Playwright runtime to support collecting performance metrics: zero configuration required. For each page visited by your script, Checkly will automatically collect a set of five Web Vitals. Web Vitals are user-focused quality signals for web pages that indicate a good, ok, or poor user experience.

This enables you to not only check your web app's performance continuously on production but also to observe the performance during development.

Excellent performance = boosted SEO

Shipping your web sites with excellent performance is crucial. Not only because your users demand a snappy experience but also because Google introduced page performance as a ranking factor in 2021.

This means that outstanding performance will boost your SEO, as unveiled by John Mueller a Search Advocate at Google here:

Web Vitals were created by Google. You can read more about them at web.dev/vitals. We collect the metrics that are recommended for a Lab environment vs. the ones that are usually collected "in the wild" by Real User Monitoring.

Lab measurement is the best way to test the performance of features during development—before they've been released to users. It's also the best way to catch performance regressions before they happen.

• First Contentful Paint (FCP) - https://web.dev/fcp/
• Largest Contentful Paint (LCP) - https://web.dev/lcp/
• Cumulative Layout Shift (CLS) - https://web.dev/cls/
• Total Blocking Time (TBT) - https://web.dev/tbt/
• Time to First Byte (TTFB) - https://web.dev/time-to-first-byte/

Learn more about Web Vitals on our documentation.

Error Tracing

Error Tracing enables you to easily identify critical JavaScript errors and missing resources like scripts or images. This feature is part of every Playwright browser check automatically and includes:

1. Console messages like  error, warning.
2. Any network requests, like xhr/fetch, javascript, CSS, and others.

Automated screenshots on error

Moreover, we now take screenshots the moment Playwright detects an error. This feature is a real time saver as it enables you to see how your web app looked when something went wrong.

Here is a real-life example:

1. Your script clicks on a button using a selector wait page.click(".my-button-class").
2. For some reason, that button does not exist or is not clickable.
3. Playwright waits for the button with the selector to appear. It does not and Playwright throws an error.
4. Checkly automatically calls page.screenshot() a screenshot.
5. The screenshot indicates that a specific button was missing.

Vercel integration with Web Vitals and Reliability Checks

Last but not least, we've partnered with Vercel and significantly upgraded our Vercel integration. In fact, Checkly is the launching Partner for Vercel Checks.

This API enables providers like us to run performance and reliability checks on Preview and Production environments. Furthermore, Vercel will not only trigger Checkly checks on every commit, but Checky will also feed the results back to Vercel, enabling you to:

1. See high-level check results in your Vercel deployment screen.
2. Configure your Vercel projects to block merging unless the tests pass.

This is just the beginning. Our goal is to expose even more valuable data and empower modern developers to delightfully ship reliable and fast applications.

We look forward to hearing what you think, and what other metrics we should collect. If you have not already, create a free Checkly account and give it a spin!