Sentry

Webflow handles design, hosting, and content management well. What it does not include is built-in error detection for client-side JavaScript. When a checkout form fails silently, a third-party script throws an exception, or a Webflow interaction breaks on a specific browser, there is no native way to know it happened. You find out when a user complains or when conversion rates drop without explanation.

Sentry captures JavaScript exceptions, records user sessions as replayable videos, and tracks Core Web Vitals like LCP, INP, and CLS on your published pages. Connect Sentry and Webflow, and you get visibility into what breaks on your live site, the exact browser, OS, and page URL where each error occurred, without manually reproducing the issue. This integration is most useful for Webflow Commerce store owners, agencies managing multiple client sites, marketing teams running high-traffic landing pages, and developers who need to know when something breaks before users report it.

How to integrate Sentry with Webflow

What is Sentry? Sentry is an application monitoring platform focused on error detection and debugging. It captures JavaScript exceptions, records session replays of user interactions, and tracks performance metrics across browser-based applications. Its JavaScript Browser SDK installs with a single <script> tag and runs on any published Webflow page.

Engineering and marketing teams add Sentry to Webflow when they need visibility beyond what the browser console provides — specifically when they want to catch errors on specific browsers and devices, replay the exact sequence of user actions before a failure, or track performance signals like Core Web Vitals that affect search rankings and conversion rates.

The Sentry-Webflow integration supports three approaches:

• Custom code injection covers adding the Sentry SDK to your Webflow site using site-level head code, page-level code, or Code Embed elements.  
• Automation platforms like Make, n8n, and viaSocket connect Sentry events to Webflow CMS actions without writing backend code.  
• The Webflow and Sentry APIs enable custom integrations like syncing Sentry issues to CMS collections, building status pages, and creating live error dashboards.

Most sites start with custom code injection for error monitoring, then add automation or API integrations as needs grow.

Add Sentry to Webflow with custom code

The most direct way to connect Sentry to a Webflow site is adding the Sentry JavaScript SDK as a script tag in your custom code in the head or body tags. This works on any paid Webflow site plan and takes under five minutes. The SDK runs as a non-blocking, asynchronous listener that captures JavaScript errors, traces performance, and records session replays. Install it site-wide through head code or target specific pages through page-level code.

Two SDK installation options cover most use cases:

• The Sentry Loader Script auto-updates to the latest SDK version and lazy-loads to reduce page weight.  
• The Sentry CDN Bundle pins a specific SDK version and gives you control over which features to include.

Install the Sentry Loader Script in site head code

The Loader Script is the simplest setup for most Webflow sites. It auto-updates, lazy-loads the full SDK only when an error occurs, and pre-embeds your DSN in the script URL. In Sentry, go to Settings > Projects > your project > SDK Setup > Loader Script, enable the features you want, and copy the generated script tag.

In Webflow, go to Site Settings > Custom Code > Head Code and paste the script as the first script in that section. Add a configuration block before the loader script to set your sample rates:

<script>
 window.sentryOnLoad = function () {
   Sentry.init({
     tracesSampleRate: 0.1,
     environment: "production"
   });
 };
</script>
<script
 src="https://js.sentry-cdn.com/YOUR_PUBLIC_KEY.min.js"
 crossorigin="anonymous"
></script>



Sentry may default to sampling traces at 100% unless configured. On production sites with real traffic, set tracesSampleRate to a lower value like 0.1 to avoid consuming your span quota rapidly. The Loader Script only runs on the published site — it will not appear in the Webflow canvas. Full setup details are in the Sentry CDN installation docs.

Install a Sentry CDN bundle for version control

Use a CDN bundle when you need a pinned SDK version or want to control exactly which features load. Sentry provides pre-built bundles ranging from errors-only to a full package with errors, tracing, replay, and user feedback:

• bundle.min.js captures errors only and is the smallest bundle  
• bundle.tracing.min.js adds performance tracing  
• bundle.tracing.replay.min.js adds session replay on top of tracing  
• bundle.tracing.replay.feedback.min.js includes all features plus user feedback collection

