Feat: #298 Integrate with sentry

.gitignore

@@ -7,4 +7,5 @@ coverage
 dist
 build_extension
 .note
+.DS_Store
 .idea

client/.babelrc

@@ -28,6 +28,7 @@
 					"@cd/selectors": "./src/selectors",
 					"@cd/services": "./src/services",
 					"@cd/shared": "./src/shared",
+					"@cd/libs": "./src/libs",
 					"@cd/store": "./src/store",
 					"@cd/config": "./src/config",
 					"@cd/constants": "./src/constants",

client/.env

@@ -1,2 +1,3 @@
 SKIP_PREFLIGHT_CHECK=true
 NODE_ENV=development
+REACT_APP_SENTRY_DSN=

client/.env.development.local

@@ -1,4 +1,5 @@
 REACT_APP_API_ROOT=http://localhost:3001
 REACT_APP_AUCTION_HASH=93d923e336b20a4c4ca14d592b60e5bd3fe330775618290104f9beb326db7ae2
 REACT_APP_DEBUG_ENV=true
-AUTO_LOCK_TIMEOUT_ALARM=10
+AUTO_LOCK_TIMEOUT_ALARM=10
+REACT_APP_SENTRY_DSN=

client/.env.production.local

@@ -4,3 +4,4 @@ REACT_APP_AUCTION_HASH=ccb576d6ce6dec84a551e48f0d0b7af89ddba44c7390b690036257a04
 REACT_APP_AVAILABLE_FEATURES=["home","dashboard","history","nfts","tokens","staking"]
 APP_ENVIRONMENT=prod
 REACT_APP_VERSION=1.6.2
+REACT_APP_SENTRY_DSN=

client/jest.config.js

