Explorer: set up Sentry (MystenLabs#3136)

explorer/client/package.json

@@ -31,6 +31,8 @@
     "dependencies": {
         "@mysten/sui.js": "file:../../sdk/typescript",
         "@tanstack/react-table": "^8.1.4",
+        "@sentry/react": "^7.6.0",
+        "@sentry/tracing": "^7.6.0",
         "bn.js": "^5.2.0",
         "classnames": "^2.3.1",
         "prism-react-renderer": "^1.3.5",
@@ -50,6 +52,8 @@
         "start:local": "REACT_APP_DATA=local PORT=8080 react-scripts start",
         "test": "npx start-server-and-test 'yarn start:static' 8080 'react-scripts test --detectOpenHandles --watchAll=false'",
         "build": "react-scripts build",
+        "build:staging": "REACT_APP_DATA=staging react-scripts build",
+        "build:prod": "REACT_APP_DATA=prod react-scripts build",
         "eslint:check": "eslint --max-warnings=0 .eslintrc.js \"./src/**/*.{js,jsx,ts,tsx}\"",
         "eslint:fix": "yarn eslint:check --fix",
         "prettier:check": "prettier -c --ignore-unknown .",

explorer/client/src/components/transaction-card/RecentTxCard.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import * as Sentry from '@sentry/react';
 import cl from 'classnames';
 import { useEffect, useState, useContext } from 'react';
 import { useSearchParams, Link } from 'react-router-dom';
@@ -295,6 +296,7 @@ function LatestTxCardAPI({ ...data }: RecentTx) {
                     'Encountered error when fetching recent transactions',
                     err
                 );
+                Sentry.captureException(err);
             });
 
         return () => {

explorer/client/src/index.tsx

@@ -1,15 +1,32 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import * as Sentry from '@sentry/react';
+import { BrowserTracing } from '@sentry/tracing';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import App from './app/App';
+import { CURRENT_ENV, IS_PROD_ENV, IS_STAGING_ENV } from './utils/envUtil';
 import reportWebVitals from './utils/reportWebVitals';
 
 import './index.css';
 
+if (IS_STAGING_ENV || IS_PROD_ENV) {
+    Sentry.init({
+        dsn: 'https://[email protected]/6564988',
+        integrations: [new BrowserTracing()],
+
+        // Set tracesSampleRate to 1.0 to capture 100%
+        // of transactions for performance monitoring.
+        // TODO: adjust this to a lower value once the Explorer
+        // has more traffic
+        tracesSampleRate: 1.0,
+        environment: CURRENT_ENV,
+    });
+}
+
 ReactDOM.render(
     <React.StrictMode>
         <Router>

explorer/client/src/pages/object-result/ObjectResult.tsx

@@ -5,6 +5,7 @@ import {
     type TransactionEffectsResponse,
     getTransactionSender,
 } from '@mysten/sui.js';
+import * as Sentry from '@sentry/react';
 import React, { useEffect, useState, useContext } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 
@@ -116,6 +117,7 @@ const ObjectResultStatic = ({ objID }: { objID: string }): JSX.Element => {
             return <ObjectLoaded data={translate(data)} />;
         } catch (err) {
             console.error("Couldn't parse data", err);
+            Sentry.captureException(err);
             return <Fail objID={objID} />;
         }
     }

explorer/client/src/pages/transaction-result/TransactionResult.tsx

@@ -6,6 +6,7 @@ import {
     getTotalGasUsed,
     getExecutionStatusError,
 } from '@mysten/sui.js';
+import * as Sentry from '@sentry/react';
 import { useEffect, useState, useContext } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 
@@ -164,6 +165,7 @@ const TransactionResultStatic = ({ id }: { id: string }) => {
         );
     } catch (error) {
         console.error(error);
+        Sentry.captureException(error);
         return <FailedToGetTxResults id={id} />;
     }
 };

explorer/client/src/utils/envUtil.ts

@@ -3,3 +3,7 @@
 
 export const IS_STATIC_ENV = process.env.REACT_APP_DATA === 'static';
 export const IS_LOCAL_ENV = process.env.REACT_APP_DATA === 'local';
+export const IS_STAGING_ENV = process.env.REACT_APP_DATA === 'staging';
+export const IS_PROD_ENV = process.env.REACT_APP_DATA === 'prod';
+
+export const CURRENT_ENV = process.env.REACT_APP_DATA;

explorer/client/src/utils/searchUtil.ts

@@ -1,5 +1,8 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
+
+import { IS_STATIC_ENV } from './envUtil';
+
 const deduplicate = (results: [number, string][] | undefined) =>
     results
         ? results
