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

web/.env.example

 
 # SENTRY
 NEXT_PUBLIC_SENTRY_DSN=
-NEXT_PUBLIC_SENTRY_ORG=
-NEXT_PUBLIC_SENTRY_PROJECT=

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

 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'
 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

       '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

         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>

web/docker/entrypoint.sh

 export NEXT_PUBLIC_EDITION=${EDITION}
 export NEXT_PUBLIC_API_PREFIX=${CONSOLE_URL}/console/api
 export NEXT_PUBLIC_PUBLIC_API_PREFIX=${APP_URL}/api
+export NEXT_PUBLIC_SENTRY_DSN=${SENTRY_DSN}
 
 /usr/local/bin/pm2 -v
 /usr/local/bin/pm2-runtime start /app/web/pm2.json

web/next.config.js

-const { withSentryConfig } = require('@sentry/nextjs')
-
-const isDevelopment = process.env.NODE_ENV === 'development'
-const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN
-const SENTRY_ORG = process.env.NEXT_PUBLIC_SENTRY_ORG
-const SENTRY_PROJECT = process.env.NEXT_PUBLIC_SENTRY_PROJECT
-const isHideSentry = isDevelopment || !SENTRY_DSN || !SENTRY_ORG || !SENTRY_PROJECT
-
 const withMDX = require('@next/mdx')({
   extension: /\.mdx?$/,
   options: {
       },
     ]
   },
-  ...(isHideSentry
-    ? {}
-    : {
-      sentry: {
-        hideSourceMaps: true,
-      },
-    }),
-}
-
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup
-const sentryWebpackPluginOptions = {
-  org: SENTRY_ORG,
-  project: SENTRY_PROJECT,
-  silent: true, // Suppresses all logs
-  sourcemaps: {
-    assets: './**',
-    ignore: ['./node_modules/**'],
-  },
-  // https://github.com/getsentry/sentry-webpack-plugin#options.
 }
 
-module.exports = isHideSentry ? withMDX(nextConfig) : withMDX(withSentryConfig(nextConfig, sentryWebpackPluginOptions))
+module.exports = withMDX(nextConfig)

web/package.json

     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^13.2.4",
-    "@sentry/nextjs": "^7.53.1",
+    "@sentry/react": "^7.54.0",
     "@sentry/utils": "^7.54.0",
-    "@tailwindcss/typography": "^0.5.9",
     "@tailwindcss/line-clamp": "^0.4.2",
+    "@tailwindcss/typography": "^0.5.9",
     "@types/crypto-js": "^4.1.1",
     "@types/lodash-es": "^4.17.7",
     "@types/node": "18.15.0",
     "@types/react-syntax-highlighter": "^15.5.6",
     "@types/react-window": "^1.8.5",
     "@types/react-window-infinite-loader": "^1.0.6",
-    "autoprefixer": "^10.4.14",
     "ahooks": "^3.7.5",
+    "autoprefixer": "^10.4.14",
     "classnames": "^2.3.2",
     "copy-to-clipboard": "^3.3.3",
     "crypto-js": "^4.1.1",

web/sentry.client.config.js

-import * as Sentry from '@sentry/nextjs'
-
-Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-  // Replay may only be enabled for the client-side
-  integrations: [new Sentry.Replay()],
-
-  // Set tracesSampleRate to 1.0 to capture 100%
-  // of transactions for performance monitoring.
-  // We recommend adjusting this value in production
-  tracesSampleRate: 0.1,
-
-  // Capture Replay for 10% of all sessions,
-  // plus for 100% of sessions with an error
-  replaysSessionSampleRate: 0.1,
-  replaysOnErrorSampleRate: 1.0,
-
-  // ...
-
-  // Note: if you want to override the automatic release value, do not set a
-  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-  // that it will also get attached to your source maps
-})

web/sentry.edge.config.js

-import * as Sentry from '@sentry/nextjs'
-
-Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-
-  // Set tracesSampleRate to 1.0 to capture 100%
-  // of transactions for performance monitoring.
-  // We recommend adjusting this value in production
-  tracesSampleRate: 0.1,
-
-  // ...
-
-  // Note: if you want to override the automatic release value, do not set a
-  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-  // that it will also get attached to your source maps
-})

web/sentry.server.config.js

-import * as Sentry from '@sentry/nextjs'
-
-Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-
-  // Set tracesSampleRate to 1.0 to capture 100%
-  // of transactions for performance monitoring.
-  // We recommend adjusting this value in production
-  tracesSampleRate: 0.1,
-})