@@ -22,6 +22,7 @@ const config = {
         "^@cd/actions(.*)$": "<rootDir>/src/actions$1",
         "^@cd/helpers(.*)$": "<rootDir>/src/helpers$1",
         "^@cd/selectors(.*)$": "<rootDir>/src/selectors$1",
+        "^@cd/libs(.*)$": "<rootDir>/src/libs$1",
         "^@cd/services(.*)$": "<rootDir>/src/services$1",
         "^@cd/shared(.*)$": "<rootDir>/src/shared$1",
         "^@cd/store(.*)$": "<rootDir>/src/store$1",

client/package.json

@@ -13,6 +13,8 @@
 		"@popperjs/core": "2.11.6",
 		"@redux-requests/axios": "^1.1.1",
 		"@redux-requests/core": "^1.6.2",
+		"@sentry/browser": "^7.59.3",
+		"@sentry/integrations": "^7.60.0",
 		"@tanstack/react-query": "^4.29.5",
 		"@zondax/ledger-casper": "^0.0.1",
 		"apexcharts": "^3.30.0",

client/src/app/web-extension/App.js

@@ -15,6 +15,8 @@ import 'react-toastify/dist/ReactToastify.css';
 import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import './App.scss';
 
+import '@cd/libs/installSentry';
+
 const getRoutes = (routes) => {
 	return (
 		routes &&

client/src/components/web-extension/Common/CreatePasswordPage/useCreateUser.js

@@ -9,6 +9,7 @@ import {
 	selectCreateWalletDerivationPath,
 } from '@cd/selectors/createWallet';
 import { createUserServiceSW } from '@cd/components/hooks/useServiceWorker';
+import { ERRORS } from '@cd/constants/errors';
 
 const useCreateUser = () => {
 	const navigate = useNavigate();
@@ -34,7 +35,7 @@ const useCreateUser = () => {
 		async (password) => {
 			try {
 				if (!keyPhrase) {
-					throw new Error('Missing keyphrase');
+					throw new Error(ERRORS.MISSING_KEYPHRASE);
 				}
 
 				const result = await createUserServiceSW(password, keyPhrase, encryptionType, derivationPath);

client/src/config/index.js

@@ -27,6 +27,10 @@ const CONFIG_OPTIONS = {
 		env: 'REACT_APP_EXPLORER_ROOT_LINK',
 		default: 'https://testnet.cspr.live',
 	},
+	SENTRY_DSN: {
+		env: 'REACT_APP_SENTRY_DSN',
+		default: '',
+	}
 };
 
 const getConfigOption = (option) => {

client/src/constants/errors.js

@@ -0,0 +1,11 @@
+export const ERRORS = {
+	MISSING_KEYPHRASE: 'Missing keyphrase',
+	YOUR_ACCOUNT_HAS_NOT_BEEN_CREATED: 'Your account has not been created',
+	PROVIDED_TARGET_PUBLIC_KEY_DOESNT_MATCH: 'Provided target public key doesn\'t match the one in deploy',
+	PROVIDED_TARGET_PUBLIC_KEY_DOESNT_MATCH_DEPLOY: 'The provided target public key does not match the one specified in the deploy',
+	TARGET_SPECIFIED_IN_DEPLOY_NOT_CORRECT_FORMAT: 'The target specified in the deploy is not in the correct format, it must be either an AccountHash or a PublicKey',
+	FAILED_TO_PARSE_KEY_ARGUMENT: 'Failed to parse key argument',
+	MISSING_USER_SERVICE_INSTANCE: 'Missing UserService instance',
+	THIS_SITE_IS_NOT_CONNECTED: 'This site is not connected',
+	CAN_NOT_SIGN_MESSAGE: 'Can not sign message',
+}

client/src/helpers/extension/signing.js

@@ -6,6 +6,7 @@ import {
     CLPublicKey
 } from 'casper-js-sdk';
 import browser from 'webextension-polyfill';
+import { ERRORS } from '@cd/constants/errors';
 
 export async function updateStatusEvent(tabId, msg, {
     isUnlocked,
@@ -46,7 +47,7 @@ export function verifyTargetAccountMatch(
 
   if (providedTargetKeyHash !== targetAccountHash) {
     throw new Error(
-      "Provided target public key doesn't match the one in deploy"
+      ERRORS.PROVIDED_TARGET_PUBLIC_KEY_DOESNT_MATCH
     );
   }
 }
@@ -120,12 +121,12 @@ export const parseTransferData = (transferDeploy, providedTarget) => {
     case CLTypeTag.PublicKey:
       targetFromDeployHex = targetFromDeploy.toHex();
       if (providedTarget && targetFromDeployHex.toLowerCase() !== providedTarget.toLowerCase()) {
-        throw new Error("The provided target public key does not match the one specified in the deploy.");
+        throw new Error(ERRORS.PROVIDED_TARGET_PUBLIC_KEY_DOESNT_MATCH_DEPLOY);
       }
       transferArgs['Recipient (Key)'] = targetFromDeployHex;
       break;
     default:
-      throw new Error('The target specified in the deploy is not in the correct format, it must be either an AccountHash or a PublicKey.');
+      throw new Error(ERRORS.TARGET_SPECIFIED_IN_DEPLOY_NOT_CORRECT_FORMAT);
   }
 
   transferArgs['Amount'] = transferDeploy.getArgByName('amount').value().toString();
@@ -160,7 +161,7 @@ export function parseDeployArg(arg) {
           if (key.isAccount() || key.isURef() || key.isHash()) {
             return parseDeployArg(value);
           }
-          throw new Error('Failed to parse key argument');
+          throw new Error(ERRORS.FAILED_TO_PARSE_KEY_ARGUMENT);
         }
 
       case CLTypeTag.URef:

client/src/libs/installSentry.js

@@ -0,0 +1,3 @@
+import { setupSentry } from './setupSentry';
+
+setupSentry();

client/src/libs/setupSentry.js

@@ -0,0 +1,33 @@
+import config from '@cd/config';
+import { getVersion } from '@cd/helpers/key';
+import * as Sentry from '@sentry/browser';
+import { Dedupe as DedupeIntegration } from "@sentry/integrations";
+import { ERRORS } from '@cd/constants/errors';
+
+const IGNORE_ERRORS = [
+    ...Object.values(ERRORS),
+];
+
+export const setupSentry = () => {
+    Sentry.init({
+        dsn: config.SENTRY_DSN,
+        environment: config.APP_ENVIRONMENT,
+        release: 'casperdash-extension@' + getVersion(),
+        beforeSend(event, hint) {
+          const error = hint.originalException;
+          if (
+            error &&
+            error.message &&
+            error.message.match(new RegExp(IGNORE_ERRORS.join('|'), 'i'))
+          ) {
+
+            return null;
+          }
+
+          return event;
+        },
+        integrations: [
+          new DedupeIntegration(),
+        ],
+    });
+};

client/src/services/ServiceWorker/Controllers/AccountController.js

@@ -3,6 +3,7 @@ import { DeployUtil, signFormattedMessage } from 'casper-js-sdk';
 import _get from 'lodash-es/get';
 import UserService from '@cd/services/ServiceWorker/UserService';
 import { getConnectedAccountChromeLocalStorage, cacheLoginInfoToLocalStorage } from '@cd/actions/userActions.utils';
+import { ERRORS } from '@cd/constants/errors';
 class AccountController {
 	/**
 	 * Only available after creating new User or successfully
@@ -81,7 +82,7 @@ class AccountController {
 
 	getPublicKey = async () => {
 		if (!this.userService) {
-			throw new Error('Missing UserService instance');
+			throw new Error(ERRORS.MISSING_USER_SERVICE_INSTANCE);
 		}
 
 		return this.userService.getPublicKey();

client/src/services/ServiceWorker/Controllers/PopupController.js

@@ -5,6 +5,7 @@ import _isEmpty from 'lodash-es/isEmpty';
 import _get from 'lodash-es/get';
 import { getLastError, updateStatusEvent } from '@cd/helpers/extension/signing';
 import { getConnectedAccountChromeLocalStorage } from '@cd/actions/userActions.utils';
+import { ERRORS } from '@cd/constants/errors';
 
 const CONNECTED_SITES = 'connectedSites';
 const BLACKLIST_PROTOCOLS = ['chrome-extension:', 'chrome:'];
@@ -92,7 +93,7 @@ class PopupController {
 		const account = await getConnectedAccountChromeLocalStorage();
 		const loginOptions = _get(account, 'loginOptions', null);
 		if (!loginOptions) {
-			throw new Error('Your account has not been created.');
+			throw new Error(ERRORS.YOUR_ACCOUNT_HAS_NOT_BEEN_CREATED);
 		}
 
 		const isConnected = await this.isConnected({ origin });

client/src/services/ServiceWorker/Controllers/SigningController.js

@@ -2,6 +2,7 @@ import EventEmitter from 'events';
 import { DeployUtil, encodeBase16, formatMessageWithHeaders } from 'casper-js-sdk';
 import _pick from 'lodash-es/pick';
 import { getDeployArgs, getDeployPayment, getDeployType } from '@cd/helpers/extension/signing';
+import { ERRORS } from '@cd/constants/errors';
 
 const SIGNING_STATUS = {
 	unsigned: 'Unsigned',
@@ -24,7 +25,7 @@ class SigningController extends EventEmitter {
 	getActivePublicKey = async ({ origin }) => {
 		const isConnected = await this.popupController.isConnected({ origin });
 		if (!isConnected) {
-			throw new Error('This site is not connected');
+			throw new Error(ERRORS.THIS_SITE_IS_NOT_CONNECTED);
 		}
 
 		return this.accountController.getCurrentPublicKey();
@@ -33,7 +34,7 @@ class SigningController extends EventEmitter {
 	signDeploy = async ({ deploy, signingPublicKeyHex, targetPublicKeyHex, origin }) => {
 		const isConnected = await this.popupController.isConnected({ origin });
 		if (!isConnected) {
-			throw new Error('This site is not connected');
+			throw new Error(ERRORS.THIS_SITE_IS_NOT_CONNECTED);
 		}
 
 		let innerDeploy = DeployUtil.deployFromJson(deploy);
@@ -128,7 +129,7 @@ class SigningController extends EventEmitter {
 	signMessage = async ({ message, signingPublicKey, origin }) => {
 		const isConnected = await this.popupController.isConnected({ origin });
 		if (!isConnected) {
-			throw new Error('This site is not connected');
+			throw new Error(ERRORS.THIS_SITE_IS_NOT_CONNECTED);
 		}
 
 		let messageBytes;
@@ -163,7 +164,7 @@ class SigningController extends EventEmitter {
 						return reject(new Error(message));
 					}
 					default:
-						reject(new Error('Can not sign message'));
+						reject(new Error(ERRORS.CAN_NOT_SIGN_MESSAGE));
 				}
 			});
 		});

client/src/services/stakeServices.js

@@ -63,7 +63,6 @@ export const getStakeDeploy = ({
 			network,
 		);
 	} catch (error) {
-		console.error(error);
 		throw new Error(`Failed to get stake deploy.`);
 	}
 };

client/src/store/index.js

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import { handleRequests } from '@redux-requests/core';
 import { createDriver } from '@redux-requests/axios';
+import * as Sentry from '@sentry/browser';
 import { combineReducers, createStore, applyMiddleware, compose } from 'redux';
 import { persistStore, persistReducer } from 'redux-persist';
 import webLocalStorage from 'redux-persist/lib/storage';
@@ -94,6 +95,12 @@ const { requestsReducer, requestsMiddleware } = handleRequests({
 	},
 	onError: (error, action, store) => {
 		store.dispatch(removeLoadingStatus(action.type));
+
+		Sentry.withScope(function (scope) {
+			scope.setTag('api', 'true');
+			Sentry.captureException(error);
+		});
+
 		throw error;
 	},
 	onAbort: (action, store) => {

client/template/extension/manifest.json

@@ -12,7 +12,7 @@
 		"default_popup": "popup.html"
 	},
 	"content_security_policy": {
-		"extension_pages": "default-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; script-src 'self'; img-src http: https: data:; connect-src https://testnet-api.casperdash.io https://api.casperdash.io https://cdn.jsdelivr.net https://api.cspr.live; style-src 'unsafe-inline'"
+		"extension_pages": "default-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; script-src 'self'; img-src http: https: data:; connect-src https://testnet-api.casperdash.io https://api.casperdash.io https://cdn.jsdelivr.net https://api.cspr.live https://o4505474114715648.ingest.sentry.io; style-src 'unsafe-inline'"
 	},
 	"content_scripts": [
 		{