feat: use react sentry to support pass config via runtime (#350)

web/app/(commonLayout)/_layout-client.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import { usePathname, useRouter, useSelectedLayoutSegments } from 'next/navigation'
 import useSWR, { SWRConfig } from 'swr'
+import * as Sentry from '@sentry/react'
 import Header from '../components/header'
 import { fetchAppList } from '@/service/apps'
 import { fetchDatasets } from '@/service/datasets'
@@ -12,11 +13,29 @@ import { AppContextProvider } from '@/context/app-context'
 import DatasetsContext from '@/context/datasets-context'
 import type { LangGeniusVersionResponse, UserProfileResponse } from '@/models/common'
 
+const isDevelopment = process.env.NODE_ENV === 'development'
+
 export type ICommonLayoutProps = {
   children: React.ReactNode
 }
 
 const CommonLayout: FC<ICommonLayoutProps> = ({ children }) => {
+  useEffect(() => {
+    const SENTRY_DSN = document?.body?.getAttribute('data-public-sentry-dsn')
+    if (!isDevelopment && SENTRY_DSN) {
+      Sentry.init({
+        dsn: SENTRY_DSN,
+        integrations: [
+          new Sentry.BrowserTracing({
+          }),
+          new Sentry.Replay(),
+        ],
+        tracesSampleRate: 0.1,
+        replaysSessionSampleRate: 0.1,
+        replaysOnErrorSampleRate: 1.0,
+      })
+    }
+  }, [])
   const router = useRouter()
   const pathname = usePathname()
   const segments = useSelectedLayoutSegments()

web/app/components/header/index.tsx

@@ -83,7 +83,8 @@ const Header: FC<IHeaderProps> = ({
       'sticky top-0 left-0 right-0 z-20 flex bg-gray-100 grow-0 shrink-0 basis-auto h-14',
       s.header,
       isBordered ? 'border-b border-gray-200' : '',
-    )}>
+    )}
+    >
       <div className={classNames(
         s[`header-${langeniusVersionInfo.current_env}`],
         'flex flex-1 items-center justify-between px-4',

web/app/layout.tsx

@@ -21,6 +21,7 @@ const LocaleLayout = ({
         data-api-prefix={process.env.NEXT_PUBLIC_API_PREFIX}
         data-pubic-api-prefix={process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX}
         data-public-edition={process.env.NEXT_PUBLIC_EDITION}
+        data-public-sentry-dsn={process.env.NEXT_PUBLIC_SENTRY_DSN}
       >
         {/* @ts-expect-error Async Server Component */}
         <I18nServer locale={locale}>{children}</I18nServer>