diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/long-time-range-picker.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/long-time-range-picker.tsx
index 002f8f3bf16..94980d36f97 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/long-time-range-picker.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/long-time-range-picker.tsx
@@ -13,11 +13,11 @@ type TimePeriodOption = {
   name: string
 }
 
-type Props = {
+type Props = Readonly<{
   periodMapping: { [key: string]: { value: number, name: TimePeriodName } }
   onSelect: (payload: PeriodParams) => void
   queryDateFormat: string
-}
+}>
 
 const today = dayjs()
 
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
index dbc429cbdc6..2e59c09bce1 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
@@ -12,12 +12,12 @@ import Picker from '@/app/components/base/date-and-time-picker/date-picker'
 import { useLocale } from '@/context/i18n'
 import { formatToLocalTime } from '@/utils/format'
 
-type Props = {
+type Props = Readonly<{
   start: Dayjs
   end: Dayjs
   onStartChange: (date?: Dayjs) => void
   onEndChange: (date?: Dayjs) => void
-}
+}>
 
 const today = dayjs()
 const DatePicker: FC<Props> = ({
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/index.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/index.tsx
index 53794ad8dba..8491f01e8af 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/index.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/index.tsx
@@ -16,11 +16,11 @@ const today = dayjs()
 
 type TimePeriodName = I18nKeysByPrefix<'appLog', 'filter.period.'>
 
-type Props = {
+type Props = Readonly<{
   ranges: { value: number, name: TimePeriodName }[]
   onSelect: (payload: PeriodParams) => void
   queryDateFormat: string
-}
+}>
 
 const TimeRangePicker: FC<Props> = ({
   ranges,
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
index c2570337746..18def9308eb 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
@@ -17,11 +17,11 @@ type TimePeriodOption = {
   name: string
 }
 
-type Props = {
+type Props = Readonly<{
   isCustomRange: boolean
   ranges: { value: number, name: TimePeriodName }[]
   onSelect: (payload: PeriodParamsWithTimeRange) => void
-}
+}>
 
 const RangeSelector: FC<Props> = ({
   isCustomRange,
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
index 6d7c1787283..d587c3bd843 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
@@ -12,12 +12,12 @@ import * as React from 'react'
 import { useState } from 'react'
 import ConfigPopup from './config-popup'
 
-type Props = {
+type Props = Readonly<{
   readOnly: boolean
   className?: string
   hasConfigured: boolean
   children?: React.ReactNode
-} & PopupProps
+}> & PopupProps
 
 const ConfigBtn: FC<Props> = ({
   className,
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
index 2b56ecfeea3..5b1fc27a935 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
@@ -4,7 +4,7 @@ import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import Input from '@/app/components/base/input'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   label: string
   labelClassName?: string
@@ -12,7 +12,7 @@ type Props = {
   onChange: (value: string) => void
   isRequired?: boolean
   placeholder?: string
-}
+}>
 
 const Field: FC<Props> = ({
   className,
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
index 4845cf38df5..f537ce9b9b8 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
@@ -28,7 +28,7 @@ import { docURL } from './config'
 import Field from './field'
 import { TracingProvider } from './type'
 
-type Props = {
+type Props = Readonly<{
   appId: string
   type: TracingProvider
   payload?: ArizeConfig | PhoenixConfig | LangSmithConfig | LangFuseConfig | OpikConfig | WeaveConfig | AliyunConfig | MLflowConfig | DatabricksConfig | TencentConfig | null
@@ -36,7 +36,7 @@ type Props = {
   onCancel: () => void
   onSaved: (payload: ArizeConfig | PhoenixConfig | LangSmithConfig | LangFuseConfig | OpikConfig | WeaveConfig | AliyunConfig | MLflowConfig | DatabricksConfig | TencentConfig) => void
   onChosen: (provider: TracingProvider) => void
-}
+}>
 
 const I18N_PREFIX = 'tracing.configProvider'
 
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
index 4e166c52baf..cb37de98c0b 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
@@ -13,7 +13,7 @@ import { TracingProvider } from './type'
 
 const I18N_PREFIX = 'tracing'
 
-type Props = {
+type Props = Readonly<{
   type: TracingProvider
   readOnly: boolean
   isChosen: boolean
@@ -21,7 +21,7 @@ type Props = {
   onChoose: () => void
   hasConfigured: boolean
   onConfig: () => void
-}
+}>
 
 const getIcon = (type: TracingProvider) => {
   return ({
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
index ed097f9333e..a7450e70354 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
@@ -4,10 +4,10 @@ import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { TracingIcon as Icon } from '@/app/components/base/icons/src/public/tracing'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   size: 'lg' | 'md'
-}
+}>
 
 const sizeClassMap = {
   lg: 'w-9 h-9 p-2 rounded-[10px]',
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/hitTesting/page.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/hitTesting/page.tsx
index 9a339030b97..5b8c8e31976 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/hitTesting/page.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/hitTesting/page.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import Main from '@/app/components/datasets/hit-testing'
 
-type Props = {
+type Props = Readonly<{
   params: Promise<{ datasetId: string }>
-}
+}>
 
 const HitTesting = async (props: Props) => {
   const params = await props.params
diff --git a/web/app/(commonLayout)/error.tsx b/web/app/(commonLayout)/error.tsx
index 1b38ad89969..daaf7b87763 100644
--- a/web/app/(commonLayout)/error.tsx
+++ b/web/app/(commonLayout)/error.tsx
@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next'
 import { FullScreenLoading } from '@/app/components/full-screen-loading'
 import { isLegacyBase401 } from '@/features/account-profile/client'
 
-type Props = {
+type Props = Readonly<{
   error: Error & { digest?: string }
   unstable_retry: () => void
-}
+}>
 
 export default function CommonLayoutError({ error, unstable_retry }: Props) {
   const { t } = useTranslation('common')