Disable sentry in development and catch reporting errors (#12321)

explorer/src/components/account/TokenAccountSection.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import * as Sentry from "@sentry/react";
 import { Account, useFetchAccountInfo } from "providers/accounts";
 import {
   TokenAccount,
@@ -15,6 +14,7 @@ import { TokenRegistry } from "tokenRegistry";
 import { useCluster } from "providers/cluster";
 import { normalizeTokenAmount } from "utils";
 import { addressLabel } from "utils/tx";
+import { reportError } from "utils/sentry";
 
 export function TokenAccountSection({
   account,
@@ -39,10 +39,8 @@ export function TokenAccountSection({
       }
     }
   } catch (err) {
-    Sentry.captureException(err, {
-      tags: {
+    reportError(err, {
       address: account.pubkey.toBase58(),
-      },
     });
   }
   return <UnknownAccountCard account={account} />;

explorer/src/components/instruction/SerumDetailsCard.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import * as Sentry from "@sentry/react";
 import { TransactionInstruction, SignatureResult } from "@solana/web3.js";
 import { InstructionCard } from "./InstructionCard";
 import { parseSerumInstructionTitle } from "utils/tx";
 import { useCluster } from "providers/cluster";
+import { reportError } from "utils/sentry";
 
 export function SerumDetailsCard({
   ix,
@@ -22,11 +22,9 @@ export function SerumDetailsCard({
   try {
     title = parseSerumInstructionTitle(ix);
   } catch (error) {
-    Sentry.captureException(error, {
-      tags: {
+    reportError(error, {
       url: url,
       signature: signature,
-      },
     });
   }
 

explorer/src/components/instruction/token/TokenDetailsCard.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import * as Sentry from "@sentry/react";
 import { coerce } from "superstruct";
 import {
   SignatureResult,
@@ -19,6 +18,7 @@ import {
   useFetchAccountInfo,
 } from "providers/accounts";
 import { normalizeTokenAmount } from "utils";
+import { reportError } from "utils/sentry";
 
 type DetailsProps = {
   tx: ParsedTransaction;
@@ -36,10 +36,8 @@ export function TokenDetailsCard(props: DetailsProps) {
     const coerced = coerce(info, IX_STRUCTS[type] as any);
     return <TokenInstruction title={title} info={coerced} {...props} />;
   } catch (err) {
-    Sentry.captureException(err, {
-      tags: {
+    reportError(err, {
       signature: props.tx.signatures[0],
-      },
     });
     return <UnknownDetailsCard {...props} />;
   }

explorer/src/index.tsx

@@ -12,10 +12,12 @@ import { AccountsProvider } from "./providers/accounts";
 import { StatsProvider } from "providers/stats";
 import { MintsProvider } from "providers/mints";
 
-Sentry.init({
+if (process.env.NODE_ENV === "production") {
+  Sentry.init({
     dsn:
       "https://5efdc15b4828434fbe949b5daed472be@o434108.ingest.sentry.io/5390542",
-});
+  });
+}
 
 ReactDOM.render(
   <Router>

explorer/src/providers/accounts/history.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import * as Sentry from "@sentry/react";
 import {
   PublicKey,
   ConfirmedSignatureInfo,
@@ -9,6 +8,7 @@ import {
 import { useCluster, Cluster } from "../cluster";
 import * as Cache from "providers/cache";
 import { ActionType, FetchStatus } from "providers/cache";
+import { reportError } from "utils/sentry";
 
 type AccountHistory = {
   fetched: ConfirmedSignatureInfo[];
@@ -104,7 +104,7 @@ async function fetchAccountHistory(
     status = FetchStatus.Fetched;
   } catch (error) {
     if (cluster !== Cluster.Custom) {
-      Sentry.captureException(error, { tags: { url } });
+      reportError(error, { url });
     }
     status = FetchStatus.FetchFailed;
   }

explorer/src/providers/accounts/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import * as Sentry from "@sentry/react";
 import { StakeAccount as StakeAccountWasm } from "solana-sdk-wasm";
 import { PublicKey, Connection, StakeProgram } from "@solana/web3.js";
 import { useCluster, Cluster } from "../cluster";
@@ -15,6 +14,7 @@ import {
 } from "validators/accounts/token";
 import * as Cache from "providers/cache";
 import { ActionType, FetchStatus } from "providers/cache";
+import { reportError } from "utils/sentry";
 export { useAccountHistory } from "./history";
 
 export type StakeProgramData = {
@@ -117,9 +117,7 @@ async function fetchAccountInfo(
             parsed,
           };
         } catch (err) {
-          Sentry.captureException(err, {
-            tags: { url, address: pubkey.toBase58() },
-          });
+          reportError(err, { url, address: pubkey.toBase58() });
           // TODO store error state in Account info
         }
       } else if ("parsed" in result.data) {
@@ -133,9 +131,7 @@ async function fetchAccountInfo(
               parsed,
             };
           } catch (err) {
-            Sentry.captureException(err, {
-              tags: { url, address: pubkey.toBase58() },
-            });
+            reportError(err, { url, address: pubkey.toBase58() });
             // TODO store error state in Account info
           }
         }
@@ -152,7 +148,7 @@ async function fetchAccountInfo(
     fetchStatus = FetchStatus.Fetched;
   } catch (error) {
     if (cluster !== Cluster.Custom) {
-      Sentry.captureException(error, { tags: { url } });
+      reportError(error, { url });
     }
     fetchStatus = FetchStatus.FetchFailed;
   }
@@ -200,9 +196,7 @@ export function useMintAccountInfo(
 
     return coerce(data.parsed.info, MintAccountInfo);
   } catch (err) {
-    Sentry.captureException(err, {
-      tags: { address },
-    });
+    reportError(err, { address });
   }
 }
 
@@ -221,9 +215,7 @@ export function useTokenAccountInfo(
 
     return coerce(data.parsed.info, TokenAccountInfo);
   } catch (err) {
-    Sentry.captureException(err, {
-      tags: { address },
-    });
+    reportError(err, { address });
   }
 }
 

explorer/src/providers/accounts/tokens.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import * as Sentry from "@sentry/react";
 import { Connection, PublicKey } from "@solana/web3.js";
 import * as Cache from "providers/cache";
 import { ActionType, FetchStatus } from "providers/cache";
 import { TokenAccountInfo } from "validators/accounts/token";
 import { useCluster, Cluster } from "../cluster";
 import { coerce } from "superstruct";
+import { reportError } from "utils/sentry";
 
 export type TokenInfoWithPubkey = {
   info: TokenAccountInfo;
@@ -75,7 +75,7 @@ async function fetchAccountTokens(
     status = FetchStatus.Fetched;
   } catch (error) {
     if (cluster !== Cluster.Custom) {
-      Sentry.captureException(error, { tags: { url } });
+      reportError(error, { url });
     }
     status = FetchStatus.FetchFailed;
   }

explorer/src/providers/cluster.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import * as Sentry from "@sentry/react";
 import { clusterApiUrl, Connection } from "@solana/web3.js";
 import { useQuery } from "../utils/url";
 import { useHistory, useLocation } from "react-router-dom";
+import { reportError } from "utils/sentry";
 
 export enum ClusterStatus {
   Connected,
@@ -184,9 +184,7 @@ async function updateCluster(
     });
   } catch (error) {
     if (cluster !== Cluster.Custom) {
-      Sentry.captureException(error, {
-        tags: { clusterUrl: clusterUrl(cluster, customUrl) },
-      });
+      reportError(error, { clusterUrl: clusterUrl(cluster, customUrl) });
     }
     dispatch({ status: ClusterStatus.Failure, cluster, customUrl });
   }

explorer/src/providers/mints/largest.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import * as Sentry from "@sentry/react";
 import { useCluster, Cluster } from "providers/cluster";
 import * as Cache from "providers/cache";
 import { ActionType, FetchStatus } from "providers/cache";
@@ -12,6 +11,7 @@ import {
 import { TokenAccountInfo, TokenAccount } from "validators/accounts/token";
 import { ParsedInfo } from "validators";
 import { coerce } from "superstruct";
+import { reportError } from "utils/sentry";
 
 type LargestAccounts = {
   largest: TokenAccountBalancePairWithOwner[];
@@ -89,7 +89,7 @@ async function fetchLargestAccounts(
             }
           } catch (error) {
             if (cluster !== Cluster.Custom) {
-              Sentry.captureException(error, { tags: { url } });
+              reportError(error, { url });
             }
           }
           return account;
@@ -100,7 +100,7 @@ async function fetchLargestAccounts(
     fetchStatus = FetchStatus.Fetched;
   } catch (error) {
     if (cluster !== Cluster.Custom) {
-      Sentry.captureException(error, { tags: { url } });
+      reportError(error, { url });
     }
     fetchStatus = FetchStatus.FetchFailed;
   }

explorer/src/providers/richList.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import * as Sentry from "@sentry/react";
 
 import { AccountBalancePair, Connection } from "@solana/web3.js";
 import { useCluster, ClusterStatus, Cluster } from "./cluster";
+import { reportError } from "utils/sentry";
 
 export enum Status {
   Idle,
@@ -72,7 +72,7 @@ async function fetch(dispatch: Dispatch, cluster: Cluster, url: string) {
     });
   } catch (err) {
     if (cluster !== Cluster.Custom) {
-      Sentry.captureException(err, { tags: { url } });
+      reportError(err, { url });
     }
     dispatch("Failed to fetch top accounts");
   }

explorer/src/providers/supply.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import * as Sentry from "@sentry/react";
 
 import { Supply, Connection } from "@solana/web3.js";
 import { useCluster, ClusterStatus, Cluster } from "./cluster";
+import { reportError } from "utils/sentry";
 
 export enum Status {
   Idle,
@@ -53,7 +53,7 @@ async function fetch(dispatch: Dispatch, cluster: Cluster, url: string) {
     });
   } catch (err) {
     if (cluster !== Cluster.Custom) {
-      Sentry.captureException(err, { tags: { url } });
+      reportError(err, { url });
     }
     dispatch("Failed to fetch supply");
   }

explorer/src/providers/transactions/details.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import * as Sentry from "@sentry/react";
 import {
   Connection,
   TransactionSignature,
@@ -8,6 +7,7 @@ import {
 import { useCluster, Cluster } from "../cluster";
 import * as Cache from "providers/cache";
 import { ActionType, FetchStatus } from "providers/cache";
+import { reportError } from "utils/sentry";
 
 export interface Details {
   transaction?: ParsedConfirmedTransaction | null;
@@ -61,7 +61,7 @@ async function fetchDetails(
     fetchStatus = FetchStatus.Fetched;
   } catch (error) {
     if (cluster !== Cluster.Custom) {
-      Sentry.captureException(error, { tags: { url } });
+      reportError(error, { url });
     }
     fetchStatus = FetchStatus.FetchFailed;
   }

explorer/src/providers/transactions/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import * as Sentry from "@sentry/react";
 import {
   TransactionSignature,
   Connection,
@@ -9,6 +8,7 @@ import { useCluster, Cluster } from "../cluster";
 import { DetailsProvider } from "./details";
 import * as Cache from "providers/cache";
 import { ActionType, FetchStatus } from "providers/cache";
+import { reportError } from "utils/sentry";
 export { useTransactionDetails } from "./details";
 
 export type Confirmations = number | "max";
@@ -80,9 +80,7 @@ export async function fetchTransactionStatus(
         blockTime = await connection.getBlockTime(value.slot);
       } catch (error) {
         if (cluster === Cluster.MainnetBeta) {
-          Sentry.captureException(error, {
-            tags: { slot: `${value.slot}` },
-          });
+          reportError(error, { slot: `${value.slot}` });
         }
       }
       let timestamp: Timestamp = blockTime !== null ? blockTime : "unavailable";
@@ -105,7 +103,7 @@ export async function fetchTransactionStatus(
     fetchStatus = FetchStatus.Fetched;
   } catch (error) {
     if (cluster !== Cluster.Custom) {
-      Sentry.captureException(error, { tags: { url } });
+      reportError(error, { url });
     }
     fetchStatus = FetchStatus.FetchFailed;
   }

explorer/src/utils/sentry.ts

@@ -0,0 +1,18 @@
+import * as Sentry from "@sentry/react";
+
+type Tags =
+  | {
+      [key: string]: string;
+    }
+  | undefined;
+
+export function reportError(err: Error, tags: Tags) {
+  console.error(err);
+  try {
+    Sentry.captureException(err, {
+      tags,
+    });
+  } catch (err) {
+    // Sentry can fail if error rate limit is reached
+  }
+}