Merge pull request #18906 from mozilla/optimize-sentry-bundle

task(settings): Optimize sentry bundle and add webpack analyzer

Author: chenba

packages/fxa-settings/config/webpack.config.js

@@ -26,6 +26,8 @@ const ForkTsCheckerWebpackPlugin =
     : require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const { sentryWebpackPlugin } = require('@sentry/webpack-plugin/webpack5');
 
 const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
 
@@ -781,6 +783,27 @@ module.exports = function (webpackEnv) {
             },
           },
         }),
+      sentryWebpackPlugin({
+        // These settings should allow better source map resolution for errors / debugging.
+        // The auth token is used during packing to upload sources to the sentry for later use.
+        org: 'mozilla',
+        project: 'fxa-content',
+        authToken: process.env.SENTRY_SOURCE_MAP_AUTH_TOKEN,
+        bundleSizeOptimizations: {
+          excludeDebugStatements: true,
+          excludeTracing: false, // Used for perf metrics!
+          excludeReplayCanvas: true,
+          excludeReplayShadowDom: true,
+          excludeReplayIframe: true,
+          excludeReplayWorker: true,
+        },
+      }),
+      new BundleAnalyzerPlugin({
+        analyzerMode: 'static',
+        generateStatsFile: true,
+        reportFilename: 'bundle-report.html',
+        openAnalyzer: false,
+      }),
     ].filter(Boolean),
     // Turn off performance processing because we utilize
     // our own hints via the FileSizeReporter

packages/fxa-settings/package.json

