From fff39a307ae1e60bf6081e2aa1c0805ad461ac53 Mon Sep 17 00:00:00 2001 From: Joel Date: Tue, 13 Jun 2023 16:04:54 +0800 Subject: [PATCH] feat: use react sentry to support pass config via runtime (#350) --- web/.env.example | 2 -- web/app/(commonLayout)/_layout-client.tsx | 19 +++++++++++++++ web/app/components/header/index.tsx | 3 ++- web/app/layout.tsx | 1 + web/docker/entrypoint.sh | 1 + web/next.config.js | 29 +---------------------- web/package.json | 6 ++--- web/sentry.client.config.js | 23 ------------------ web/sentry.edge.config.js | 16 ------------- web/sentry.server.config.js | 10 -------- 10 files changed, 27 insertions(+), 83 deletions(-) delete mode 100644 web/sentry.client.config.js delete mode 100644 web/sentry.edge.config.js delete mode 100644 web/sentry.server.config.js diff --git a/web/.env.example b/web/.env.example index 9918da07b7..208a24adf5 100644 --- a/web/.env.example +++ b/web/.env.example @@ -13,5 +13,3 @@ NEXT_PUBLIC_PUBLIC_API_PREFIX=http://localhost:5001/api # SENTRY NEXT_PUBLIC_SENTRY_DSN= -NEXT_PUBLIC_SENTRY_ORG= -NEXT_PUBLIC_SENTRY_PROJECT= \ No newline at end of file diff --git a/web/app/(commonLayout)/_layout-client.tsx b/web/app/(commonLayout)/_layout-client.tsx index b19a103d77..325621878a 100644 --- a/web/app/(commonLayout)/_layout-client.tsx +++ b/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 = ({ 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() diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx index 6823470cd3..58000dbf26 100644 --- a/web/app/components/header/index.tsx +++ b/web/app/components/header/index.tsx @@ -83,7 +83,8 @@ const Header: FC = ({ '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' : '', - )}> + )} + >
{/* @ts-expect-error Async Server Component */} {children} diff --git a/web/docker/entrypoint.sh b/web/docker/entrypoint.sh index d22db21473..9b6beebfdd 100644 --- a/web/docker/entrypoint.sh +++ b/web/docker/entrypoint.sh @@ -6,6 +6,7 @@ export NEXT_PUBLIC_DEPLOY_ENV=${DEPLOY_ENV} 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 diff --git a/web/next.config.js b/web/next.config.js index 682e99353f..18ac3e1975 100644 --- a/web/next.config.js +++ b/web/next.config.js @@ -1,11 +1,3 @@ -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: { @@ -46,25 +38,6 @@ const nextConfig = { }, ] }, - ...(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) diff --git a/web/package.json b/web/package.json index 43ae9e0607..364c804604 100644 --- a/web/package.json +++ b/web/package.json @@ -20,10 +20,10 @@ "@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", @@ -33,8 +33,8 @@ "@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", diff --git a/web/sentry.client.config.js b/web/sentry.client.config.js deleted file mode 100644 index f1a8a9d18d..0000000000 --- a/web/sentry.client.config.js +++ /dev/null @@ -1,23 +0,0 @@ -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 -}) diff --git a/web/sentry.edge.config.js b/web/sentry.edge.config.js deleted file mode 100644 index 8e26d68d5d..0000000000 --- a/web/sentry.edge.config.js +++ /dev/null @@ -1,16 +0,0 @@ -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 -}) diff --git a/web/sentry.server.config.js b/web/sentry.server.config.js deleted file mode 100644 index c67d89128c..0000000000 --- a/web/sentry.server.config.js +++ /dev/null @@ -1,10 +0,0 @@ -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, -})