From 3c615237e799e9bb4f868aa52def55ae5101b856 Mon Sep 17 00:00:00 2001 From: speakeloudest Date: Tue, 2 Sep 2025 20:10:24 -0700 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8F=90=E4=BA=A4sentry?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(user)/document/tutorial-button.tsx | 26 ++++++++-- apps/user/app/global-error.tsx | 23 +++++++++ apps/user/instrumentation-client.ts | 30 ++++++++++++ apps/user/instrumentation.ts | 13 +++++ apps/user/next.config.ts | 47 ++++++++++++++----- apps/user/package.json | 3 +- apps/user/sentry.edge.config.ts | 19 ++++++++ apps/user/sentry.server.config.ts | 18 +++++++ bun.lock | 3 +- 9 files changed, 163 insertions(+), 19 deletions(-) create mode 100644 apps/user/app/global-error.tsx create mode 100644 apps/user/instrumentation-client.ts create mode 100644 apps/user/instrumentation.ts create mode 100644 apps/user/sentry.edge.config.ts create mode 100644 apps/user/sentry.server.config.ts diff --git a/apps/user/app/(main)/(content)/(user)/document/tutorial-button.tsx b/apps/user/app/(main)/(content)/(user)/document/tutorial-button.tsx index b03e8ce..807eeaa 100644 --- a/apps/user/app/(main)/(content)/(user)/document/tutorial-button.tsx +++ b/apps/user/app/(main)/(content)/(user)/document/tutorial-button.tsx @@ -55,6 +55,25 @@ export function TutorialButton({ items }: { items: Item[] }) { useOutsideClick(ref as RefObject, () => setActive(null)); + function openPopupWindow(item) { + // features 字符串用于控制窗口的特性 + const pageWidth = 600; // 弹出窗口的宽度 + const pageHeight = 550; // 弹出窗口的高度 + const { + availLeft, // 返回浏览器可用空间左边距离屏幕（系统桌面）左边界的距离。 + availHeight, // 浏览器在显示屏上的可用高度，即当前屏幕高度 + availWidth, // 浏览器在显示屏上的可用宽度，即当前屏幕宽度 + } = window.screen; + const pageTop = (availHeight - pageHeight) / 2; // 窗口的垂直位置 + let pageLeft = (availWidth - pageWidth) / 2; // 窗口的水平位置; + + pageLeft += availLeft; // 加上屏幕偏移值 + + const features = `width=${pageWidth},height=${pageHeight},left=${pageLeft},top=${pageTop},toolbar=no,location=no,menubar=no`; + console.log(features); + window.open(item.download, item.title, features); + } + return ( <> @@ -151,18 +170,17 @@ export function TutorialButton({ items }: { items: Item[] }) {
{item.download ? ( - openPopupWindow(item)} > 官方下载 - + ) : null} { + Sentry.captureException(error); + }, [error]); + + return ( + + + {/* `NextError` is the default Next.js error page component. Its type + definition requires a `statusCode` prop. However, since the App Router + does not expose status codes for errors, we simply pass 0 to render a + generic error message. */} + + + + ); +} diff --git a/apps/user/instrumentation-client.ts b/apps/user/instrumentation-client.ts new file mode 100644 index 0000000..918daa0 --- /dev/null +++ b/apps/user/instrumentation-client.ts @@ -0,0 +1,30 @@ +// This file configures the initialization of Sentry on the client. +// The added config here will be used whenever a users loads a page in their browser. +// https://docs.sentry.io/platforms/javascript/guides/nextjs/ + +import * as Sentry from '@sentry/nextjs'; + +Sentry.init({ + dsn: 'https://e519096f8b71cba99d86ddc46d8e424f@o4509950153719808.ingest.us.sentry.io/4509950194679808', + + // Add optional integrations for additional features + integrations: [Sentry.replayIntegration()], + + // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control. + tracesSampleRate: 1, + // Enable logs to be sent to Sentry + enableLogs: true, + + // Define how likely Replay events are sampled. + // This sets the sample rate to be 10%. You may want this to be 100% while + // in development and sample at a lower rate in production + replaysSessionSampleRate: 0.1, + + // Define how likely Replay events are sampled when an error occurs. + replaysOnErrorSampleRate: 1.0, + + // Setting this option to true will print useful information to the console while you're setting up Sentry. + debug: false, +}); + +export const onRouterTransitionStart = Sentry.captureRouterTransitionStart; diff --git a/apps/user/instrumentation.ts b/apps/user/instrumentation.ts new file mode 100644 index 0000000..964f937 --- /dev/null +++ b/apps/user/instrumentation.ts @@ -0,0 +1,13 @@ +import * as Sentry from '@sentry/nextjs'; + +export async function register() { + if (process.env.NEXT_RUNTIME === 'nodejs') { + await import('./sentry.server.config'); + } + + if (process.env.NEXT_RUNTIME === 'edge') { + await import('./sentry.edge.config'); + } +} + +export const onRequestError = Sentry.captureRequestError; diff --git a/apps/user/next.config.ts b/apps/user/next.config.ts index d4d1469..07d17b7 100644 --- a/apps/user/next.config.ts +++ b/apps/user/next.config.ts @@ -57,17 +57,38 @@ const nextConfig: NextConfig = { }, }; -const sentryWebpackPluginOptions = { - // For all available options, see: - // https://github.com/getsentry/sentry-webpack-plugin#options - org: '你的组织名称', - project: '你的项目名称', - authToken: '你的 Sentry Auth Token', - - silent: true, // Suppresses all logs - // For all available options, see: - // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-sentrywebpackplugin -}; - // 组合两个插件 -export default withSentryConfig(withNextIntl(nextConfig), sentryWebpackPluginOptions); +export default withSentryConfig(withNextIntl(nextConfig), { + // For all available options, see: + // https://www.npmjs.com/package/@sentry/webpack-plugin#options + + org: 'pa-f0', + + project: 'javascript-nextjs', + + // Only print logs for uploading source maps in CI + silent: true, + authToken: + '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', + + // For all available options, see: + // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/ + + // Upload a larger set of source maps for prettier stack traces (increases build time) + widenClientFileUpload: true, + + // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers. + // This can increase your server load as well as your hosting bill. + // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client- + // side errors will fail. + // tunnelRoute: "/monitoring", + + // Automatically tree-shake Sentry logger statements to reduce bundle size + disableLogger: true, + + // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.) + // See the following for more information: + // https://docs.sentry.io/product/crons/ + // https://vercel.com/docs/cron-jobs + automaticVercelMonitors: true, +}); diff --git a/apps/user/package.json b/apps/user/package.json index ef58f18..0ad30c9 100644 --- a/apps/user/package.json +++ b/apps/user/package.json @@ -19,7 +19,7 @@ "dependencies": { "@react-spring/three": "^10.0.1", "@react-three/fiber": "^9.2.0", - "@sentry/nextjs": "^10.8.0", + "@sentry/nextjs": "^10", "@shadergradient/react": "^2.1.2", "@stripe/react-stripe-js": "^3.4.0", "@stripe/stripe-js": "^6.0.0", @@ -50,6 +50,7 @@ "zustand": "^5.0.3" }, "devDependencies": { + "@babel/plugin-transform-named-capturing-groups-regex": "^7.27.1", "@svgr/webpack": "^8.1.0", "@types/node": "^22.10.5", "@types/react": "^19.0.4", diff --git a/apps/user/sentry.edge.config.ts b/apps/user/sentry.edge.config.ts new file mode 100644 index 0000000..b73d5bd --- /dev/null +++ b/apps/user/sentry.edge.config.ts @@ -0,0 +1,19 @@ +// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on). +// The config you add here will be used whenever one of the edge features is loaded. +// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally. +// https://docs.sentry.io/platforms/javascript/guides/nextjs/ + +import * as Sentry from '@sentry/nextjs'; + +Sentry.init({ + dsn: 'https://e519096f8b71cba99d86ddc46d8e424f@o4509950153719808.ingest.us.sentry.io/4509950194679808', + + // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control. + tracesSampleRate: 1, + + // Enable logs to be sent to Sentry + enableLogs: true, + + // Setting this option to true will print useful information to the console while you're setting up Sentry. + debug: false, +}); diff --git a/apps/user/sentry.server.config.ts b/apps/user/sentry.server.config.ts new file mode 100644 index 0000000..163cd54 --- /dev/null +++ b/apps/user/sentry.server.config.ts @@ -0,0 +1,18 @@ +// This file configures the initialization of Sentry on the server. +// The config you add here will be used whenever the server handles a request. +// https://docs.sentry.io/platforms/javascript/guides/nextjs/ + +import * as Sentry from '@sentry/nextjs'; + +Sentry.init({ + dsn: 'https://e519096f8b71cba99d86ddc46d8e424f@o4509950153719808.ingest.us.sentry.io/4509950194679808', + + // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control. + tracesSampleRate: 1, + + // Enable logs to be sent to Sentry + enableLogs: true, + + // Setting this option to true will print useful information to the console while you're setting up Sentry. + debug: false, +}); diff --git a/bun.lock b/bun.lock index 8a92d68..798b226 100644 --- a/bun.lock +++ b/bun.lock @@ -57,7 +57,7 @@ "dependencies": { "@react-spring/three": "^10.0.1", "@react-three/fiber": "^9.2.0", - "@sentry/nextjs": "^10.8.0", + "@sentry/nextjs": "^10", "@shadergradient/react": "^2.1.2", "@stripe/react-stripe-js": "^3.4.0", "@stripe/stripe-js": "^6.0.0", @@ -88,6 +88,7 @@ "zustand": "^5.0.3", }, "devDependencies": { + "@babel/plugin-transform-named-capturing-groups-regex": "^7.27.1", "@svgr/webpack": "^8.1.0", "@types/node": "^22.10.5", "@types/react": "^19.0.4",