First Vercel native documentation draft #1212
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
drakirnosslin
requested review from
maxigimenez and
miliberlin
and removed request for
tnolet
There was a problem hiding this comment.
@drakirnosslin can you try to compress these images a bit with something like https://tinypng.com/
There was a problem hiding this comment.
@miliberlin images are now compressed automagically to webp! But it's still good practice to not gobble up unneeded disk space
https://github.com/checkly/docs.checklyhq.com?tab=readme-ov-file#using-images--videos
site/content/docs/CICD/vercel.md
Outdated
| If you are using Vercel to develop, preview, and ship your application, you can natively integrate with Checkly by installing [the official integration](https://vercel.com/integrations/checkly) from the Vercel Marketplace. | ||
|
|
||
| Checkly offers two integration paths: | ||
| - Native integration, **if you don't yet have a Checkly account**. With the native integration, user access and billing is managed through Vercel. If you are new to Vercel's native integrations you can read more about them on the [Vercel documentation page](https://vercel.com/docs/integrations#native-integrations). |
There was a problem hiding this comment.
@drakirnosslin I think this is a bit too oversimplified. You can still create a new account with the connected integration, you can also still use the connected integration without the native one.
Co-authored-by: Michelle Liebheit <[email protected]>
…eckly/docs.checklyhq.com into vercel-managed-integration-v1
WalkthroughThis pull request introduces a new documentation file on managing users and subscription plans via Checkly’s Vercel integration while also updating an existing Vercel integration guide. The new file explains account management, billing, and configuration steps. The updated document clarifies the two integration types (native and connected), reorganizes installation instructions, revises headings and image references, and simplifies the guidance for linking checks. No changes were made to the declarations of exported or public entities. Changes
Suggested reviewers
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
site/content/docs/CICD/vercel-managing-users-and-plan.md (1)
18-18: Punctuation Suggestion for Clarity.
Consider inserting a comma after "Checkly account" to improve readability:"To add a new user to your Checkly account, they need to be a member of your Vercel team."
🧰 Tools
🪛 LanguageTool
[uncategorized] ~18-~18: A comma might be missing here.
Context: ...lan. To add a new user to your Checkly account they need to be a member of your Vercel...(AI_EN_LECTOR_MISSING_PUNCTUATION_COMMA)
site/content/docs/CICD/vercel.md (5)
25-32: Installation Steps for the Native Integration Are Detailed.
The step-by-step instructions are clear and actionable.
- Note: On line 32, the document refers to an "example NextJS project." For consistency with the official branding, consider changing "NextJS" to "Next.js".
- ... example project showcasing how to use Monitoring as Code with a NextJS project. + ... example project showcasing how to use Monitoring as Code with a Next.js project.🧰 Tools
🪛 LanguageTool
[uncategorized] ~32-~32: The official spelling of this programming framework is “Next.js”.
Context: ... with Vercel. You can find the [example NextJS project on GitHub](https://github.com/c...(NODE_JS)
[uncategorized] ~32-~32: The official spelling of this programming framework is “Next.js”.
Context: ...on how to use Monitoring as Code with a NextJS project. ## Installing the connected i...(NODE_JS)
46-52: Managing the Connected Integration Section is Informative.
The section explains how to link new checks or groups succinctly.
- Suggestion: In line 52, consider replacing "are able to specify" with "can specify" for a more concise style.
- ... you are able to specify whether a new preview or production deployment should trigger a new execution. + ... you can specify whether a new preview or production deployment should trigger a new execution.🧰 Tools
🪛 LanguageTool
[style] ~52-~52: As a shorter alternative for ‘able to’, consider using “can”.
Context: ...d the check/group have been linked, you are able to specify whether a new preview or produc...(BE_ABLE_TO)
60-66: Variable Injection Description May Need Alignment.
The text on lines 60–66 mentions that Vercel injects variables "with two variables" but then lists three (ENVIRONMENT_NAME, ENVIRONMENT_URL, DEPLOYMENT_ID). Please verify and update the introductory statement so it accurately reflects the number of injected variables.🧰 Tools
🪛 LanguageTool
[uncategorized] ~62-~62: Loose punctuation mark.
Context: ...th two variables: 1.ENVIRONMENT_NAME: This name ispreviewfor preview depl...(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~63-~63: Loose punctuation mark.
Context: ...uction deployments. 2.ENVIRONMENT_URL: For Preview deployments this is th...(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~64-~64: Loose punctuation mark.
Context: ...roduction URL alias. 3.DEPLOYMENT_ID: The unique deployment ID generated by ...(UNLIKELY_OPENING_PUNCTUATION)
182-186: Skippable Performance Checks Section Could Use a Minor Punctuation Tweak.
On line 185, consider adding a comma after "In 9 out of 10 cases" to improve readability:"In 9 out of 10 cases, this should be the URL for your Preview and Production deployments."
🧰 Tools
🪛 LanguageTool
[uncategorized] ~185-~185: Possible missing comma found.
Context: ... the deployment URL. In 9 out of 10 cases this should be the URL for your Preview...(AI_HYDRA_LEO_MISSING_COMMA)
190-193: Image Alt Text Consideration.
The alt text "cicd triggered check results tab" on line 190 might be revised to a more modern compound style (e.g., "CI/CD-triggered check results tab") for clarity and contemporary style.🧰 Tools
🪛 LanguageTool
[style] ~190-~190: It’s more common nowadays to write this noun as one word.
Context: ...ration have the Vercel logo next to the user name. 
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (6)
site/assets/docs/images/cicd/vercel/vercel_deployment.pngis excluded by!**/*.pngsite/assets/docs/images/cicd/vercel/vercel_deployment_settings.pngis excluded by!**/*.pngsite/assets/docs/images/cicd/vercel/vercel_deployments.pngis excluded by!**/*.pngsite/assets/docs/images/cicd/vercel/vercel_linking_project.pngis excluded by!**/*.pngsite/assets/docs/images/cicd/vercel/vercel_test_sessions.pngis excluded by!**/*.pngsite/assets/docs/images/cicd/vercel/vercel_vitals.pngis excluded by!**/*.png
📒 Files selected for processing (2)
site/content/docs/CICD/vercel-managing-users-and-plan.md(1 hunks)site/content/docs/CICD/vercel.md(5 hunks)
🧰 Additional context used
🪛 LanguageTool
site/content/docs/CICD/vercel-managing-users-and-plan.md
[uncategorized] ~18-~18: A comma might be missing here.
Context: ...lan. To add a new user to your Checkly account they need to be a member of your Vercel...
(AI_EN_LECTOR_MISSING_PUNCTUATION_COMMA)
site/content/docs/CICD/vercel.md
[uncategorized] ~32-~32: The official spelling of this programming framework is “Next.js”.
Context: ... with Vercel. You can find the [example NextJS project on GitHub](https://github.com/c...
(NODE_JS)
[uncategorized] ~32-~32: The official spelling of this programming framework is “Next.js”.
Context: ...on how to use Monitoring as Code with a NextJS project. ## Installing the connected i...
(NODE_JS)
[style] ~52-~52: As a shorter alternative for ‘able to’, consider using “can”.
Context: ...d the check/group have been linked, you are able to specify whether a new preview or produc...
(BE_ABLE_TO)
[uncategorized] ~185-~185: Possible missing comma found.
Context: ... the deployment URL. In 9 out of 10 cases this should be the URL for your Preview...
(AI_HYDRA_LEO_MISSING_COMMA)
[style] ~190-~190: It’s more common nowadays to write this noun as one word.
Context: ...ration have the Vercel logo next to the user name. 
🔇 Additional comments (14)
site/content/docs/CICD/vercel-managing-users-and-plan.md (4)
1-11: Frontmatter is well-structured.
The metadata is complete and follows the consistent YAML format used throughout the docs.
13-13: Introduction Clearly Defines the Integration.
The opening paragraph succinctly explains how the Vercel–Checkly native integration shifts user and plan management to Vercel, and the included links are appropriate.
15-17: User Management Section is Informative.
The "User management" section provides clear guidance on how Checkly users are managed via Vercel, including direction to the pricing page for seat details.
20-27: Usage and Billing Section Provides Comprehensive Guidance.
This section clearly details how to manage plan selection, billing, and invoice retrieval through Vercel.site/content/docs/CICD/vercel.md (10)
1-13: Frontmatter is Consistent and Clear.
The YAML metadata, including title, displayTitle, navigation title, aliases, and menu settings, is well formatted and sets the stage for the content that follows.
15-16: Strong Introduction to the Native Integration.
The opening paragraph provides a clear value proposition for users leveraging Vercel for development, preview, and deployment.
17-21: Integration Options Are Well-Delineated.
The bullet list effectively distinguishes between the native and connected integrations, making it easy for readers to understand the available options.
34-44: Connected Integration Instructions Are Clear.
The steps provided for installing the connected integration guide the user smoothly through the process.
68-72: Browser Checks Section is Clear and Actionable.
The explanation and examples provided for browser checks are well written and guide the user effectively.
73-100: Code Examples Using Playwright are Well Integrated.
The tabs presenting both TypeScript and JavaScript examples make it convenient for users to follow.🧰 Tools
🪛 LanguageTool
[uncategorized] ~73-~73: Possible missing comma found.
Context: ...t we use ourselves to monitor checklyhq.com which is actually also deployed to Verc...(AI_HYDRA_LEO_MISSING_COMMA)
108-117: API Checks Section is Informative.
The section clearly explains how API checks function, including the URL replacement logic and its limitations.🧰 Tools
🪛 LanguageTool
[uncategorized] ~115-~115: Possible missing comma found.
Context: ...i.qis6va2z7.now.sh/v1/customers?page=1 Notice we only replace the host part, not the ...(AI_HYDRA_LEO_MISSING_COMMA)
🪛 markdownlint-cli2 (0.17.2)
112-112: Unordered list style
Expected: dash; Actual: asterisk(MD004, ul-style)
112-112: Bare URL used
null(MD034, no-bare-urls)
113-113: Unordered list style
Expected: dash; Actual: asterisk(MD004, ul-style)
113-113: Bare URL used
null(MD034, no-bare-urls)
114-114: Unordered list style
Expected: dash; Actual: asterisk(MD004, ul-style)
114-114: Bare URL used
null(MD034, no-bare-urls)
120-132: Mapping Checkly to Vercel Checks is Well Articulated.
The detailed explanation of how Checkly checks map to Vercel's check types (Reliability and Performance) is very useful.
136-142: Blocking Deployments Guidance is Detailed.
The steps and the accompanying table help clarify how failures in checks can block deployments, enhancing user understanding.
155-159: Virtual Experience Score (VES) Section is Comprehensive.
The explanation of VES, including its metrics and calculations, provides valuable insight into performance tracking.
Affected Components
Pre-Requisites
npm run lint)Notes for the Reviewer
New Dependency Submission
Screenshots