feat: add Enable error reporting checkbox

package.json

@@ -24,7 +24,7 @@
   ],
   "scripts": {
     "apply-version": "node -e \"const { execSync } = require('child_process'); const fs = require('fs'); try { const version = execSync('git describe --tags --abbrev=0').toString().trim().replace(/^v/, ''); console.log('Version fetched:', version); const packageJsonPath = './packages/extension/package.json'; const packageJson = JSON.parse(fs.readFileSync(packageJsonPath)); packageJson.version = version; fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2)); } catch (error) { console.log('No tags found, skipping package.json update'); }\"",
-    "build": "yarn apply-version && polkadot-dev-build-ts && yarn build:zip && yarn build:rollup",
+    "build": "NODE_ENV=production yarn apply-version && polkadot-dev-build-ts && yarn build:zip && yarn build:rollup",
     "build:before": "yarn build:i18n",
     "build:i18n": "i18next-scanner --config i18next-scanner.config.cjs",
     "build:release": "polkadot-ci-ghact-build",
@@ -38,7 +38,7 @@
     "postinstall": "polkadot-dev-yarn-only",
     "prepare": "husky",
     "release": "semantic-release",
-    "start": "yarn watch",
+    "start": "NODE_ENV=development yarn watch",
     "test": "polkadot-dev-run-test --silent --detectOpenHandles --testPathPattern=packages/extension-polkagate/src --maxWorkers=1",
     "test:one": "polkadot-dev-run-test --detectOpenHandles",
     "watch": "cd packages/extension && yarn polkadot-exec-webpack --config webpack.watch.cjs --mode development --watch"

packages/extension-polkagate/src/partials/SettingSubMenu.tsx

@@ -30,6 +30,9 @@ export default function SettingSubMenu ({ isTestnetEnabledChecked, onChange, set
 
   const [notification, updateNotification] = useState(settings.notification);
   const [camera, setCamera] = useState(settings.camera === 'on');
+  const [isSentryEnabled, setIsSentryEnabled] = useState(
+    localStorage.getItem('sentryEnabled') === 'true'
+  );
 
   const languageOptions = useMemo(() => getLanguageOptions(), []);
   const notificationOptions = useMemo(() => ['Extension', 'PopUp', 'Window'].map((item) => ({ text: item, value: item.toLowerCase() })), []);
@@ -63,6 +66,13 @@ export default function SettingSubMenu ({ isTestnetEnabledChecked, onChange, set
     setCamera(!camera);
   }, [camera]);
 
+  const toggleErrorReporting = useCallback(() => {
+    const newValue = !isSentryEnabled;
+
+    setIsSentryEnabled(newValue);
+    localStorage.setItem('sentryEnabled', newValue ? 'true' : 'false');
+  }, [isSentryEnabled]);
+
   useEffect(() => {
     getStorage('testnet_enabled').then((res) => {
       setTestnetEnabledChecked(!!res);
@@ -73,7 +83,7 @@ export default function SettingSubMenu ({ isTestnetEnabledChecked, onChange, set
     <Collapse easing={{ enter: '200ms', exit: '100ms' }} in={show} sx={{ width: '100%' }}>
       <Grid container item justifyContent='flex-end'>
         <Divider sx={{ bgcolor: 'divider', height: '1px', mx: '10px', width: '83%' }} />
-        <Grid container direction='column' pl='40px' pr='5px' pt='10px'>
+        <Grid container direction='column' height='320px' pl='40px' pr='5px' pt='10px'>
           <Grid item pt='5px' textAlign='left'>
             <Checkbox2
               checked={isTestnetEnabledChecked}
@@ -83,7 +93,16 @@ export default function SettingSubMenu ({ isTestnetEnabledChecked, onChange, set
               onChange={onChange}
             />
           </Grid>
-          <Grid item pt='15px' textAlign='left'>
+          <Grid item pt='10px' textAlign='left'>
+            <Checkbox2
+              checked={isSentryEnabled}
+              iconStyle={{ transform: 'scale(1.13)' }}
+              label={t('Enable error reporting')}
+              labelStyle={{ fontSize: '17px', fontWeight: 300, marginLeft: '7px' }}
+              onChange={toggleErrorReporting}
+            />
+          </Grid>
+          <Grid item pt='10px' textAlign='left'>
             <Checkbox2
               checked={camera}
               iconStyle={{ transform: 'scale(1.13)' }}
@@ -118,7 +137,7 @@ export default function SettingSubMenu ({ isTestnetEnabledChecked, onChange, set
             />
           </Grid>
           <SelectIdenticonTheme
-            style={{ pt: '12px', width: '100%' }}
+            style={{ pt: '3px', width: '100%' }}
           />
           <Grid item pt='10px'>
             <Select

packages/extension/package.json

@@ -15,7 +15,7 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "0.33.1",
+  "version": "0.34.0",
   "dependencies": {
     "@polkadot/api": "^11.2.1",
     "@polkadot/extension-base": "^0.47.5",

packages/extension/public/locales/en/translation.json

@@ -1466,5 +1466,6 @@
   "Menu options": "",
   "PolkaGate logo": "",
   "Total balance": "",
-  "Deposit they made": ""
+  "Deposit they made": "",
+  "Enable error reporting": ""
 }

packages/extension/src/extension.ts

@@ -7,23 +7,31 @@ import * as Sentry from '@sentry/react';
 
 import { createView, Popup } from '@polkadot/extension-ui';
 
-// Initialize Sentry
-Sentry.init({
-  dsn: 'https://e180ce4eb81555f550041641eff9c75a@o4508399609184256.ingest.us.sentry.io/4508399617114112',
-  integrations: [
-    Sentry.browserTracingIntegration(),
-    Sentry.replayIntegration()
-  ],
-  // Tracing
-  tracesSampleRate: 1.0, //  Capture 100% of the transactions
-  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
-  tracePropagationTargets: [
-    /^chrome-extension:\/\/mgojgfjhknpmlojihdpjikinpgcaadlj/, // Dev extension ID
-    /^chrome-extension:\/\/ginchbkmljhldofnbjabmeophlhdldgp/ // Production extension ID
-  ],
-  // Session Replay
-  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
-  replaysOnErrorSampleRate: 1.0 // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-});
+if (localStorage.getItem('sentryEnabled') === null) {
+  localStorage.setItem('sentryEnabled', 'true'); // Default to true
+}
+
+// Check user preference for Sentry
+const isSentryEnabled = localStorage.getItem('sentryEnabled') === 'true';
+
+if (isSentryEnabled) {
+  Sentry.init({
+    dsn: process.env['SENTRY_DSN'],
+    integrations: [
+      Sentry.browserTracingIntegration(),
+      Sentry.replayIntegration()
+    ],
+    tracesSampleRate: 1.0, //  Capture 100% of the transactions
+    tracePropagationTargets: [
+      /^chrome-extension:\/\/mgojgfjhknpmlojihdpjikinpgcaadlj/, // Dev extension ID
+      /^chrome-extension:\/\/ginchbkmljhldofnbjabmeophlhdldgp/ // Production extension ID
+    ],
+    replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+    replaysOnErrorSampleRate: 1.0 // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+  });
+} else {
+  console.log('Sentry is disabled');
+}
+
 // Start the extension UI
 createView(Popup);

packages/extension/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/extension', path: 'auto', type: 'auto', version: '0.33.2' };
+export const packageInfo = { name: '@polkadot/extension', path: 'auto', type: 'auto', version: '0.34.0' };

packages/extension/webpack.shared.cjs

@@ -92,7 +92,7 @@ module.exports = (entry, alias = {}) => ({
     new webpack.DefinePlugin({
       'process.env': {
         EXTENSION_PREFIX: JSON.stringify(process.env.EXTENSION_PREFIX || EXT_NAME),
-        NODE_ENV: JSON.stringify('production'),
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production'),
         PORT_PREFIX: JSON.stringify(blake2AsHex(JSON.stringify(manifest), 64))
       }
     }),
@@ -107,12 +107,15 @@ module.exports = (entry, alias = {}) => ({
     }),
     new Dotenv({ path: envPath }),
     // Put the Sentry Webpack plugin after all other plugins
-    sentryWebpackPlugin({
-      authToken: process.env.SENTRY_AUTH_TOKEN,
-      org: 'polkagate',
-      project: 'javascript-react',
-      telemetry: false
-    })
+    ...(process.env.NODE_ENV === 'development'
+      ? []
+      : [sentryWebpackPlugin({
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+        org: 'polkagate',
+        project: 'javascript-react',
+        telemetry: false
+      })]
+    )
   ],
   resolve: {
     alias: packages.reduce((alias, p) => ({