Skip to content

Changelog

Changelog

Follow us on X to hear about the changes first!
Cover for Observe your feature flags with the Vercel DX platformCover for Observe your feature flags with the Vercel DX platform

Observe your feature flags with the Vercel DX platform

The Vercel DX Platform now has a deep understanding of the feature flags you use and create in third-party providers. This beta integration provides better insights into your applications and streamlines your development workflow.

  • Web Analytics integration: Break down page views and custom events by feature flags in Web Analytics, gaining granular insights into user interactions.
  • Enhanced Log visibility: The platform now displays feature flags in logs, making it easier to understand the conditions under which errors occur.
  • reportValue: Reports an evaluated feature flag from the server for runtime logs and Custom Analytics Events (server-side).
  • <FlagValues />: Surfaces a feature flags value on the client for usage in Analytics.

These features have universal compatibility with any feature flag provider you're already using, like LaunchDarkly, Statsig, or Split, or custom setups.

This update lets users on all plans leverage existing feature flag workflows within the Vercel platform and ship safely with more confidence.

Check out the documentation to learn more.

Declaring feature flags in code

We’re introducing a new approach for working with feature flags. This approach allows declaring feature flags in code and calling them as functions. Flags implemented using this pattern can automatically respect overrides set by the Vercel Toolbar, and integrate with our Developer Experience Platform features like Web Analytics and Runtime Logs.

import { unstable_flag as flag } from "@vercel/flags/next"
const showSummerSale = flag({
key: "summer-sale",
decide: async () => false
})
Declaring a feature flag

The pattern avoids common pitfalls of client-side feature flag and experimentation usage, such as flashing the wrong experiment, loading spinners, layout shift, and jank. It works with any feature flag provider and even custom setups.

export const showSummerSale = flag<boolean>({
key: 'summer-sale',
async decide() {
return getLaunchDarklyClient().variation(this.key, false);
},
});
Using a feature flag

The pattern further allows for optionally precomputing certain feature flags in Middleware. Middleware can then route visitors to statically generated pages tailored to their specific combination of feature flags and experiments.

This even works when multiple flags are present on the page, which typically suffers from combinatory explosion. Precomputing is great for experimentation on marketing pages as it allows keeping them completely static with ultra-low TTFB, no layout shift, and no flashing of the wrong experiment.

We have implemented this new feature flags design pattern for Next.js in @vercel/flags/next, and we are releasing an implementation for SvelteKit soon.

Check out our documentation to learn more.

Cover for Use the Vercel Toolbar in Production with the Chrome Extension or the toolbar menuCover for Use the Vercel Toolbar in Production with the Chrome Extension or the toolbar menu

Use the Vercel Toolbar in Production with the Chrome Extension or the toolbar menu

You can now get the toolbar in your production environment without any configuration by installing the Vercel Chrome Extension and ensuring that you are signed in to your team on Vercel.com. You can also enable the toolbar for your production domains by selecting Enable Vercel Toolbar in Production in the toolbar menu and choosing the domain you'd like to enable it on. For more advanced usage, it is still possible to use the toolbar's npm package.

This allows you and your team to use all the features of the Vercel Toolbar, like comments, flags, and tools like accessibility audit and interaction timing, in production.

Learn more about the features of the toolbar and adding it to your environments in the documentation.

Cover for Protect against OWASP risks with the Vercel FirewallCover for Protect against OWASP risks with the Vercel Firewall

Protect against OWASP risks with the Vercel Firewall

Enterprise customers can now protect against the top OWASP risks.

The Vercel Firewall protects against the OWASP Core Ruleset for Enterprise, which enables Vercel to log, block, or challenge traffic against these rules.

In addition to new custom rules, customers can also ensure they remain protected against the biggest risks for web applications with new OWASP Top 10 protection. For example, this ruleset includes automatic protection against SQL injection attacks.

Contact sales to see a demo and learn more.

Cover for Block, rate limit, and challenge traffic with the Vercel FirewallCover for Block, rate limit, and challenge traffic with the Vercel Firewall

Block, rate limit, and challenge traffic with the Vercel Firewall

The Vercel Firewall now allows you to create custom rules to log, block, challenge, or rate limit (beta) traffic. The Firewall is available on all plans for free.

You can define custom rules to handle incoming traffic:

  • Rules can be based on 15+ fields including request path, user agent, IP address, JA4 fingerprint, geolocation, HTTP headers, and even target path.
  • Firewall configuration changes propagate within 300ms globally. If you make a mistake, you can instantly rollback to previous rules.

You can now see requests automatically protected by the Firewall, as well as managed custom rules for the WAF. You can also access managed rulesets, included our first ruleset available for Enterprise to mitigate the OWASP core risks.

Learn more about the WAF and available configuration options. Contact us if you want to try our private beta for rate limiting.

Cover for Uncover accessibility issues on your deployments from the Vercel ToolbarCover for Uncover accessibility issues on your deployments from the Vercel Toolbar

Uncover accessibility issues on your deployments from the Vercel Toolbar