Paste both the script tag and the Sentry.init() block into Site Settings > Custom Code > Head Code:

<script
 src="https://browser.sentry-cdn.com/10.46.0/bundle.tracing.min.js"
 integrity="sha384-cROOgfWH+Z5eH/nXXDAyCzRLVWWi2IAUKuXQHXIDDyGneF/GN+34qpDKat0zR5fj"
 crossorigin="anonymous"
></script>
<script>
 Sentry.init({
   dsn: "https://YOUR_PUBLIC_KEY@oXXXXXX.ingest.sentry.io/XXXXXXX",
   release: "my-site@1.0.0",
   tracesSampleRate: 0.1,
   integrations: [
     Sentry.browserTracingIntegration(),
   ],
 });
</script>



Find your DSN in Sentry under Settings > Projects > your project > Client Keys (DSN). Place the script in the head rather than the footer — head placement captures errors from page load onward, while footer placement misses errors during initial rendering.

Add Sentry to specific pages or components

To monitor only high-value pages like checkout or contact forms, use page-level custom code instead of site-wide injection. In Webflow, open the Pages panel, hover over the target page, click the gear icon, and paste the Sentry script in Custom Code > Head Code. This applies the same code as the site-wide methods but scopes it to that page only.

To place Sentry within a specific section or on a Webflow CMS template page, use a Code Embed element. Drag a Code Embed onto the canvas and paste the Sentry code. Because Code Embed renders in the <body> rather than the <head>, Sentry initializes later in the page lifecycle and may not capture errors during initial page load.

Manage Sentry through Google Tag Manager

If you already use Google Tag Manager for analytics, add Sentry as a Custom HTML tag instead of managing it in Webflow custom code. This lets you update Sentry configuration in GTM without republishing your Webflow site. Add the GTM container snippet to Site Settings > Custom Code > Head Code, then create a new Custom HTML tag in GTM containing the Sentry Loader Script and configuration block. Set the trigger to All Pages and publish the GTM container.

Test your Sentry setup

After publishing, verify the integration by placing a Code Embed element on any published page with this code:

<script>
 function triggerError() {
   throw new Error("Sentry Test Error");
 }
</script>
<button onclick="triggerError()">Test Sentry</button>



Click the button on the live published page and check your Sentry dashboard. Errors triggered from the browser developer console are sandboxed and will not reach Sentry — you must test on the published page.

Connect Sentry and Webflow with Make, n8n, or viaSocket

Automation platforms let you route Sentry data into Webflow or trigger Sentry actions from Webflow events without writing backend code. Make, n8n, and viaSocket all support both Sentry and Webflow integrations, with modules for each that let you sync error data to Webflow CMS collections, create Sentry projects from Webflow events, or log resolved issues automatically.

Make connects Sentry's issue monitoring to Webflow CMS write actions through dozens of modules for each platform. When Sentry creates a new issue, a Make scenario can automatically create a CMS item in an error log collection. When an issue is resolved, another scenario updates the item's status field. Common patterns include routing new Sentry issues into a Webflow error log collection, using Sentry's Get Issue operation to enrich triage records, and triggering a Sentry project creation when a Webflow site publishes.

n8n provides comprehensive Sentry operations for developers building automation workflows. The Sentry node supports Get, Get All, Create, Update, and Delete across events, issues, projects, releases, organizations, and teams. Combined with Webflow triggers and CMS actions, you can build workflows like scheduled error digests that pull all unresolved Sentry issues into a Webflow collection, or release tracking that logs each Webflow publish as a Sentry release. n8n is self-hostable, making it a good fit for developers who want full control over their automation infrastructure.

viaSocket has a dedicated Webflow and Sentry integration page with pre-built templates and custom field mapping. It supports Webflow triggers including form submission, order creation, site published, and CMS item changes. A workflow that creates a Sentry project when a new Webflow order is placed, for example, is achievable with the available triggers and actions. For non-technical teams, viaSocket is one of the fastest ways to test a Webflow-to-Sentry workflow before investing in a custom build.

