diff --git a/apps/api/src/app.module.ts b/apps/api/src/app.module.ts
index 97bcabc..cc98d4e 100644
--- a/apps/api/src/app.module.ts
+++ b/apps/api/src/app.module.ts
@@ -140,6 +140,8 @@ export class AppModule implements NestModule {
         .exclude(
           { path: 'health', method: RequestMethod.GET },
           { path: 'health/(.*)', method: RequestMethod.GET },
+          { path: 'api/v1/web-vitals', method: RequestMethod.POST }, // sendBeacon cannot send CSRF headers
+          { path: 'web-vitals', method: RequestMethod.POST }, // middleware exclude uses controller-relative path
         )
         .forRoutes('*');
     }
diff --git a/apps/api/src/modules/shared/shared.module.ts b/apps/api/src/modules/shared/shared.module.ts
index 59eb88a..3888891 100644
--- a/apps/api/src/modules/shared/shared.module.ts
+++ b/apps/api/src/modules/shared/shared.module.ts
@@ -72,6 +72,8 @@ export class SharedModule implements NestModule {
           { path: 'auth/refresh', method: RequestMethod.POST },
           { path: 'auth/exchange-token', method: RequestMethod.POST },
           { path: 'auth/logout', method: RequestMethod.POST },
+          { path: 'api/v1/web-vitals', method: RequestMethod.POST }, // sendBeacon cannot send CSRF headers
+          { path: 'web-vitals', method: RequestMethod.POST }, // middleware exclude uses controller-relative path
         )
         .forRoutes('*');
     }
diff --git a/apps/web/app/[locale]/(public)/page.tsx b/apps/web/app/[locale]/(public)/page.tsx
index e35a8ec..d9a5b7d 100644
--- a/apps/web/app/[locale]/(public)/page.tsx
+++ b/apps/web/app/[locale]/(public)/page.tsx
@@ -139,7 +139,7 @@ function KpiStrip({ city }: { city: string }) {
       <KpiCard
         label="GGI HCM"
         value={data ? formatPriceM2(data.avgPricePerM2) : '—'}
-        delta={data?.priceChangePct.d7}
+        delta={data?.priceChangePct?.d7}
         footnote="Chỉ số giá TB/m²"
         icon={<BarChart3 className="h-3.5 w-3.5" />}
         loading={isLoading}
@@ -147,7 +147,7 @@ function KpiStrip({ city }: { city: string }) {
       <KpiCard
         label="Giá TB"
         value={data ? formatVnd(data.avgPrice) : '—'}
-        delta={data?.priceChangePct.d30}
+        delta={data?.priceChangePct?.d30}
         footnote="Toàn thành phố"
         icon={<Building2 className="h-3.5 w-3.5" />}
         loading={isLoading}
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 0c2190e..b240220 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -43,7 +43,7 @@ const nextConfig = {
               "style-src 'self' 'unsafe-inline' https://api.mapbox.com",
               "img-src 'self' data: blob: https://*.mapbox.com https://*.tiles.mapbox.com https:",
               "font-src 'self' data:",
-              `connect-src 'self' https://*.mapbox.com https://api.mapbox.com https://events.mapbox.com https://api.goodgo.vn${process.env.NODE_ENV !== 'production' ? ' http://localhost:3001 http://localhost:3011 http://localhost:9000' : ''}`,
+              `connect-src 'self' https://*.mapbox.com https://api.mapbox.com https://events.mapbox.com https://api.goodgo.vn${process.env.NODE_ENV !== 'production' ? ' http://localhost:3001 http://localhost:3011 http://localhost:9000 ws://localhost:3001 ws://localhost:3011' : ''}`,
               "worker-src 'self' blob:",
               "child-src 'self' blob:",
               "frame-ancestors 'none'",