Accessibility Audit now runs in the background for you everywhere you have the Vercel Toolbar. You can view the compliance of Web Content Accessibility Guidelines 2.1 level A and AA rules for the page you are on from the toolbar menu. The rules will show grouped by impact as defined by deque axe.

You can also turn on recording to keep track of issues that turn up as you move around a page. This feature is available to all Vercel users.

See the Accessibility Audit documentation to learn more.

Cover for Understand Interaction to Next Paint (INP) with the Vercel ToolbarCover for Understand Interaction to Next Paint (INP) with the Vercel Toolbar

Understand Interaction to Next Paint (INP) with the Vercel Toolbar

The Vercel Toolbar now helps you investigate your site's Interaction to Next Paint (INP).

This new Core Web Vital, which impacts Google search ranking as of March 2024, is now available in the toolbar menu under Interaction Timing. As you interact with your site, this tool measures input delay, processing times, and rendering delay and allows you to inspect in detail how these are affecting each interaction's latency.

This tool can also notify you as you navigate your site of any interactions that take more than 200ms, the upper limit for a good INP score. These toasts can be configured in Preferences under the toolbar menu.

Learn more about the Vercel Toolbar and INP.

Cover for OPTIONS AllowlistCover for OPTIONS Allowlist

OPTIONS Allowlist

The OPTIONS Allowlist improves the security of deployments on Vercel by limiting CORS preflight OPTIONS requests to specified paths.

Before the OPTIONS Allowlist, all OPTIONS requests to deployments bypassed Deployment Protection in compliance with CORS specifications.

The new OPTIONS Allowlist feature is available on all plans.

Learn more about the OPTIONS Allowlist.

Cover for Inspect Open Graph data with the Vercel ToolbarCover for Inspect Open Graph data with the Vercel Toolbar

Inspect Open Graph data with the Vercel Toolbar

The Vercel Toolbar can now show a preview of how the page will look shared on social media.

After selecting "Open Graph" from the toolbar menu, you can see how your images and metadata will display on X, Slack, Facebook, and LinkedIn. The toolbar also provides information if any metadata is missing on your page, which could affect the display of social cards.

Learn more about the Vercel Toolbar.

Cover for Aggregate and visualize traffic data with MonitoringCover for Aggregate and visualize traffic data with Monitoring

Aggregate and visualize traffic data with Monitoring

You can now select an aggregation when analyzing data in Vercel Monitoring. This change provides more visibility to make it easier to analyze your application.

The following new aggregations are now available, in addition to sums and counts.

  • Average values
  • Per second sums and counts
  • Minimum and maximum values
  • 75th, 90th, 95th and 99th percentiles
  • Percentages of the overall values

These aggregations can be used with any visualize setting, for analyzing data transfer, function duration, function execution, and request counts. Enterprise customers can also access data with a five minute granularity when viewing 24 hours of data or less.

Learn more in our documentation about Monitoring.

Cover for Observe your feature flags with the Vercel DX platformCover for Observe your feature flags with the Vercel DX platform

The Vercel DX Platform now has a deep understanding of the feature flags you use and create in third-party providers. This beta integration provides better insights into your applications and streamlines your development workflow.

  • Web Analytics integration: Break down page views and custom events by feature flags in Web Analytics, gaining granular insights into user interactions.
  • Enhanced Log visibility: The platform now displays feature flags in logs, making it easier to understand the conditions under which errors occur.
  • reportValue: Reports an evaluated feature flag from the server for runtime logs and Custom Analytics Events (server-side).
  • <FlagValues />: Surfaces a feature flags value on the client for usage in Analytics.

These features have universal compatibility with any feature flag provider you're already using, like LaunchDarkly, Statsig, or Split, or custom setups.

This update lets users on all plans leverage existing feature flag workflows within the Vercel platform and ship safely with more confidence.

Check out the documentation to learn more.

We’re introducing a new approach for working with feature flags. This approach allows declaring feature flags in code and calling them as functions. Flags implemented using this pattern can automatically respect overrides set by the Vercel Toolbar, and integrate with our Developer Experience Platform features like Web Analytics and Runtime Logs.

import { unstable_flag as flag } from "@vercel/flags/next"
const showSummerSale = flag({
key: "summer-sale",
decide: async () => false
})
Declaring a feature flag

The pattern avoids common pitfalls of client-side feature flag and experimentation usage, such as flashing the wrong experiment, loading spinners, layout shift, and jank. It works with any feature flag provider and even custom setups.

export const showSummerSale = flag<boolean>({
key: 'summer-sale',
async decide() {
return getLaunchDarklyClient().variation(this.key, false);
},
});
Using a feature flag

The pattern further allows for optionally precomputing certain feature flags in Middleware. Middleware can then route visitors to statically generated pages tailored to their specific combination of feature flags and experiments.

This even works when multiple flags are present on the page, which typically suffers from combinatory explosion. Precomputing is great for experimentation on marketing pages as it allows keeping them completely static with ultra-low TTFB, no layout shift, and no flashing of the wrong experiment.

We have implemented this new feature flags design pattern for Next.js in @vercel/flags/next, and we are releasing an implementation for SvelteKit soon.

