init sentry at run time

.env.template

@@ -4,3 +4,4 @@ NEXT_PUBLIC_FOOTER_GITHUB_LINK=APP_NEXT_NEXT_PUBLIC_FOOTER_GITHUB_LINK
 NEXT_PUBLIC_FOOTER_TWITTER_LINK=APP_NEXT_NEXT_PUBLIC_FOOTER_TWITTER_LINK
 NEXT_PUBLIC_FOOTER_TELEGRAM_LINK=APP_NEXT_NEXT_PUBLIC_FOOTER_TELEGRAM_LINK
 NEXT_PUBLIC_FOOTER_STAKING_LINK=APP_NEXT_NEXT_PUBLIC_FOOTER_STAKING_LINK
+NEXT_PUBLIC_SENTRY_DSN=APP_NEXT_NEXT_PUBLIC_SENTRY_DSN

configs/sentry/nextjs.ts

@@ -0,0 +1,11 @@
+import type { NextjsOptions } from '@sentry/nextjs/types/utils/nextjsOptions';
+
+const config: NextjsOptions = {
+  environment: process.env.VERCEL_ENV || process.env.NODE_ENV,
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  // We recommend adjusting this value in production, or using tracesSampler
+  // for finer control
+  tracesSampleRate: 1.0,
+};
+
+export default config;

configs/sentry/react.ts

@@ -0,0 +1,13 @@
+import type * as Sentry from '@sentry/react';
+import { BrowserTracing } from '@sentry/tracing';
+
+const config: Sentry.BrowserOptions = {
+  environment: process.env.VERCEL_ENV || process.env.NODE_ENV,
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  integrations: [ new BrowserTracing() ],
+  // We recommend adjusting this value in production, or using tracesSampler
+  // for finer control
+  tracesSampleRate: 1.0,
+};
+
+export default config;

lib/api/getUrlWithNetwork.ts

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/nextjs';
+// import * as Sentry from '@sentry/nextjs';
 import type { NextApiRequest } from 'next';
 
 import * as cookies from 'lib/cookies';
@@ -7,9 +7,11 @@ export default function getUrlWithNetwork(_req: NextApiRequest, path: string) {
   const networkType = _req.cookies[cookies.NAMES.NETWORK_TYPE];
   const networkSubType = _req.cookies[cookies.NAMES.NETWORK_SUB_TYPE];
 
-  if (!networkType) {
-    Sentry.captureException(new Error('Incorrect network'), { extra: { networkType, networkSubType } });
-  }
+  // if (!networkType) {
+  // TODO setup sentry for NodeJS
+  // we probably do not need to if we will do api request from client directly
+  //   Sentry.captureException(new Error('Incorrect network'), { extra: { networkType, networkSubType } });
+  // }
 
   return `/${ networkType }${ networkSubType ? '/' + networkSubType : '' }/${ path }`;
 }

lib/api/handler.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
 import fetchFactory from 'lib/api/fetch';
@@ -42,5 +41,5 @@ export default function createHandler(getUrl: (_req: NextApiRequest) => string,
     res.status(500).json(responseError);
   };
 
-  return withSentry(handler);
+  return handler;
 }

