refactor: update Content Security Policy to allow 'wasm-unsafe-eval' in script-src directive

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chart-view.tsx

@@ -9,6 +9,7 @@ import type { Item } from '@/app/components/base/select'
 import { SimpleSelect } from '@/app/components/base/select'
 import { TIME_PERIOD_MAPPING } from '@/app/components/app/log/filter'
 import { useStore as useAppStore } from '@/app/components/app/store'
+import { sendGAEvent } from '@/utils/gtag'
 
 dayjs.extend(quarterOfYear)
 
@@ -56,6 +57,10 @@ export default function ChartView({ appId, headerRight }: IChartViewProps) {
               className='mt-0 !w-40'
               notClearable={true}
               onSelect={(item) => {
+                sendGAEvent(isWorkflow ? 'filter_workflow_overview_period' : 'filter_chat_conversation_overview_period', {
+                  period: item.value,
+                  period_name: item.name,
+                })
                 const id = item.value
                 const value = TIME_PERIOD_MAPPING[id]?.value ?? '-1'
                 const name = item.name || t('appLog.filter.period.allTime')

web/app/components/app/log/filter.tsx

@@ -11,6 +11,7 @@ import Chip from '@/app/components/base/chip'
 import Input from '@/app/components/base/input'
 import Sort from '@/app/components/base/sort'
 import { fetchAnnotationsCount } from '@/service/log'
+import { sendGAEvent } from '@/utils/gtag'
 dayjs.extend(quarterOfYear)
 
 const today = dayjs()
@@ -47,9 +48,19 @@ const Filter: FC<IFilterProps> = ({ isChatMode, appId, queryParams, setQueryPara
         leftIcon={<RiCalendarLine className='h-4 w-4 text-text-secondary' />}
         value={queryParams.period}
         onSelect={(item) => {
+          sendGAEvent('filter_chat_conversation_period', {
+            period: item.value,
+            period_name: item.name,
+          })
           setQueryParams({ ...queryParams, period: item.value })
         }}
-        onClear={() => setQueryParams({ ...queryParams, period: '9' })}
+        onClear={() => {
+          sendGAEvent('filter_chat_conversation_period', {
+            period: 'reset',
+            period_name: 'reset',
+          })
+          setQueryParams({ ...queryParams, period: '9' })
+        }}
         items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
       />
       <Chip
@@ -58,6 +69,10 @@ const Filter: FC<IFilterProps> = ({ isChatMode, appId, queryParams, setQueryPara
         showLeftIcon={false}
         value={queryParams.annotation_status || 'all'}
         onSelect={(item) => {
+          sendGAEvent('filter_chat_conversation_annotation_status', {
+            annotation_status: item.value,
+            annotation_status_name: item.name,
+          })
           setQueryParams({ ...queryParams, annotation_status: item.value as string })
         }}
         onClear={() => setQueryParams({ ...queryParams, annotation_status: 'all' })}

web/app/components/app/workflow-log/filter.tsx

@@ -8,6 +8,7 @@ import quarterOfYear from 'dayjs/plugin/quarterOfYear'
 import type { QueryParam } from './index'
 import Chip from '@/app/components/base/chip'
 import Input from '@/app/components/base/input'
+import { sendGAEvent } from '@/utils/gtag'
 dayjs.extend(quarterOfYear)
 
 const today = dayjs()
@@ -36,9 +37,19 @@ const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps)
       <Chip
         value={queryParams.status || 'all'}
         onSelect={(item) => {
+          sendGAEvent('filter_workflow_status', {
+            status: item.value,
+            status_name: item.name,
+          })
           setQueryParams({ ...queryParams, status: item.value as string })
         }}
-        onClear={() => setQueryParams({ ...queryParams, status: 'all' })}
+        onClear={() => {
+          sendGAEvent('filter_workflow_status_clear', {
+            status: 'reset',
+            status_name: 'reset',
+          })
+          setQueryParams({ ...queryParams, status: 'all' })
+        }}
         items={[{ value: 'all', name: 'All' },
           { value: 'succeeded', name: 'Success' },
           { value: 'failed', name: 'Fail' },
@@ -52,6 +63,10 @@ const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps)
         leftIcon={<RiCalendarLine className='h-4 w-4 text-text-secondary' />}
         value={queryParams.period}
         onSelect={(item) => {
+          sendGAEvent('filter_workflow_period', {
+            period: item.value,
+            period_name: item.name,
+          })
           setQueryParams({ ...queryParams, period: item.value })
         }}
         onClear={() => setQueryParams({ ...queryParams, period: '9' })}

web/app/components/base/ga/index.tsx

@@ -18,43 +18,54 @@ export type IGAProps = {
   gaType: GaType
 }
 
+const extractNonceFromCSP = (cspHeader: string | null): string | undefined => {
+  if (!cspHeader)
+    return undefined
+  const nonceMatch = cspHeader.match(/'nonce-([^']+)'/)
+  return nonceMatch ? nonceMatch[1] : undefined
+}
+
 const GA: FC<IGAProps> = ({
   gaType,
 }) => {
   if (IS_CE_EDITION)
     return null
 
-  const nonce = process.env.NODE_ENV === 'production' ? (headers() as unknown as UnsafeUnwrappedHeaders).get('x-nonce') ?? '' : ''
+  const cspHeader = process.env.NODE_ENV === 'production'
+    ? (headers() as unknown as UnsafeUnwrappedHeaders).get('content-security-policy')
+    : null
+  const nonce = extractNonceFromCSP(cspHeader)
 
   return (
     <>
-      <Script
-        strategy="beforeInteractive"
-        async
-        src={`https://www.googletagmanager.com/gtag/js?id=${gaIdMaps[gaType]}`}
-        nonce={nonce ?? undefined}
-      ></Script>
+      {/* Initialize dataLayer first */}
       <Script
         id="ga-init"
+        strategy="afterInteractive"
         dangerouslySetInnerHTML={{
           __html: `
-window.dataLayer = window.dataLayer || [];
-function gtag(){dataLayer.push(arguments);}
-gtag('js', new Date());
-gtag('config', '${gaIdMaps[gaType]}');
+            window.dataLayer = window.dataLayer || [];
+            window.gtag = function gtag(){window.dataLayer.push(arguments);};
+            window.gtag('js', new Date());
+            window.gtag('config', '${gaIdMaps[gaType]}');
           `,
         }}
-        nonce={nonce ?? undefined}
-      >
-      </Script>
+        nonce={nonce}
+      />
+      {/* Load GA script */}
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${gaIdMaps[gaType]}`}
+        nonce={nonce}
+      />
       {/* Cookie banner */}
       <Script
         id="cookieyes"
+        strategy="lazyOnload"
         src='https://cdn-cookieyes.com/client_data/2a645945fcae53f8e025a2b1/script.js'
-        nonce={nonce ?? undefined}
-      ></Script>
+        nonce={nonce}
+      />
     </>
-
   )
 }
 export default React.memo(GA)

web/app/components/billing/upgrade-btn/index.tsx

@@ -6,6 +6,7 @@ import PremiumBadge from '../../base/premium-badge'
 import Button from '@/app/components/base/button'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import { useModalContext } from '@/context/modal-context'
+import { sendGAEvent } from '@/utils/gtag'
 
 type Props = {
   className?: string
@@ -33,8 +34,8 @@ const UpgradeBtn: FC<Props> = ({
   }
   const onClick = () => {
     handleClick()
-    if (loc && (window as any).gtag) {
-      (window as any).gtag('event', 'click_upgrade_btn', {
+    if (loc) {
+      sendGAEvent('click_upgrade_btn', {
         loc,
       })
     }

web/global.d.ts

@@ -12,4 +12,23 @@ declare module '*.mdx' {
   export default MDXComponent
 }
 
-export {}
+// Google Analytics gtag types
+type GtagEventParams = {
+  [key: string]: any
+}
+
+type Gtag = {
+  (command: 'config', targetId: string, config?: GtagEventParams): void
+  (command: 'event', eventName: string, eventParams?: GtagEventParams): void
+  (command: 'js', date: Date): void
+  (command: 'set', config: GtagEventParams): void
+}
+
+declare global {
+  interface Window {
+    gtag?: Gtag
+    dataLayer?: any[]
+  }
+}
+
+import './types/i18n'

web/middleware.ts

@@ -33,7 +33,7 @@ export function middleware(request: NextRequest) {
   const cspHeader = `
     default-src 'self' ${scheme_source} ${csp} ${whiteList};
     connect-src 'self' ${scheme_source} ${csp} ${whiteList};
-    script-src 'self' ${scheme_source} ${csp} ${whiteList};
+    script-src 'self' 'wasm-unsafe-eval' ${scheme_source} ${csp} ${whiteList};
     style-src 'self' 'unsafe-inline' ${scheme_source} ${whiteList};
     worker-src 'self' ${scheme_source} ${csp} ${whiteList};
     media-src 'self' ${scheme_source} ${csp} ${whiteList};

web/utils/gtag.ts

@@ -0,0 +1,26 @@
+/**
+ * Google Analytics event tracking utility function
+ * Wraps gtag calls and automatically handles the case where gtag is not available
+ */
+
+type GtagEventParams = {
+  [key: string]: any
+}
+
+/**
+ * Send Google Analytics event
+ * @param eventName - event name
+ * @param eventParams - event params
+ * @example
+ * sendGAEvent('filter_workflow_status', {
+ *   status: 'succeeded',
+ *   status_name: 'Success'
+ * })
+ */
+export const sendGAEvent = (
+  eventName: string,
+  eventParams?: GtagEventParams,
+): void => {
+  if (typeof window !== 'undefined' && window.gtag)
+    window.gtag('event', eventName, eventParams)
+}