Check out our documentation to learn more.

Cover for Use the Vercel Toolbar in Production with the Chrome Extension or the toolbar menuCover for Use the Vercel Toolbar in Production with the Chrome Extension or the toolbar menu

You can now get the toolbar in your production environment without any configuration by installing the Vercel Chrome Extension and ensuring that you are signed in to your team on Vercel.com. You can also enable the toolbar for your production domains by selecting Enable Vercel Toolbar in Production in the toolbar menu and choosing the domain you'd like to enable it on. For more advanced usage, it is still possible to use the toolbar's npm package.

This allows you and your team to use all the features of the Vercel Toolbar, like comments, flags, and tools like accessibility audit and interaction timing, in production.

Learn more about the features of the toolbar and adding it to your environments in the documentation.

Cover for Protect against OWASP risks with the Vercel FirewallCover for Protect against OWASP risks with the Vercel Firewall

Enterprise customers can now protect against the top OWASP risks.

The Vercel Firewall protects against the OWASP Core Ruleset for Enterprise, which enables Vercel to log, block, or challenge traffic against these rules.

In addition to new custom rules, customers can also ensure they remain protected against the biggest risks for web applications with new OWASP Top 10 protection. For example, this ruleset includes automatic protection against SQL injection attacks.

Contact sales to see a demo and learn more.

Cover for Block, rate limit, and challenge traffic with the Vercel FirewallCover for Block, rate limit, and challenge traffic with the Vercel Firewall

The Vercel Firewall now allows you to create custom rules to log, block, challenge, or rate limit (beta) traffic. The Firewall is available on all plans for free.

You can define custom rules to handle incoming traffic:

  • Rules can be based on 15+ fields including request path, user agent, IP address, JA4 fingerprint, geolocation, HTTP headers, and even target path.
  • Firewall configuration changes propagate within 300ms globally. If you make a mistake, you can instantly rollback to previous rules.

You can now see requests automatically protected by the Firewall, as well as managed custom rules for the WAF. You can also access managed rulesets, included our first ruleset available for Enterprise to mitigate the OWASP core risks.

Learn more about the WAF and available configuration options. Contact us if you want to try our private beta for rate limiting.

Cover for Uncover accessibility issues on your deployments from the Vercel ToolbarCover for Uncover accessibility issues on your deployments from the Vercel Toolbar

Accessibility Audit now runs in the background for you everywhere you have the Vercel Toolbar. You can view the compliance of Web Content Accessibility Guidelines 2.1 level A and AA rules for the page you are on from the toolbar menu. The rules will show grouped by impact as defined by deque axe.

You can also turn on recording to keep track of issues that turn up as you move around a page. This feature is available to all Vercel users.

See the Accessibility Audit documentation to learn more.

Cover for Understand Interaction to Next Paint (INP) with the Vercel ToolbarCover for Understand Interaction to Next Paint (INP) with the Vercel Toolbar

The Vercel Toolbar now helps you investigate your site's Interaction to Next Paint (INP).

This new Core Web Vital, which impacts Google search ranking as of March 2024, is now available in the toolbar menu under Interaction Timing. As you interact with your site, this tool measures input delay, processing times, and rendering delay and allows you to inspect in detail how these are affecting each interaction's latency.

This tool can also notify you as you navigate your site of any interactions that take more than 200ms, the upper limit for a good INP score. These toasts can be configured in Preferences under the toolbar menu.

Learn more about the Vercel Toolbar and INP.

Cover for OPTIONS AllowlistCover for OPTIONS Allowlist

The OPTIONS Allowlist improves the security of deployments on Vercel by limiting CORS preflight OPTIONS requests to specified paths.

Before the OPTIONS Allowlist, all OPTIONS requests to deployments bypassed Deployment Protection in compliance with CORS specifications.

The new OPTIONS Allowlist feature is available on all plans.

Learn more about the OPTIONS Allowlist.

Cover for Inspect Open Graph data with the Vercel ToolbarCover for Inspect Open Graph data with the Vercel Toolbar

The Vercel Toolbar can now show a preview of how the page will look shared on social media.

After selecting "Open Graph" from the toolbar menu, you can see how your images and metadata will display on X, Slack, Facebook, and LinkedIn. The toolbar also provides information if any metadata is missing on your page, which could affect the display of social cards.

Learn more about the Vercel Toolbar.

Cover for Aggregate and visualize traffic data with MonitoringCover for Aggregate and visualize traffic data with Monitoring

You can now select an aggregation when analyzing data in Vercel Monitoring. This change provides more visibility to make it easier to analyze your application.

The following new aggregations are now available, in addition to sums and counts.

  • Average values
  • Per second sums and counts
  • Minimum and maximum values
  • 75th, 90th, 95th and 99th percentiles
  • Percentages of the overall values

These aggregations can be used with any visualize setting, for analyzing data transfer, function duration, function execution, and request counts. Enterprise customers can also access data with a five minute granularity when viewing 24 hours of data or less.

Learn more in our documentation about Monitoring.