Merge pull request #2528 from blockscout/tom2drum/rollbar-fix

Release v1.37.4

lib/rollbar/index.tsx

@@ -6,7 +6,7 @@ import config from 'configs/app';
 import { ABSENT_PARAM_ERROR_MESSAGE } from 'lib/errors/throwOnAbsentParamError';
 import { RESOURCE_LOAD_ERROR_MESSAGE } from 'lib/errors/throwOnResourceLoadError';
 
-import { isBot, isHeadlessBrowser, isNextJsChunkError, getRequestInfo } from './utils';
+import { isBot, isHeadlessBrowser, isNextJsChunkError, getRequestInfo, getExceptionClass } from './utils';
 
 const feature = config.features.rollbar;
 
@@ -37,16 +37,23 @@ export const clientConfig: Configuration | undefined = feature.isEnabled ? {
       return true;
     }
 
+    const exceptionClass = getExceptionClass(item);
+    const IGNORED_EXCEPTION_CLASSES = [
+      // these are React errors - "NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."
+      // they could be caused by browser extensions
+      // one of the examples - https://github.com/facebook/react/issues/11538
+      // we can ignore them for now
+      'NotFoundError',
+    ];
+
+    if (exceptionClass && IGNORED_EXCEPTION_CLASSES.includes(exceptionClass)) {
+      return true;
+    }
+
     return false;
   },
   hostSafeList: [ config.app.host ].filter(Boolean),
   ignoredMessages: [
-    // these are React errors - "NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."
-    // they could be caused by browser extensions
-    // one of the examples - https://github.com/facebook/react/issues/11538
-    // we can ignore them for now
-    'NotFoundError',
-
     // these are errors that we throw on when make a call to the API
     RESOURCE_LOAD_ERROR_MESSAGE,
     ABSENT_PARAM_ERROR_MESSAGE,

lib/rollbar/utils.ts

+import _get from 'lodash/get';
 import type { Dictionary } from 'rollbar';
 
 export function isBot(userAgent: string | undefined) {
@@ -56,3 +57,9 @@ export function getRequestInfo(item: Dictionary): { url: string } | undefined {
   }
   return { url: item.request.url };
 }
+
+export function getExceptionClass(item: Dictionary) {
+  const exceptionClass = _get(item, 'body.trace.exception.class');
+
+  return typeof exceptionClass === 'string' ? exceptionClass : undefined;
+}

public/static/badges.svg

@@ -23,7 +23,7 @@
   <path d="M223.424 78.967a11.355 11.355 0 0 0 .001 0h-.001Z" fill="url(#h)"/>
   <path d="M195.759 63.318c.861 1.087.532.618 1.771 1.334l20.691 11.96a11.175 11.175 0 0 0 11.19 0l1.637-.945c-.715-4.798-2.488-7.243-4.079-9.436-1.74-2.398-3.261-4.495-2.941-9.04.392-5.57-.354-8.481-.999-11.003-.239-.934-.465-1.815-.614-2.758-2.56-5.59-3.746-10.222-4.126-14.142L235.64 25.8l-17.402-1.72c.186-2.314.635-4.337 1.15-6.154l.022-.08-5.809 2.608-2.722 3.012-2.008 5.822-.903 6.423c-1.486 1.522-2.857 3.095-4.472 5.813l-1.935 2.687c-.129.218-1.214 2.407-2.301 4.603h-.001l-.001.004-.001.002c-1.095 2.21-2.192 4.426-2.318 4.636-.367.612-1.181 3.51-1.921 6.141v.001l-.001.004-.001.003c-.231.822.943 3.02.743 3.713Z" fill="url(#i)"/>
   <path d="M214.861 30.622c1.5-3.43 5.354-3.49 8.579-3.646 3.225.156 7.081.06 8.58 3.646 1.305 3.123-.869 9.783-2.589 11.45-2.006 1.944-4.492 1.56-5.991 1.56-1.5 0-3.984.384-5.99-1.56-1.721-1.667-3.942-8.354-2.589-11.45Z" fill="#D47B3A"/>
-  <path d="M230.164 36.42s2.765 1.587 4.98.358m-5.152 1.342s2.218 1.831 4.084 1.55m-16.766-3.25s-2.765 1.587-4.98.358m5.154 1.342s-1.966 1.831-3.832 1.55m14.068-1.755c-.883 1.534-4.037 1.943-4.037-1.125v-1.739M219.645 37.915c.883 1.534 4.038 1.943 4.038-1.125v-1.739" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M230.164 36.42s2.765 1.587 4.98.358m-5.152 1.342s2.218 1.831 4.084 1.55m-16.766-3.25s-2.765 1.587-4.98.358m5.154 1.342s-1.966 1.831-3.832 1.55m14.068-1.755c-.883 1.534-4.037 1.943-4.037-1.125v-1.739m-4.038 2.864c.883 1.534 4.038 1.943 4.038-1.125v-1.739" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
   <path d="M217.471 32.91c.291-.261 3.192 1.19 3.086 1.728-.107.537-1.164 1.045-2.147.372-.983-.674-1.23-1.839-.939-2.1Zm12.15-.035c-.297-.267-3.261 1.217-3.152 1.765.109.549 1.189 1.068 2.193.38 1.004-.688 1.256-1.878.959-2.145Z" fill="#562E11"/>
   <path fill-rule="evenodd" clip-rule="evenodd" d="m250.988 53.697-.11-.063.452 2.944c-3.234-9.948-9.11-17.306-11.206-19.93a31.059 31.059 0 0 1-.619-.789l-.005-.007-.059-.08-.073-.1a.323.323 0 0 1-.061-.163c-.649-7.64-2.675-12.064-5.37-14.584-2.691-2.516-6.106-3.188-9.666-3.188-2.571 0-6.551.291-9.885 2.635-3.311 2.328-6.053 6.733-6.053 15.11a.321.321 0 0 1-.088.222c-1.73 1.822-9.289 10.593-12.68 22.383l.255-2.913c3.651-10.361 10.11-17.943 11.868-19.82.028-8.449 2.82-13.044 6.327-15.51 3.504-2.463 7.654-2.752 10.256-2.752 3.632 0 7.243.684 10.107 3.362 2.848 2.664 4.9 7.248 5.564 14.91l.082.111v.002c.125.169.331.426.603.766 1.89 2.364 6.985 8.737 10.361 17.454Z" fill="#562E11"/>
   <ellipse cx="234.613" cy="28.595" rx="2.042" ry="2.58" fill="#333" stroke="#000" stroke-width=".645"/>
@@ -173,7 +173,7 @@
   <path d="M101.522 61.915a11.168 11.168 0 0 0 3.168 2.737l20.692 11.96a11.175 11.175 0 0 0 11.19 0l1.637-.945c-.715-4.798-2.489-7.243-4.08-9.436-1.739-2.398-3.261-4.495-2.941-9.04.392-5.57-.353-8.481-.999-11.003-.239-.934-.464-1.815-.613-2.758-2.56-5.59-3.746-10.222-4.126-14.142L142.8 25.8l-17.402-1.72c.187-2.314.636-4.337 1.15-6.154l.023-.08-5.809 2.608-2.723 3.012-2.007 5.822-.904 6.423c-1.485 1.522-2.856 3.095-4.471 5.813l-1.935 2.687c-.129.218-1.214 2.407-2.301 4.603h-.001l-.002.004v.002c-1.095 2.21-2.193 4.426-2.319 4.636-.367.612-1.181 3.51-1.92 6.141v.001l-.001.004-.001.003c-.231.822-.455 1.618-.655 2.31Z" fill="url(#H)"/>
   <path d="M101.522 61.916a11.169 11.169 0 0 0 3.168 2.736l8.644 4.996c3.337-2.408 5.6-7.084 5.6-12.458 0-7.241-4.109-13.216-9.417-14.082l-.794 1.103c-.13.217-1.214 2.407-2.302 4.602v.001c-1.096 2.213-2.195 4.432-2.321 4.642-.367.611-1.181 3.51-1.92 6.14v.001l-.001.003c-.232.825-.456 1.622-.657 2.316Zm.297 1.618.001.002c.721.713 1.538 1.34 2.438 1.86l8.267 4.78.001-.001-8.266-4.778a12.03 12.03 0 0 1-2.441-1.863Z" fill="#AE5F25"/>
   <path d="M122.08 30.622c1.5-3.43 5.354-3.49 8.579-3.646 3.225.156 7.081.06 8.58 3.646 1.305 3.123-.868 9.783-2.589 11.45-2.006 1.944-4.491 1.56-5.991 1.56-1.499 0-3.984.384-5.99-1.56-1.72-1.667-3.942-8.354-2.589-11.45Z" fill="#D47B3A"/>
-  <path d="M137.383 36.42s2.765 1.587 4.981.358m-5.153 1.342s2.218 1.831 4.084 1.55m-16.766-3.25s-2.765 1.587-4.98.358m5.154 1.342s-1.965 1.831-3.832 1.55m14.069-1.755c-.884 1.534-4.038 1.943-4.038-1.125v-1.739M126.864 37.915c.884 1.534 4.038 1.943 4.038-1.125v-1.739" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M137.383 36.42s2.765 1.587 4.981.358m-5.153 1.342s2.218 1.831 4.084 1.55m-16.766-3.25s-2.765 1.587-4.98.358m5.154 1.342s-1.965 1.831-3.832 1.55m14.069-1.755c-.884 1.534-4.038 1.943-4.038-1.125v-1.739m-4.038 2.864c.884 1.534 4.038 1.943 4.038-1.125v-1.739" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
   <path d="M124.69 32.91c.291-.261 3.192 1.19 3.086 1.728-.107.537-1.164 1.045-2.147.372-.983-.674-1.23-1.839-.939-2.1Zm12.15-.035c-.297-.267-3.26 1.217-3.152 1.765.109.549 1.189 1.068 2.193.38 1.004-.688 1.257-1.878.959-2.145Z" fill="#562E11"/>
   <path d="M160.039 62.385c.185-.21.363-.425.531-.648-2.552-12.772-10.292-22.452-12.725-25.494a31.1 31.1 0 0 1-.602-.766v-.001h-.001l-.082-.112c-.664-7.662-2.715-12.246-5.564-14.91-2.863-2.678-6.474-3.361-10.106-3.361-2.602 0-6.752.288-10.256 2.751-3.507 2.466-6.299 7.061-6.327 15.51-2.103 2.245-10.937 12.66-13.638 26.229.167.228.344.45.529.666 2.57-13.853 11.738-24.515 13.665-26.545a.322.322 0 0 0 .089-.222c0-8.377 2.742-12.782 6.053-15.11 3.334-2.344 7.313-2.634 9.885-2.634 3.56 0 6.975.67 9.666 3.187 2.694 2.52 4.72 6.944 5.37 14.584.005.06.026.116.061.164l.073.1.059.08.004.005.001.001c.13.176.341.441.619.79 2.485 3.111 10.289 12.883 12.696 25.736Zm-58.979.325c.171.203.348.401.533.593l-.001.002a11.91 11.91 0 0 1-.532-.593v-.003Z" fill="#562E11"/>
   <ellipse cx="141.832" cy="28.595" rx="2.042" ry="2.58" fill="#333" stroke="#000" stroke-width=".645"/>

ui/shared/AppError/AppErrorBoundary.tsx

@@ -2,6 +2,7 @@ import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import getErrorCauseStatusCode from 'lib/errors/getErrorCauseStatusCode';
+import getErrorObjStatusCode from 'lib/errors/getErrorObjStatusCode';
 import { useRollbar } from 'lib/rollbar';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 
@@ -26,7 +27,7 @@ const AppErrorBoundary = ({ className, children, Container }: Props) => {
   }, [ className, Container ]);
 
   const handleError = React.useCallback((error: Error) => {
-    const statusCode = getErrorCauseStatusCode(error);
+    const statusCode = getErrorCauseStatusCode(error) || getErrorObjStatusCode(error);
     if (statusCode || !rollbar) {
       // For now, we are not interested in logging errors from the API.
       // If an error from a resource should be logged, please consider passing "logError: true" to the useApiQuery or useApiFetch hook.

ui/shared/reCaptcha/useReCaptcha.tsx

@@ -7,10 +7,10 @@ export default function useReCaptcha() {
 
   const [ isOpen, setIsOpen ] = React.useState(false);
 
-  const executeAsync = React.useCallback(async() => {
+  const executeAsync: () => Promise<string | null> = React.useCallback(async() => {
     setIsOpen(true);
     const tokenPromise = ref.current?.executeAsync() || Promise.reject(new Error('Unable to execute ReCaptcha'));
-    const modalOpenPromise = new Promise<void>((resolve, reject) => {
+    const modalOpenPromise = new Promise<null>((resolve, reject) => {
       rejectCb.current = reject;
     });
 

ui/snippets/auth/screens/AuthModalScreenConnectWallet.tsx

@@ -5,6 +5,8 @@ import type { ScreenSuccess } from '../types';
 import type { UserInfo } from 'types/api/account';
 
 import type * as mixpanel from 'lib/mixpanel';
+import ReCaptcha from 'ui/shared/reCaptcha/ReCaptcha';
+import useReCaptcha from 'ui/shared/reCaptcha/useReCaptcha';
 
 import useSignInWithWallet from '../useSignInWithWallet';
 
@@ -17,6 +19,7 @@ interface Props {
 
 const AuthModalScreenConnectWallet = ({ onSuccess, onError, isAuth, source }: Props) => {
   const isStartedRef = React.useRef(false);
+  const recaptcha = useReCaptcha();
 
   const handleSignInSuccess = React.useCallback(({ address, profile }: { address: string; profile: UserInfo }) => {
     onSuccess({ type: 'success_wallet', address, isAuth, profile });
@@ -26,7 +29,13 @@ const AuthModalScreenConnectWallet = ({ onSuccess, onError, isAuth, source }: Pr
     onError(isAuth);
   }, [ onError, isAuth ]);
 
-  const { start } = useSignInWithWallet({ onSuccess: handleSignInSuccess, onError: handleSignInError, source, isAuth });
+  const { start } = useSignInWithWallet({
+    onSuccess: handleSignInSuccess,
+    onError: handleSignInError,
+    source,
+    isAuth,
+    executeRecaptchaAsync: recaptcha.executeAsync,
+  });
 
   React.useEffect(() => {
     if (!isStartedRef.current) {
@@ -35,7 +44,12 @@ const AuthModalScreenConnectWallet = ({ onSuccess, onError, isAuth, source }: Pr
     }
   }, [ start ]);
 
-  return <Center h="100px"><Spinner/></Center>;
+  return (
+    <Center h="100px">
+      <Spinner/>
+      <ReCaptcha ref={ recaptcha.ref }/>
+    </Center>
+  );
 };
 
 export default React.memo(AuthModalScreenConnectWallet);

ui/snippets/auth/useSignInWithWallet.ts

@@ -17,9 +17,10 @@ interface Props {
   onError?: () => void;
   source?: mixpanel.EventPayload<mixpanel.EventTypes.WALLET_CONNECT>['Source'];
   isAuth?: boolean;
+  executeRecaptchaAsync: () => Promise<string | null>;
 }
 
-function useSignInWithWallet({ onSuccess, onError, source = 'Login', isAuth }: Props) {
+function useSignInWithWallet({ onSuccess, onError, source = 'Login', isAuth, executeRecaptchaAsync }: Props) {
   const [ isPending, setIsPending ] = React.useState(false);
   const isConnectingWalletRef = React.useRef(false);
 
@@ -32,11 +33,17 @@ function useSignInWithWallet({ onSuccess, onError, source = 'Login', isAuth }: P
     try {
       const siweMessage = await apiFetch('auth_siwe_message', { queryParams: { address } }) as { siwe_message: string };
       const signature = await signMessageAsync({ message: siweMessage.siwe_message });
+      const recaptchaToken = await executeRecaptchaAsync();
+
+      if (!recaptchaToken) {
+        throw new Error('ReCaptcha is not solved');
+      }
+
       const resource = isAuth ? 'auth_link_address' : 'auth_siwe_verify';
       const response = await apiFetch<typeof resource, UserInfo, unknown>(resource, {
         fetchParams: {
           method: 'POST',
-          body: { message: siweMessage.siwe_message, signature },
+          body: { message: siweMessage.siwe_message, signature, recaptcha_response: recaptchaToken },
         },
       });
       if (!('name' in response)) {
@@ -56,7 +63,7 @@ function useSignInWithWallet({ onSuccess, onError, source = 'Login', isAuth }: P
     } finally {
       setIsPending(false);
     }
-  }, [ apiFetch, isAuth, onError, onSuccess, signMessageAsync, toast ]);
+  }, [ apiFetch, isAuth, onError, onSuccess, signMessageAsync, toast, executeRecaptchaAsync ]);
 
   const start = React.useCallback(() => {
     setIsPending(true);