Build with the Webflow and Sentry APIs

Direct integration using the Webflow API and Sentry's APIs lets you build real-time error syncing to Webflow CMS, status page generation, and custom dashboards backed by CMS data. This path requires server-side development, typically a serverless function on Vercel, Netlify, or Cloudflare Workers acting as a proxy layer. Never expose Sentry auth tokens in Webflow front-end code.

Sync Sentry issues to Webflow CMS with webhooks

Sentry webhooks deliver HTTP POST requests when issues are created, resolved, assigned, or archived. Point these webhooks at a serverless function to automatically create and update CMS items in a Webflow error log collection, giving your team a CMS-powered view of production errors.

Set up a Sentry Internal Integration under Settings > Developer Settings > New Internal Integration. Enter your serverless function URL as the Webhook URL, subscribe to the issue resource type, and copy the Client Secret for signature verification. The Sentry webhooks documentation covers the full payload structure.

Your serverless function should verify the Sentry-Hook-Signature header using HMAC-SHA256 and return 200 OK immediately. For created actions, write a new CMS item using the Webflow CMS Items API. For resolved or archived actions, update the existing item's status field. Persist a mapping between Sentry issue IDs and Webflow item IDs using a key-value store. Refer to the Webflow Data API reference for current CMS item endpoint paths — these are subject to change as the API evolves.

A recommended CMS collection schema includes fields for name (issue title), status (option: Unresolved/Resolved/Archived), Sentry issue ID (plain text), Sentry URL (link), first seen (date/time), and level (option: error/warning/info). Items created via the Webflow API default to draft status and require a separate publish step to go live.

Build a status page with Sentry alert webhooks

Sentry alert webhooks fire when error rates spike or metric thresholds are crossed. Route these to a Webflow incidents collection to generate a public-facing status page. Subscribe to event_alert and metric_alert webhook resources in your Sentry Internal Integration settings and enable the "Alert Rule Action" toggle so your integration appears in Sentry's alert rule editor.

event_alert fires when an issue alert rule matches. metric_alert fires when metric thresholds are crossed and includes resolved states, making it better suited for status pages that need to surface recovery. This webhook pattern is a better fit for real-time incident publishing than constant API polling.

Fetch Sentry data for a Webflow dashboard

For read-only dashboards, poll Sentry's performance APIs on a schedule and write results to Webflow CMS. Fetch unresolved issue counts, performance metrics, and project health stats, then update a CMS collection to display current values on a Webflow page. Use a collection with fields for unresolved count (number), resolved count (number), last updated (date/time), and project name (plain text), and bind these fields to elements on a Webflow page. For real-time data, use Sentry webhooks instead of polling — reserve polling for periodic summary dashboards where a few minutes of delay is acceptable.

What you can build with the Sentry Webflow integration

Integrating Sentry with Webflow lets you monitor production errors, replay user sessions, and track site performance without building a custom monitoring backend.

• Ecommerce checkout error detection: Capture JavaScript errors during Webflow Commerce checkout flows with full browser context, so payment script failures and broken product grids surface in Sentry before users report them.  
• CMS-powered error log for agency clients: Sync Sentry issues to a Webflow CMS collection using webhooks or Make, then build a protected page displaying error titles, severity levels, and resolution status for clients who need site health visibility without Sentry access.  
• Session replay for landing page debugging: Enable Sentry Session Replay on high-traffic campaign pages to watch video-like reproductions of user interactions — including rage clicks, dead clicks, and the sequence of actions before an error — without reproducing issues manually.  
• Core Web Vitals monitoring dashboard: Track LCP, INP, CLS, FCP, and TTFB on your Webflow site using Sentry's real user monitoring, write performance stats to a CMS collection on a schedule, and display current values on a dashboard page to monitor search ranking signals over time.

For sites that need more than basic error monitoring, the Sentry API and Webflow CMS API together support custom incident feeds, release tracking, and automated triage workflows.