From 4e0495f838d6ebaa0237aefaf46ac8c6c31be999 Mon Sep 17 00:00:00 2001 From: Chris Li <76067158+666lcz@users.noreply.github.com> Date: Sun, 17 Jul 2022 14:16:46 -0700 Subject: [PATCH] Explorer: set up Sentry (#3136) --- explorer/client/package.json | 4 + .../transaction-card/RecentTxCard.tsx | 2 + explorer/client/src/index.tsx | 17 +++++ .../src/pages/object-result/ObjectResult.tsx | 2 + .../transaction-result/TransactionResult.tsx | 2 + explorer/client/src/utils/envUtil.ts | 4 + explorer/client/src/utils/searchUtil.ts | 5 +- explorer/client/yarn.lock | 74 ++++++++++++++++++- 8 files changed, 107 insertions(+), 3 deletions(-) diff --git a/explorer/client/package.json b/explorer/client/package.json index a0d571f6ca7bc..0c64bf614ed81 100644 --- a/explorer/client/package.json +++ b/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 .", diff --git a/explorer/client/src/components/transaction-card/RecentTxCard.tsx b/explorer/client/src/components/transaction-card/RecentTxCard.tsx index eeb90f086b83b..f46506b4e5657 100644 --- a/explorer/client/src/components/transaction-card/RecentTxCard.tsx +++ b/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 () => { diff --git a/explorer/client/src/index.tsx b/explorer/client/src/index.tsx index 28a40806ba235..98476990f105d 100644 --- a/explorer/client/src/index.tsx +++ b/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://e4251274d1b141d7ba272103fa0f8d83@o1314142.ingest.sentry.io/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( diff --git a/explorer/client/src/pages/object-result/ObjectResult.tsx b/explorer/client/src/pages/object-result/ObjectResult.tsx index 2173b39907200..847a0d5fbc5ba 100644 --- a/explorer/client/src/pages/object-result/ObjectResult.tsx +++ b/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 ; } catch (err) { console.error("Couldn't parse data", err); + Sentry.captureException(err); return ; } } diff --git a/explorer/client/src/pages/transaction-result/TransactionResult.tsx b/explorer/client/src/pages/transaction-result/TransactionResult.tsx index 3e178c8081ae2..ffc72e7a3b80e 100644 --- a/explorer/client/src/pages/transaction-result/TransactionResult.tsx +++ b/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 ; } }; diff --git a/explorer/client/src/utils/envUtil.ts b/explorer/client/src/utils/envUtil.ts index 26caf4e0b161a..637e2caeeb282 100644 --- a/explorer/client/src/utils/envUtil.ts +++ b/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; diff --git a/explorer/client/src/utils/searchUtil.ts b/explorer/client/src/utils/searchUtil.ts index 1b0e3cd49c9d0..a4d8b1f33fcd9 100644 --- a/explorer/client/src/utils/searchUtil.ts +++ b/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; diff --git a/explorer/client/yarn.lock b/explorer/client/yarn.lock index fff166dea594a..fab22714a8537 100644 --- a/explorer/client/yarn.lock +++ b/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/browser@7.6.0": + 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/core@7.6.0": + 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/hub@7.6.0": + 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/types@7.6.0": + version "7.6.0" + resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.6.0.tgz#7352bcc5621177ceefb18733d0a6b0cdb0307822" + integrity sha512-POimbDwr9tmHSKksJTXe5VQpvjkFO4/UWUptigwqf8684rkS7Ie2BT2uyp5GD2EgYFf0BwUOWi98FTYTvUGT+Q== + +"@sentry/utils@7.6.0": + 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==