feat: enable anonymous issue tracking

.github/workflows/ci-workflow.yml

@@ -75,6 +75,14 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
+      - name: Build project
+        run: yarn build
+
+      - name: Upload source maps to Sentry
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: npx sentry-cli upload-sourcemaps ./packages/extension/build
+
       - name: Run Semantic Release
         env:
           GH_TOKEN: ${{ secrets.SR_TOKEN }}

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"
@@ -69,6 +69,8 @@
     "@polkadot/util": "^13.2.3",
     "@polkadot/util-crypto": "^13.2.3",
     "@polkagate/apps-config": "^0.140.7",
+    "@sentry/react": "^8.42.0",
+    "@sentry/webpack-plugin": "^2.22.6",
     "@substrate/connect": "^0.7.32",
     "@vaadin/icons": "^23.2.3",
     "babel-plugin-transform-import-meta": "^2.1.1",

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

@@ -3,6 +3,35 @@
 
 import '@polkadot/extension-inject/crossenv';
 
+import * as Sentry from '@sentry/react';
+
 import { createView, Popup } from '@polkadot/extension-ui';
 
+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.1' };
+export const packageInfo = { name: '@polkadot/extension', path: 'auto', type: 'auto', version: '0.34.0' };

packages/extension/webpack.shared.cjs

@@ -10,8 +10,10 @@ const { blake2AsHex } = require('@polkadot/util-crypto');
 
 const pkgJson = require('./package.json');
 const manifest = require('./manifest.json');
+const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
 
 const Dotenv = require('dotenv-webpack');
+
 const envPath = path.resolve(__dirname, '../../', '.env');
 
 const EXT_NAME = manifest.short_name;
@@ -27,7 +29,7 @@ const packages = [
 
 module.exports = (entry, alias = {}) => ({
   context: __dirname,
-  devtool: false,
+  devtool: 'source-map', // Source map generation must be turned on
   entry,
   module: {
     rules: [
@@ -90,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))
       }
     }),
@@ -103,7 +105,17 @@ module.exports = (entry, alias = {}) => ({
         }
       }
     }),
-    new Dotenv({ path: envPath })
+    new Dotenv({ path: envPath }),
+    // Put the Sentry Webpack plugin after all other plugins
+    ...(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) => ({