Set up Sentry

.gitignore

@@ -22,3 +22,6 @@ yarn-error.log*
 # Yarn Integrity file
 .yarn-integrity
 .vscode/settings.json
+
+# Sentry Config File
+.env.sentry-build-plugin

package.json

@@ -38,6 +38,7 @@
     "@near-js/keystores": "^0.0.5",
     "@near-js/transactions": "^0.2.1",
     "@radix-ui/react-toast": "^1.1.4",
+    "@sentry/react": "^7.75.1",
     "bn.js": "^5.2.1",
     "bootstrap": "^5.3.0",
     "borsh": "^0.7.0",
@@ -47,8 +48,8 @@
     "firebase": "^10.1.0",
     "https-browserify": "^1.0.0",
     "i18next": "^23.2.8",
-    "near-api-js": "^2.1.4",
     "js-sha256": "^0.10.1",
+    "near-api-js": "^2.1.4",
     "process": "^0.11.10",
     "query-string": "^7.0.0",
     "react": "^18.2.0",

src/components/AddDevice/AddDevice.tsx

@@ -1,4 +1,5 @@
 import { createKey, isPassKeyAvailable } from '@near-js/biometric-ed25519/lib';
+import { captureException } from '@sentry/react';
 import BN from 'bn.js';
 import { fetchSignInMethodsForEmail, sendSignInLinkToEmail } from 'firebase/auth';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -270,6 +271,7 @@ function SignInPage() {
             });
         }).catch((error) => {
           console.log('error', error);
+          captureException(error);
           redirectWithError({ success_url, failure_url, error });
           openToast({
             type:  'ERROR',

src/components/AuthCallback/AuthCallback.tsx

@@ -1,4 +1,5 @@
 import { KeyPairEd25519 } from '@near-js/crypto';
+import { captureException } from '@sentry/react';
 import BN from 'bn.js';
 import { isSignInWithEmailLink, signInWithEmailLink } from 'firebase/auth';
 import type { MutableRefObject } from 'react';
@@ -132,6 +133,7 @@ export const onSignIn = async ({
     .then((res) => res.json())
     .catch((err) => {
       console.log(err);
+      captureException(err);
       throw new Error('Unable to retrieve account Id');
     });
 
@@ -285,6 +287,7 @@ function AuthCallbackPage() {
             });
           }
         }).catch((e) => {
+          captureException(e);
           console.log('error:', e);
           redirectWithError({ success_url, failure_url, error: e });
           openToast({

src/components/Devices/Devices.tsx

@@ -1,3 +1,4 @@
+import { captureException } from '@sentry/react';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
@@ -144,6 +145,7 @@ function Devices() {
           setIsAddingKey(false);
         }
       }).catch((err) => {
+        captureException(err);
         setisDeleted(false);
         console.log('Delete Failed', err);
       });

src/index.tsx

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/react';
 import i18next from 'i18next';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
@@ -6,6 +7,7 @@ import { I18nextProvider } from 'react-i18next';
 import App from './App';
 import lang_de from './translations/de.json';
 import lang_en from './translations/en.json';
+import { networkId, network } from './utils/config';
 
 i18next.init({
   interpolation: { escapeValue: false }, // React already does escaping
@@ -20,6 +22,24 @@ i18next.init({
   },
 });
 
+Sentry.init({
+  environment:           networkId,
+  dsn:                   network.sentryDsn,
+  integrations: [
+    new Sentry.BrowserTracing({
+      // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+      tracePropagationTargets: [
+        'localhost',
+        network.fastAuth.mpcRecoveryUrl,
+        network.fastAuth.authHelperUrl,
+      ],
+    }),
+    new Sentry.Replay(),
+  ],
+  // Performance Monitoring
+  tracesSampleRate:         1.0, // Capture 100% of the transactions
+});
+
 const container = document.getElementById('root');
 const root = createRoot(container); // createRoot(container!) if you use TypeScript
 root.render(

src/lib/controller.ts

@@ -7,6 +7,7 @@ import { InMemoryKeyStore } from '@near-js/keystores';
 import {
   SCHEMA, actionCreators, encodeSignedDelegate, buildDelegateAction, Signature, SignedDelegate
 } from '@near-js/transactions';
+import { captureException } from '@sentry/react';
 import BN from 'bn.js';
 import { baseEncode, serialize } from 'borsh';
 import { sha256 } from 'js-sha256';
@@ -161,6 +162,9 @@ class FastAuthController {
       mode:    'cors',
       body:    JSON.stringify(Array.from(encodeSignedDelegate(signedDelegate))),
       headers: new Headers({ 'Content-Type': 'application/json' }),
+    }).catch((err) => {
+      console.log('Unable to sign and send delegate action', err);
+      captureException(err);
     });
   }
 
@@ -189,7 +193,7 @@ class FastAuthController {
   }
 
   // This call need to be called after new oidc token is generated
-  async claimOidcToken(oidcToken) {
+  async claimOidcToken(oidcToken: string): Promise<{ mpc_signature: string }> {
     let keypair = await this.getKey(`oidc_keypair_${oidcToken}`);
     const CLAIM_SALT = CLAIM + 0;
     if (!keypair) {
@@ -332,6 +336,9 @@ class FastAuthController {
         mode:    'cors',
         body:    JSON.stringify(Array.from(encodedSignedDelegate)),
         headers: new Headers({ 'Content-Type': 'application/json' }),
+      }).catch((err) => {
+        console.log('Unable to sign and send action with recovery key', err);
+        captureException(err);
       });
     });
   }

src/lib/firestoreController.ts

@@ -1,3 +1,4 @@
+import { captureException } from '@sentry/react';
 import { User } from 'firebase/auth';
 import {
   getFirestore, Firestore, collection, setDoc, getDoc, getDocs, query, doc, updateDoc, CollectionReference, writeBatch
@@ -42,8 +43,14 @@ class FirestoreController {
       .then((res) => res.json())
       .catch((err) => {
         console.log(err);
+        captureException(err);
         throw new Error('Unable to retrieve account Id');
       });
+    if (!accountIds.length) {
+      const noAccountIdError = new Error('Unable to retrieve account Id');
+      captureException(noAccountIdError);
+      throw noAccountIdError;
+    }
     return accountIds[0];
   }
 
@@ -153,6 +160,7 @@ class FirestoreController {
       .then((res) => res.json())
       .catch((err) => {
         console.log(err);
+        captureException(err);
         throw new Error('Unable to retrieve account Id');
       });
     // delete firebase records

src/utils/config.ts

@@ -9,6 +9,7 @@ export const networks: Record<NetworkId, Network> = {
     helperUrl:     'https://helper.mainnet.near.org',
     relayerUrl:    process.env.RELAYER_URL,
     explorerUrl:   'https://explorer.near.org',
+    sentryDsn:       process.env.SENTRY_DSN,
     fastAuth:      {
       mpcRecoveryUrl:  'https://mpc-recovery-leader-mainnet-tmp-cg7nolnlpa-ue.a.run.app',
       authHelperUrl:   'https://api.kitwallet.app',
@@ -32,6 +33,7 @@ export const networks: Record<NetworkId, Network> = {
     helperUrl:     'https://helper.testnet.near.org',
     relayerUrl:    process.env.RELAYER_URL_TESTNET,
     explorerUrl:    'https://explorer.testnet.near.org',
+    sentryDsn:       process.env.SENTRY_DSN,
     fastAuth:      {
       mpcRecoveryUrl:    'https://mpc-recovery-leader-dev-7tk2cmmtcq-ue.a.run.app',
       authHelperUrl:   'https://testnet-api.kitwallet.app',

src/utils/types.ts

@@ -17,6 +17,7 @@ type ProductionNetwork = {
   helperUrl: string;
   relayerUrl: string;
   explorerUrl: string;
+  sentryDsn?: string;
   fastAuth: {
     mpcRecoveryUrl: string;
     authHelperUrl: string; // TODO refactor: review by fastauth team

webpack.config.js

@@ -37,7 +37,8 @@ module.exports = {
       FIREBASE_STORAGE_BUCKET_TESTNET:      'pagoda-oboarding-dev.appspot.com',
       FIREBASE_MESSAGING_SENDER_ID_TESTNET: '116526963563',
       FIREBASE_APP_ID_TESTNET:              '1:116526963563:web:053cb0c425bf514007ca2e',
-      FIREBASE_MEASUREMENT_ID_TESTNET:      'G-HF2NBGE60S'
+      FIREBASE_MEASUREMENT_ID_TESTNET:      'G-HF2NBGE60S',
+      SENTRY_DSN:                           'https://[email protected]/4506148066164736',
     })
   ],
   devServer: {

yarn.lock

@@ -2022,6 +2022,66 @@
   resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz"
   integrity sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==
 
+"@sentry-internal/[email protected]":
+  version "7.75.1"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.75.1.tgz#978c5ec58a704c423a9b33a58ca3e3e6521725f8"
+  integrity sha512-nynV+7iVcF8k3CqhvI2K7iA8h4ovJhgYHKnXR8RDDevQOqNG2AEX9+hjCj9fZM4MhKHYFqf1od2oO9lTr38kwg==
+  dependencies:
+    "@sentry/core" "7.75.1"
+    "@sentry/types" "7.75.1"
+    "@sentry/utils" "7.75.1"
+
+"@sentry/[email protected]":
+  version "7.75.1"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.75.1.tgz#70422d26e2651443bcf15ea6bb5142774926c5ae"
+  integrity sha512-0+jPfPA5P9HVYYRQraDokGCY2NiMknSfz11dggClK4VmjvG+hOXiEyf73SFVwLFnv/hwrkWySjoIrVCX65xXQA==
+  dependencies:
+    "@sentry-internal/tracing" "7.75.1"
+    "@sentry/core" "7.75.1"
+    "@sentry/replay" "7.75.1"
+    "@sentry/types" "7.75.1"
+    "@sentry/utils" "7.75.1"
+
+"@sentry/[email protected]":
+  version "7.75.1"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.75.1.tgz#f48cc424990ee4f31541e93f2c0277bfd5be9ed3"
+  integrity sha512-Kw4KyKBxbxbh8OKO0S11Tm0gWP+6AaXXYrsq3hp8H338l/wOmIzyckmCbUrc/XJeoRqaFLJbdcCrcUEDZUvsVQ==
+  dependencies:
+    "@sentry/types" "7.75.1"
+    "@sentry/utils" "7.75.1"
+
+"@sentry/react@^7.75.1":
+  version "7.75.1"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.75.1.tgz#b2e3716e5b9c712a3eff1284378b0258345668cd"
+  integrity sha512-5zFcIor8vwQa13VRwk7yDE8U7uspj0eKpsjOcYcfSvDkiL7LW0sA6rXxvO3jwd1AKaB3EAfr1F4oIdEz8aRIkA==
+  dependencies:
+    "@sentry/browser" "7.75.1"
+    "@sentry/types" "7.75.1"
+    "@sentry/utils" "7.75.1"
+    hoist-non-react-statics "^3.3.2"
+
+"@sentry/[email protected]":
+  version "7.75.1"
+  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.75.1.tgz#7790e80f7cb4dc856f5e72f70a51febd5898e04d"
+  integrity sha512-MKQTDWNYs9QXCJ+irGX5gu8Kxdk/Ds5puhILy8+DnCoXgXuPFRMGob1Sxt8qXmbQmcGeogsx221MNTselsRS6g==
+  dependencies:
+    "@sentry-internal/tracing" "7.75.1"
+    "@sentry/core" "7.75.1"
+    "@sentry/types" "7.75.1"
+    "@sentry/utils" "7.75.1"
+
+"@sentry/[email protected]":
+  version "7.75.1"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.75.1.tgz#48b11336a0e70433d41bbe41c617dd339d4992ea"
+  integrity sha512-km+ygqgMDaFfTrbQwdhrptFqx0Oq15jZABqIoIpbaOCkCAMm+tyCqrFS8dTfaq5wpCktqWOy2qU/DOpppO99Cg==
+
+"@sentry/[email protected]":
+  version "7.75.1"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.75.1.tgz#169040ba13ff4d4ecccb7b7aa23f84724d108b97"
+  integrity sha512-QzW2eRjY20epD//9/tQ0FTNwdAL6XZi+LyJNUQIeK3NMnc5NgHrgpxId87gmFq8cNx47utH1Blub8RuMbKqiwQ==
+  dependencies:
+    "@sentry/types" "7.75.1"
+
 "@svgr/[email protected]":
   version "8.0.0"
   resolved "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz"
@@ -4697,6 +4757,13 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz"
@@ -6199,7 +6266,7 @@ react-i18next@^13.0.2:
     "@babel/runtime" "^7.22.5"
     html-parse-stringify "^3.0.1"
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==