@@ -195,6 +195,7 @@
   },
   "devDependencies": {
     "@babel/types": "7.25.8",
+    "@sentry/webpack-plugin": "^3.5.0",
     "@storybook/addon-actions": "8.0.0",
     "@storybook/addon-essentials": "7.6.15",
     "@storybook/addon-interactions": "7.6.16",
@@ -222,6 +223,7 @@
     "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "^10",
     "@types/webpack": "5.28.5",
+    "@types/webpack-bundle-analyzer": "^4",
     "babel-loader": "^9.1.3",
     "babel-plugin-named-exports-order": "^0.0.2",
     "babel-plugin-transform-typescript-metadata": "^0.3.2",
@@ -251,7 +253,8 @@
     "ts-jest": "^29.2.3",
     "type-fest": "^4.38.0",
     "typescript": "5.5.3",
-    "webpack": "^5.97.0"
+    "webpack": "^5.97.0",
+    "webpack-bundle-analyzer": "^4.10.2"
   },
   "nx": {
     "implicitDependencies": [

yarn.lock

@@ -11941,6 +11941,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/babel-plugin-component-annotate@npm:3.5.0":
+  version: 3.5.0
+  resolution: "@sentry/babel-plugin-component-annotate@npm:3.5.0"
+  checksum: c5dd3c572e4ca83db859bf3d8ba976393361631f30eb977bc00a572d9981ccaae84f42cce5bf85bc425544245ad22923a66fe96bc2355d339e12ea3aa72d3b82
+  languageName: node
+  linkType: hard
+
 "@sentry/browser@npm:8.42.0":
   version: 8.42.0
   resolution: "@sentry/browser@npm:8.42.0"
@@ -11970,34 +11977,85 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/bundler-plugin-core@npm:3.5.0":
+  version: 3.5.0
+  resolution: "@sentry/bundler-plugin-core@npm:3.5.0"
+  dependencies:
+    "@babel/core": ^7.18.5
+    "@sentry/babel-plugin-component-annotate": 3.5.0
+    "@sentry/cli": 2.42.2
+    dotenv: ^16.3.1
+    find-up: ^5.0.0
+    glob: ^9.3.2
+    magic-string: 0.30.8
+    unplugin: 1.0.1
+  checksum: a1fb59a1e062f5f1e0bd7b93d2f15cb7143c8ae476640e367a33e71e1312e23d3d8807b274fc3b3b55938af3787b4dd623fd78dc040959170055022e44c6ba88
+  languageName: node
+  linkType: hard
+
+"@sentry/cli-darwin@npm:2.42.2":
+  version: 2.42.2
+  resolution: "@sentry/cli-darwin@npm:2.42.2"
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
 "@sentry/cli-darwin@npm:2.44.0":
   version: 2.44.0
   resolution: "@sentry/cli-darwin@npm:2.44.0"
   conditions: os=darwin
   languageName: node
   linkType: hard
 
+"@sentry/cli-linux-arm64@npm:2.42.2":
+  version: 2.42.2
+  resolution: "@sentry/cli-linux-arm64@npm:2.42.2"
+  conditions: (os=linux | os=freebsd) & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@sentry/cli-linux-arm64@npm:2.44.0":
   version: 2.44.0
   resolution: "@sentry/cli-linux-arm64@npm:2.44.0"
   conditions: (os=linux | os=freebsd) & cpu=arm64
   languageName: node
   linkType: hard
 
+"@sentry/cli-linux-arm@npm:2.42.2":
+  version: 2.42.2
+  resolution: "@sentry/cli-linux-arm@npm:2.42.2"
+  conditions: (os=linux | os=freebsd) & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@sentry/cli-linux-arm@npm:2.44.0":
   version: 2.44.0
   resolution: "@sentry/cli-linux-arm@npm:2.44.0"
   conditions: (os=linux | os=freebsd) & cpu=arm
   languageName: node
   linkType: hard
 
+"@sentry/cli-linux-i686@npm:2.42.2":
+  version: 2.42.2
+  resolution: "@sentry/cli-linux-i686@npm:2.42.2"
+  conditions: (os=linux | os=freebsd) & (cpu=x86 | cpu=ia32)
+  languageName: node
+  linkType: hard
+
 "@sentry/cli-linux-i686@npm:2.44.0":
   version: 2.44.0
   resolution: "@sentry/cli-linux-i686@npm:2.44.0"
   conditions: (os=linux | os=freebsd) & (cpu=x86 | cpu=ia32)
   languageName: node
   linkType: hard
 
+"@sentry/cli-linux-x64@npm:2.42.2":
+  version: 2.42.2
+  resolution: "@sentry/cli-linux-x64@npm:2.42.2"
+  conditions: (os=linux | os=freebsd) & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@sentry/cli-linux-x64@npm:2.44.0":
   version: 2.44.0
   resolution: "@sentry/cli-linux-x64@npm:2.44.0"
@@ -12012,20 +12070,71 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/cli-win32-i686@npm:2.42.2":
+  version: 2.42.2
+  resolution: "@sentry/cli-win32-i686@npm:2.42.2"
+  conditions: os=win32 & (cpu=x86 | cpu=ia32)
+  languageName: node
+  linkType: hard
+
 "@sentry/cli-win32-i686@npm:2.44.0":
   version: 2.44.0
   resolution: "@sentry/cli-win32-i686@npm:2.44.0"
   conditions: os=win32 & (cpu=x86 | cpu=ia32)
   languageName: node
   linkType: hard
 
+"@sentry/cli-win32-x64@npm:2.42.2":
+  version: 2.42.2
+  resolution: "@sentry/cli-win32-x64@npm:2.42.2"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@sentry/cli-win32-x64@npm:2.44.0":
   version: 2.44.0
   resolution: "@sentry/cli-win32-x64@npm:2.44.0"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
+"@sentry/cli@npm:2.42.2":
+  version: 2.42.2
+  resolution: "@sentry/cli@npm:2.42.2"
+  dependencies:
+    "@sentry/cli-darwin": 2.42.2
+    "@sentry/cli-linux-arm": 2.42.2
+    "@sentry/cli-linux-arm64": 2.42.2
+    "@sentry/cli-linux-i686": 2.42.2
+    "@sentry/cli-linux-x64": 2.42.2
+    "@sentry/cli-win32-i686": 2.42.2
+    "@sentry/cli-win32-x64": 2.42.2
+    https-proxy-agent: ^5.0.0
+    node-fetch: ^2.6.7
+    progress: ^2.0.3
+    proxy-from-env: ^1.1.0
+    which: ^2.0.2
+  dependenciesMeta:
+    "@sentry/cli-darwin":
+      optional: true
+    "@sentry/cli-linux-arm":
+      optional: true
+    "@sentry/cli-linux-arm64":
+      optional: true
+    "@sentry/cli-linux-i686":
+      optional: true
+    "@sentry/cli-linux-x64":
+      optional: true
+    "@sentry/cli-win32-i686":
+      optional: true
+    "@sentry/cli-win32-x64":
+      optional: true
+  bin:
+    sentry-cli: bin/sentry-cli
+  checksum: a22e4ff4a8c1891cc89028871f64f05eb4376033dba2f1ffdf0b946e4e6493a99807d640ea9580623e1c75ba181c295c93a51d00148ad45bb9343e68c2e42f90
+  languageName: node
+  linkType: hard
+
 "@sentry/cli@npm:^2.36.1":
   version: 2.44.0
   resolution: "@sentry/cli@npm:2.44.0"
@@ -12205,6 +12314,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/webpack-plugin@npm:^3.5.0":
+  version: 3.5.0
+  resolution: "@sentry/webpack-plugin@npm:3.5.0"
+  dependencies:
+    "@sentry/bundler-plugin-core": 3.5.0
+    unplugin: 1.0.1
+    uuid: ^9.0.0
+  peerDependencies:
+    webpack: ">=4.40.0"
+  checksum: 8dcdd33405d09369a4a6988ee45d04cdda800669ade090c52bb84150b1ecd8b9639bb7724b99c783969cebc36fe46c8e75c34693bad42c6fab13ce07a30395b3
+  languageName: node
+  linkType: hard
+
 "@sideway/address@npm:^4.1.5":
   version: 4.1.5
   resolution: "@sideway/address@npm:4.1.5"
@@ -19617,6 +19739,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/webpack-bundle-analyzer@npm:^4":
+  version: 4.7.0
+  resolution: "@types/webpack-bundle-analyzer@npm:4.7.0"
+  dependencies:
+    "@types/node": "*"
+    tapable: ^2.2.0
+    webpack: ^5
+  checksum: d50ef42ae98c4ca0ca1afa2433f27996292e4052f038e9f3cb38c3fd6931c365b5b21ac46b7f8af2ecd48ab17447c96033774b3985b82ed3818fe647ec9191bd
+  languageName: node
+  linkType: hard
+
 "@types/webpack-sources@npm:*":
   version: 3.2.3
   resolution: "@types/webpack-sources@npm:3.2.3"
@@ -32745,6 +32878,7 @@ __metadata:
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.3
     "@reach/router": ^1.3.4
     "@react-pdf/renderer": 3.2.1
+    "@sentry/webpack-plugin": ^3.5.0
     "@storybook/addon-actions": 8.0.0
     "@storybook/addon-essentials": 7.6.15
     "@storybook/addon-interactions": 7.6.16
@@ -32775,6 +32909,7 @@ __metadata:
     "@types/ua-parser-js": ^0.7.36
     "@types/uuid": ^10
     "@types/webpack": 5.28.5
+    "@types/webpack-bundle-analyzer": ^4
     babel-jest: ^29.7.0
     babel-loader: ^9.1.3
     babel-plugin-named-exports-order: ^0.0.2
@@ -32857,6 +32992,7 @@ __metadata:
     ua-parser-js: 1.0.35
     uuid: ^10.0.0
     webpack: ^5.97.0
+    webpack-bundle-analyzer: ^4.10.2
     webpack-dev-server: ^4.6.0
     webpack-manifest-plugin: ^5.0.0
     workbox-webpack-plugin: ^7.1.0
@@ -55889,6 +56025,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack-bundle-analyzer@npm:^4.10.2":
+  version: 4.10.2
+  resolution: "webpack-bundle-analyzer@npm:4.10.2"
+  dependencies:
+    "@discoveryjs/json-ext": 0.5.7
+    acorn: ^8.0.4
+    acorn-walk: ^8.0.0
+    commander: ^7.2.0
+    debounce: ^1.2.1
+    escape-string-regexp: ^4.0.0
+    gzip-size: ^6.0.0
+    html-escaper: ^2.0.2
+    opener: ^1.5.2
+    picocolors: ^1.0.0
+    sirv: ^2.0.3
+    ws: ^7.3.1
+  bin:
+    webpack-bundle-analyzer: lib/bin/analyzer.js
+  checksum: 4f0275e7d87bb6203a618ca5d2d4953943979d986fa2b91be1bf1ad0bcd22bec13398803273d11699f9fbcf106896311208a72d63fe5f8a47b687a226e598dc1
+  languageName: node
+  linkType: hard
+
 "webpack-cli@npm:^6.0.1":
   version: 6.0.1
   resolution: "webpack-cli@npm:6.0.1"