From feac93fa4c53a8c6e579c4bebb9d960d6c83107d Mon Sep 17 00:00:00 2001 From: Waleed Latif Date: Mon, 5 May 2025 13:05:51 -0700 Subject: [PATCH] improvement(sentry): added tree shaking, reduced bundle size 40% --- sim/instrumentation-client.ts | 31 ++++++++---- sim/next.config.ts | 28 ++++++++--- sim/package-lock.json | 91 +++++++++++++++++++++++++++++++++++ sim/package.json | 1 + 4 files changed, 136 insertions(+), 15 deletions(-) diff --git a/sim/instrumentation-client.ts b/sim/instrumentation-client.ts index 7b787d350b..dbc717aaa1 100644 --- a/sim/instrumentation-client.ts +++ b/sim/instrumentation-client.ts @@ -10,19 +10,29 @@ // 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" +import { + BrowserClient, + getCurrentScope, + makeFetchTransport, + defaultStackParser, + breadcrumbsIntegration, + dedupeIntegration, + linkedErrorsIntegration, + captureRouterTransitionStart, +} from "@sentry/nextjs" -if (process.env.NODE_ENV === 'production') { - Sentry.init({ +// Only in production +if (typeof window !== 'undefined' && process.env.NODE_ENV === 'production') { + const client = new BrowserClient({ dsn: process.env.NEXT_PUBLIC_SENTRY_DSN || undefined, - enabled: true, environment: process.env.NODE_ENV || 'development', + transport: makeFetchTransport, + stackParser: defaultStackParser, integrations: [ - Sentry.replayIntegration(), + breadcrumbsIntegration(), + dedupeIntegration(), + linkedErrorsIntegration(), ], - tracesSampleRate: 0.2, - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, beforeSend(event) { if (event.request && typeof event.request === 'object') { (event.request as any).ip = null @@ -30,10 +40,13 @@ if (process.env.NODE_ENV === 'production') { return event }, }) + + getCurrentScope().setClient(client) + client.init() } export const onRouterTransitionStart = process.env.NODE_ENV === 'production' - ? Sentry.captureRouterTransitionStart + ? captureRouterTransitionStart : () => {} if (typeof window !== 'undefined') { diff --git a/sim/next.config.ts b/sim/next.config.ts index 06de42c31d..84c2cf7818 100644 --- a/sim/next.config.ts +++ b/sim/next.config.ts @@ -1,5 +1,6 @@ import { withSentryConfig } from '@sentry/nextjs'; import type { NextConfig } from 'next' +import path from 'path' const nextConfig: NextConfig = { devIndicators: false, @@ -10,23 +11,30 @@ const nextConfig: NextConfig = { 'api.stability.ai', ] }, - // Always use 'standalone' output to support API routes output: 'standalone', + typescript: { + ignoreBuildErrors: true, + }, turbopack: { resolveExtensions: ['.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'], }, + experimental: { + optimizeCss: true, + }, webpack: (config, { isServer, dev }) => { // Skip webpack configuration in development when using Turbopack if (dev && process.env.NEXT_RUNTIME === 'turbopack') { - return config; + return config } - // Configure webpack to use memory cache instead of filesystem cache - // This avoids the serialization of large strings during the build process + // Configure webpack to use filesystem cache for faster incremental builds if (config.cache) { config.cache = { - type: 'memory', - maxGenerations: 1, + type: 'filesystem', + buildDependencies: { + config: [__filename] + }, + cacheDirectory: path.resolve(process.cwd(), '.next/cache/webpack') } } @@ -112,6 +120,14 @@ const sentryConfig = { project: process.env.SENTRY_PROJECT || '', authToken: process.env.SENTRY_AUTH_TOKEN || undefined, disableSourceMapUpload: process.env.NODE_ENV !== 'production', + autoInstrumentServerFunctions: process.env.NODE_ENV === 'production', + bundleSizeOptimizations: { + excludeDebugStatements: true, + excludePerformanceMonitoring: true, + excludeReplayIframe: true, + excludeReplayShadowDom: true, + excludeReplayWorker: true, + }, } export default process.env.NODE_ENV === 'development' diff --git a/sim/package-lock.json b/sim/package-lock.json index 45ff7322cd..4e1dae0197 100644 --- a/sim/package-lock.json +++ b/sim/package-lock.json @@ -107,6 +107,7 @@ "@types/react-dom": "^19", "@vitejs/plugin-react": "^4.3.4", "@vitest/coverage-v8": "^3.0.8", + "critters": "^0.0.23", "dotenv": "^16.4.7", "drizzle-kit": "^0.30.4", "husky": "^9.1.7", @@ -11523,6 +11524,13 @@ "integrity": "sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA==", "license": "MIT" }, + "node_modules/boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", + "dev": true, + "license": "ISC" + }, "node_modules/bowser": { "version": "2.11.0", "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.11.0.tgz", @@ -12247,6 +12255,39 @@ "node": ">= 6" } }, + "node_modules/critters": { + "version": "0.0.23", + "resolved": "https://registry.npmjs.org/critters/-/critters-0.0.23.tgz", + "integrity": "sha512-/MCsQbuzTPA/ZTOjjyr2Na5o3lRpr8vd0MZE8tMP0OBNg/VrLxWHteVKalQ8KR+fBmUadbJLdoyEz9sT+q84qg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "chalk": "^4.1.0", + "css-select": "^5.1.0", + "dom-serializer": "^2.0.0", + "domhandler": "^5.0.2", + "htmlparser2": "^8.0.2", + "postcss": "^8.4.23", + "postcss-media-query-parser": "^0.2.3" + } + }, + "node_modules/critters/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/croner": { "version": "9.0.0", "resolved": "https://registry.npmjs.org/croner/-/croner-9.0.0.tgz", @@ -12300,6 +12341,23 @@ "node": ">=16" } }, + "node_modules/css-select": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", + "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.1.0", + "domhandler": "^5.0.2", + "domutils": "^3.0.1", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/css-to-react-native": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", @@ -12311,6 +12369,19 @@ "postcss-value-parser": "^4.0.2" } }, + "node_modules/css-what": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/css.escape": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", @@ -16668,6 +16739,19 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/nth-check": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0" + }, + "funding": { + "url": "https://github.com/fb55/nth-check?sponsor=1" + } + }, "node_modules/nwsapi": { "version": "2.2.20", "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.20.tgz", @@ -17493,6 +17577,13 @@ "postcss": "^8.4.21" } }, + "node_modules/postcss-media-query-parser": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", + "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==", + "dev": true, + "license": "MIT" + }, "node_modules/postcss-nested": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", diff --git a/sim/package.json b/sim/package.json index a6876d60d3..e685b428b8 100644 --- a/sim/package.json +++ b/sim/package.json @@ -122,6 +122,7 @@ "@types/react-dom": "^19", "@vitejs/plugin-react": "^4.3.4", "@vitest/coverage-v8": "^3.0.8", + "critters": "^0.0.23", "dotenv": "^16.4.7", "drizzle-kit": "^0.30.4", "husky": "^9.1.7",