@@ -10,7 +13,7 @@ const deduplicate = (results: [number, string][] | undefined) =>
 let navigateWithUnknown: Function;
 let overrideTypeChecks = false;
 
-if (process.env.REACT_APP_DATA === 'static') {
+if (IS_STATIC_ENV) {
     import('./static/searchUtil').then((uf) => {
         navigateWithUnknown = uf.navigateWithUnknown;
         overrideTypeChecks = true;

explorer/client/yarn.lock

@@ -1542,6 +1542,69 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz#6801033be7ff87a6b7cadaf5b337c9f366a3c4b0"
   integrity sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==
 
+"@sentry/[email protected]":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.6.0.tgz#54bcd52747c40b2656d62d53541037a5724f3296"
+  integrity sha512-1gdvV8RtTnNFyc790t49MAgFuHAP43NEZvdQOMw5KFnDwSGYFqfBtvJ8tUm125UPbi2fghBryO9M1gfIWboKUg==
+  dependencies:
+    "@sentry/core" "7.6.0"
+    "@sentry/types" "7.6.0"
+    "@sentry/utils" "7.6.0"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.6.0.tgz#5e5efd54af7b63957ac4d446fb5a69af33da3e51"
+  integrity sha512-vXIuUZbHVSAXh2xZ3NyXYXqVvVQSbGEpgtQxLutwocvD88JFK6aZqO+WQG69GY1b1fKSeE9faEDDS6WGAi46mQ==
+  dependencies:
+    "@sentry/hub" "7.6.0"
+    "@sentry/types" "7.6.0"
+    "@sentry/utils" "7.6.0"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-7.6.0.tgz#69a0d11e50ee61f3f93665948c4acbe56a9ce676"
+  integrity sha512-TbieNZInpnR5STXykT1zXoKVAsm8ju1RZyzMqYR8nzURbjlMVVEzFRglNY1Ap5MRkbEuYpAc6zUvgLQe8b6Q3w==
+  dependencies:
+    "@sentry/types" "7.6.0"
+    "@sentry/utils" "7.6.0"
+    tslib "^1.9.3"
+
+"@sentry/react@^7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.6.0.tgz#349596f64da8eb9370c19dde0febfd2dbaeef682"
+  integrity sha512-R5xBZUxSjNLpeq1dlW22JudX5x1FhzfazSVEQ9TXJEZM2ufC1XP/JkO7bRJFad1JjIzSWqlez8Wm13EnbV9wRg==
+  dependencies:
+    "@sentry/browser" "7.6.0"
+    "@sentry/types" "7.6.0"
+    "@sentry/utils" "7.6.0"
+    hoist-non-react-statics "^3.3.2"
+    tslib "^1.9.3"
+
+"@sentry/tracing@^7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.6.0.tgz#2b34992e7a003c40393a4aab4b917db2712a1586"
+  integrity sha512-ydlIk8FpuXiQm3Y0cLwXMOUYv5UtniP8ylWw3ix0sF5sTpJWSaC/g8P8yrzkYV+pm28kde5qfE3nocGhpwxZcA==
+  dependencies:
+    "@sentry/hub" "7.6.0"
+    "@sentry/types" "7.6.0"
+    "@sentry/utils" "7.6.0"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.6.0.tgz#7352bcc5621177ceefb18733d0a6b0cdb0307822"
+  integrity sha512-POimbDwr9tmHSKksJTXe5VQpvjkFO4/UWUptigwqf8684rkS7Ie2BT2uyp5GD2EgYFf0BwUOWi98FTYTvUGT+Q==
+
+"@sentry/[email protected]":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.6.0.tgz#50b44fd9b06686a358ef2c7c0fd3b80970e1f9ee"
+  integrity sha512-p0Byi6hgawp/sBMY88RY8OmkiAR2jxbjnl8gSo+y3YEu+KeXBUxXMBsI7YeW+1lSb6z8DGhUAOBszTeI4wAr2w==
+  dependencies:
+    "@sentry/types" "7.6.0"
+    tslib "^1.9.3"
+
 "@sideway/address@^4.1.3":
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
@@ -5069,6 +5132,13 @@ history@^5.2.0:
   dependencies:
     "@babel/runtime" "^7.7.6"
 
+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"
+
 homedir-polyfill@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8"
@@ -8076,7 +8146,7 @@ react-ga4@^1.4.1:
   resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-1.4.1.tgz#6ee2a2db115ed235b2f2092bc746b4eeeca9e206"
   integrity sha512-ioBMEIxd4ePw4YtaloTUgqhQGqz5ebDdC4slEpLgy2sLx1LuZBC9iYCwDymTXzcntw6K1dHX183ulP32nNdG7w==
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9432,7 +9502,7 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.8.1:
+tslib@^1.8.1, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==