# Performance and Error Tracing and new Vercel integration > Upon new Performance and Error tracing, Checkly now collects: Network traces, Web Vitals, Console logs, and Screenshots on every error. Source: https://www.checklyhq.com/blog/launching-performance-and-error-tracing-new-vercel-integration/ --- [Blog](https://www.checklyhq.com/blog/) / [Performance](https://www.checklyhq.com/blog/tag/performance/) / [Playwright](https://www.checklyhq.com/blog/tag/playwright/) # Launching Performance and Error Tracing and new Vercel integration [Hannes Lenke](https://www.checklyhq.com/blog/author/hannes-lenke/)[Tim Nolet](https://www.checklyhq.com/blog/author/tim-nolet/) October 26, 2021 · Updated July 19, 2024 Today, I'm super excited to announce our new P**erformance and Error tracing**features for all Playwright-based [browser checks](https://www.checklyhq.com/docs/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](https://vercel.com/integrations/checkly).** 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](https://www.checklyhq.com/docs/browser-checks/tracing-web-vitals/): 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: > Think of it like this. Graphic not to scale. [pic.twitter.com/6lLUYNM53A](https://t.co/6lLUYNM53A) — giovannimu (official) — #StaplerLife (@JohnMu) [May 21, 2021](https://twitter.com/JohnMu/status/1395798952570724352?ref_src=twsrc%5Etfw) Web Vitals were created by Google. You can read more about them at [web.dev/vitals](http://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/](https://web.dev/fcp/) - Largest Contentful Paint (LCP) - [https://web.dev/lcp/](https://web.dev/lcp/) - Cumulative Layout Shift (CLS) - [https://web.dev/cls/](https://web.dev/cls/) - Total Blocking Time (TBT) - [https://web.dev/tbt/](https://web.dev/tbt/) - Time to First Byte (TTFB) - [https://web.dev/time-to-first-byte/](https://web.dev/time-to-first-byte/) [Learn more about Web Vitals on our documentation.](https://www.checklyhq.com/docs/browser-checks/tracing-web-vitals/) ## 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: - Console messages like `error`, `warning`. - 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: - Your script clicks on a button using a selector `wait page.click(".my-button-class")`. - For some reason, that button does not exist or is not clickable. - Playwright waits for the button with the selector to appear. It does not and Playwright throws an error. - Checkly automatically calls `page.screenshot()` a screenshot. - 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 V[ercel integration.](https://www.checklyhq.com/docs/cicd/vercel/) In fact, Checkly is the launching Partner for V[ercel Checks.](https://vercel.com/docs/concepts/deployments/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: - See high-level check results in your Vercel deployment screen. - 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](https://app.checklyhq.com/signup) and give it a spin! [Hannes Lenke](https://www.checklyhq.com/blog/author/hannes-lenke/) CEO [Tim Nolet](https://www.checklyhq.com/blog/author/tim-nolet/) Chief Evangelist In This Article - Performance tracing with Web Vitals - Error Tracing - Automated screenshots on error - Vercel integration with Web Vitals and Reliability Checks Monitor with AI Let your agents create & deploy monitors with deep understanding of your application [Start for free](https://app.checklyhq.com/signup) Share on social Try Checkly ## Catch it before your users do Run Playwright and API checks against production every minute, from locations around the world. Your checks live in your repo and deploy with your code. [Start for free](https://app.checklyhq.com/signup) [Book a demo](https://www.checklyhq.com/demo-request/) Free plan. No credit card. # scaffold a project with example checks $ npm create checkly@latest # run them from our global locations $ npx checkly test # turn them into production monitors $ npx checkly deploy ## Related Articles [How to run Checkly in your infrastructure - our new private locations May 23, 2022](https://www.checklyhq.com/blog/new-private-locations/)[Checkly Alerting Improvements and Our New Slack Community October 11, 2022](https://www.checklyhq.com/blog/checkly-alerting-improvements-and-our-new-slack-community/)[Checkly GitHub Sync Goes into GA October 14, 2022](https://www.checklyhq.com/blog/checkly-github-sync-goes-into-ga/)[[Watch Now] Open Source Observability - the Checkly Webinar January 8, 2024](https://www.checklyhq.com/blog/webinar-open-source-observability/)[Fire up new Browser checks with our new templates August 30, 2022](https://www.checklyhq.com/blog/fire-up-new-browser-checks-with-our-new-templates/)