lib/hooks/useFetch.tsx

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/nextjs';
+import * as Sentry from '@sentry/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
@@ -29,6 +29,12 @@ export default function useFetch() {
 
     return fetch(path, reqParams).then(response => {
       if (!response.ok) {
+        const error = {
+          status: response.status,
+          statusText: response.statusText,
+        };
+        Sentry.captureException(new Error('Client fetch failed'), { extra: error, tags: { source: 'fetch' } });
+
         return response.json().then(
           (jsonError) => Promise.reject({
             error: jsonError as Error,
@@ -36,12 +42,6 @@ export default function useFetch() {
             statusText: response.statusText,
           }),
           () => {
-            const error = {
-              status: response.status,
-              statusText: response.statusText,
-            };
-            Sentry.captureException(new Error('Client fetch failed'), { extra: error, tags: { source: 'fetch' } });
-
             return Promise.reject(error);
           },
         );

next.config.js

@@ -1,4 +1,3 @@
-const { withSentryConfig } = require('@sentry/nextjs');
 const withReactSvg = require('next-react-svg');
 const path = require('path');
 
@@ -27,24 +26,6 @@ const moduleExports = {
   redirects,
   headers,
   output: 'standalone',
-  sentry: {
-    hideSourceMaps: true,
-  },
 };
 
-const sentryWebpackPluginOptions = {
-  // Additional config options for the Sentry Webpack plugin. Keep in mind that
-  // the following options are set automatically, and overriding them is not
-  // recommended:
-  //   release, url, org, project, authToken, configFile, stripPrefix,
-  //   urlPrefix, include, ignore
-
-  silent: true, // Suppresses all logs
-  // For all available options, see:
-  // https://github.com/getsentry/sentry-webpack-plugin#options.
-  deploy: {
-    env: process.env.VERCEL_ENV || process.env.NODE_ENV,
-  },
-};
-
-module.exports = withReactSvg(withSentryConfig(moduleExports, sentryWebpackPluginOptions));
+module.exports = withReactSvg(moduleExports);

package.json

@@ -21,6 +21,8 @@
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@sentry/nextjs": "^7.12.1",
+    "@sentry/react": "^7.13.0",
+    "@sentry/tracing": "^7.13.0",
     "@tanstack/react-query": "^4.0.10",
     "@tanstack/react-query-devtools": "^4.0.10",
     "@types/react-scroll": "^1.8.4",

pages/_app.tsx

@@ -1,6 +1,8 @@
 import { ChakraProvider } from '@chakra-ui/react';
+import * as Sentry from '@sentry/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import sentryConfig from 'configs/sentry/react';
 import type { AppProps } from 'next/app';
 import React, { useState } from 'react';
 
@@ -8,6 +10,11 @@ import type { ErrorType } from 'lib/hooks/useFetch';
 import theme from 'theme';
 
 function MyApp({ Component, pageProps }: AppProps) {
+  React.useEffect(() => {
+    // gotta init sentry in browser
+    Sentry.init(sentryConfig);
+  }, []);
+
   const [ queryClient ] = useState(() => new QueryClient({
     defaultOptions: {
       queries: {

pages/_error.tsx

@@ -17,6 +17,7 @@
  */
 
 import * as Sentry from '@sentry/nextjs';
+import sentryConfig from 'configs/sentry/nextjs';
 import type { NextPageContext } from 'next';
 import NextErrorComponent from 'next/error';
 import React from 'react';
@@ -34,6 +35,8 @@ const CustomErrorComponent = (props: { statusCode: number }) => {
 };
 
 CustomErrorComponent.getInitialProps = async(contextData: ContextOrProps) => {
+  Sentry.init(sentryConfig);
+
   // In case this is running in a serverless function, await this in order to give Sentry
   // time to send the error before the lambda exits
   await Sentry.captureUnderscoreErrorException(contextData);

sentry.client.config.js

@@ -1,19 +0,0 @@
-// This file configures the initialization of Sentry on the browser.
-// The config you add here will be used whenever a page is visited.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from '@sentry/nextjs';
-
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
-const ENV = process.env.NEXT_PUBLIC_VERCEL_ENV || process.env.NODE_ENV;
-
-Sentry.init({
-  environment: ENV,
-  dsn: SENTRY_DSN,
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 1.0,
-  // ...
-  // Note: if you want to override the automatic release value, do not set a
-  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-  // that it will also get attached to your source maps
-});

sentry.properties

@@ -1,4 +0,0 @@
-defaults.url=https://sentry.io/
-defaults.org=block-scout
-defaults.project=new-ui
-cli.executable=../../.npm/_npx/a8388072043b4cbc/node_modules/@sentry/cli/bin/sentry-cli

sentry.server.config.js

@@ -1,19 +0,0 @@
-// This file configures the initialization of Sentry on the server.
-// The config you add here will be used whenever the server handles a request.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from '@sentry/nextjs';
-
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
-const ENV = process.env.VERCEL_ENV || process.env.NODE_ENV;
-
-Sentry.init({
-  environment: ENV,
-  dsn: SENTRY_DSN,
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 1.0,
-  // ...
-  // Note: if you want to override the automatic release value, do not set a
-  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-  // that it will also get attached to your source maps
-});

ui/pages/Home.tsx

@@ -1,4 +1,5 @@
 import { VStack, Textarea, Button, Alert, AlertTitle, AlertDescription, Link, Code } from '@chakra-ui/react';
+import * as Sentry from '@sentry/react';
 import { useRouter } from 'next/router';
 import type { ChangeEvent } from 'react';
 import React from 'react';
@@ -22,6 +23,10 @@ const Home = () => {
     setFormVisibility(Boolean(!token && selectedNetwork?.isAccountSupported));
   }, [ selectedNetwork?.isAccountSupported ]);
 
+  const checkSentry = React.useCallback(() => {
+    Sentry.captureException(new Error('Test error'), { extra: { foo: 'bar' }, tags: { source: 'test' } });
+  }, []);
+
   const handleTokenChange = React.useCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
     setToken(event.target.value);
   }, []);
@@ -50,6 +55,7 @@ const Home = () => {
         <PageTitle text={
           `Home Page for ${ selectedNetwork?.name } network`
         }/>
+        <Button colorScheme="red" onClick={ checkSentry }>Check Sentry</Button>
         { /* will be deleted when we move to new CI */ }
         { isFormVisible && (
           <>

yarn.lock

@@ -1502,6 +1502,16 @@
     "@sentry/utils" "7.12.1"
     tslib "^1.9.3"
 
+"@sentry/[email protected]":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.13.0.tgz#883b8598c8a0c33af246242e7172e39306dc564a"
+  integrity sha512-WbgClHPYe8TKsdVVbuzd6alxwh3maFQNuljMkSTnYvPx2P+NT0wHljTs37D39FGfSmAwaqn7D/1ZHAtC+6mWxA==
+  dependencies:
+    "@sentry/core" "7.13.0"
+    "@sentry/types" "7.13.0"
+    "@sentry/utils" "7.13.0"
+    tslib "^1.9.3"
+
 "@sentry/cli@^1.74.4":
   version "1.74.5"
   resolved "https://registry.yarnpkg.com/@sentry/cli/-/cli-1.74.5.tgz#4a5c622913087c9ab6f82994da9a7526423779b8"
@@ -1525,6 +1535,16 @@
     "@sentry/utils" "7.12.1"
     tslib "^1.9.3"
 
+"@sentry/[email protected]":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.13.0.tgz#65597d71f8bfa1186f34009803e03ca9edb3adee"
+  integrity sha512-hB46fklmKrSDMEvZOF8qBHhys7PONBFyxQtbNDZUlv/kabs4gF3VEg1ftCaXnjx4lLNlsUl/ScFdM6194RvISg==
+  dependencies:
+    "@sentry/hub" "7.13.0"
+    "@sentry/types" "7.13.0"
+    "@sentry/utils" "7.13.0"
+    tslib "^1.9.3"
+
 "@sentry/[email protected]":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-7.12.1.tgz#dffad40cd2b8f44df2d5f20a89df87879cbbf1c3"
@@ -1534,6 +1554,15 @@
     "@sentry/utils" "7.12.1"
     tslib "^1.9.3"
 
+"@sentry/[email protected]":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-7.13.0.tgz#752068e528cfb277ed154bc94e311cad50ef792e"
+  integrity sha512-88/GsD1BoyrBwRKJCmVHZtSH5rizOsImUHWEXc1AOa1aR8nanfn56JdAbd6tC55pA+nT4R4H4vN/PrUaomTbtg==
+  dependencies:
+    "@sentry/types" "7.13.0"
+    "@sentry/utils" "7.13.0"
+    tslib "^1.9.3"
+
 "@sentry/[email protected]":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.12.1.tgz#da1dbc5d851f2fc9413883812c436a1540a5b27a"
@@ -1590,6 +1619,17 @@
     hoist-non-react-statics "^3.3.2"
     tslib "^1.9.3"
 
+"@sentry/react@^7.13.0":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.13.0.tgz#64fa5a2b944c977f75626c6208afa3478c13714c"
+  integrity sha512-ulvBmMiwt+4RXwnDkP9qNr7rMJIFE4QXuNxho5pIqWEU9q2656CoL5kau9f2TQQEBxNc9dR4QmUdGyzuEaYPIQ==
+  dependencies:
+    "@sentry/browser" "7.13.0"
+    "@sentry/types" "7.13.0"
+    "@sentry/utils" "7.13.0"
+    hoist-non-react-statics "^3.3.2"
+    tslib "^1.9.3"
+
 "@sentry/[email protected]":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.12.1.tgz#9f92985f152054ac90b6ec83a33c44e8084a008e"
@@ -1600,11 +1640,26 @@
     "@sentry/utils" "7.12.1"
     tslib "^1.9.3"
 
+"@sentry/tracing@^7.13.0":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.13.0.tgz#521dc021dab78e37e29b0f90b01cb444337adfc4"
+  integrity sha512-/MKSd25rGv6Pc0FPBLXJifkfvSaYVPA8XUOLzVeDN0gl07h8AXli4qG9amTh/4Wb5h4dFpbcscOvW2VC+pxkIA==
+  dependencies:
+    "@sentry/hub" "7.13.0"
+    "@sentry/types" "7.13.0"
+    "@sentry/utils" "7.13.0"
+    tslib "^1.9.3"
+
 "@sentry/[email protected]":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.12.1.tgz#eff76d938f9effc62a2ec76cd5c3f04de37f5c15"
   integrity sha512-VGZs39SZgMcCGv7H0VyFy1LEFGsnFZH590JUopmz6nG63EpeYQ2xzhIoPNAiLKbyUvBEwukn+faCg3u3MGqhgQ==
 
+"@sentry/[email protected]":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.13.0.tgz#398e33e5c92ea0ce91e2c86e3ab003fe00c471a2"
+  integrity sha512-ttckM1XaeyHRLMdr79wmGA5PFbTGx2jio9DCD/mkEpSfk6OGfqfC7gpwy7BNstDH/VKyQj/lDCJPnwvWqARMoQ==
+
 "@sentry/[email protected]":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.12.1.tgz#fcf80fdc332d0bd288e21b13efc7a2f0d604f75a"
@@ -1613,6 +1668,14 @@
     "@sentry/types" "7.12.1"
     tslib "^1.9.3"
 
+"@sentry/[email protected]":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.13.0.tgz#0d47a9278806ece78ba3a83c7dbebce817462759"
+  integrity sha512-jnR85LgRLSk7IQe2OhKOPMY4fasJCNQNW0iCXsH+S2R1qnsF+N4ksNkQ+7JyyM9E7F03YpI2qd76bKY0VIn5iA==
+  dependencies:
+    "@sentry/types" "7.13.0"
+    tslib "^1.9.3"
+
 "@sentry/[email protected]":
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/@sentry/webpack-plugin/-/webpack-plugin-1.19.0.tgz#2b134318f1552ba7f3e3f9c83c71a202095f7a44"