don't log errors from API by default and change error levels

lib/api/useApiFetch.tsx

@@ -21,6 +21,7 @@ export interface Params<R extends ResourceName> {
   pathParams?: ResourcePathParams<R>;
   queryParams?: Record<string, string | Array<string> | number | boolean | undefined | null>;
   fetchParams?: Pick<FetchParams, 'body' | 'method' | 'signal' | 'headers'>;
+  logError?: boolean;
 }
 
 export default function useApiFetch() {
@@ -30,7 +31,7 @@ export default function useApiFetch() {
 
   return React.useCallback(<R extends ResourceName, SuccessType = unknown, ErrorType = unknown>(
     resourceName: R,
-    { pathParams, queryParams, fetchParams }: Params<R> = {},
+    { pathParams, queryParams, fetchParams, logError }: Params<R> = {},
   ) => {
     const apiToken = cookies.get(cookies.NAMES.API_TOKEN);
 
@@ -58,7 +59,7 @@ export default function useApiFetch() {
       },
       {
         resource: resource.path,
-        omitMonitoringLog: true, // disable logging of API errors to Rollbar
+        logError,
       },
     );
   }, [ fetch, csrfToken ]);

lib/api/useApiQuery.tsx

@@ -11,6 +11,7 @@ export interface Params<R extends ResourceName, E = unknown, D = ResourcePayload
   queryParams?: Record<string, string | Array<string> | number | boolean | undefined>;
   fetchParams?: Pick<FetchParams, 'body' | 'method' | 'headers'>;
   queryOptions?: Partial<Omit<UseQueryOptions<ResourcePayload<R>, ResourceError<E>, D>, 'queryFn'>>;
+  logError?: boolean;
 }
 
 export function getResourceKey<R extends ResourceName>(resource: R, { pathParams, queryParams }: Params<R> = {}) {
@@ -23,7 +24,7 @@ export function getResourceKey<R extends ResourceName>(resource: R, { pathParams
 
 export default function useApiQuery<R extends ResourceName, E = unknown, D = ResourcePayload<R>>(
   resource: R,
-  { queryOptions, pathParams, queryParams, fetchParams }: Params<R, E, D> = {},
+  { queryOptions, pathParams, queryParams, fetchParams, logError }: Params<R, E, D> = {},
 ) {
   const apiFetch = useApiFetch();
 
@@ -33,7 +34,7 @@ export default function useApiQuery<R extends ResourceName, E = unknown, D = Res
       // all errors and error typing is handled by react-query
       // so error response will never go to the data
       // that's why we are safe here to do type conversion "as Promise<ResourcePayload<R>>"
-      return apiFetch(resource, { pathParams, queryParams, fetchParams: { ...fetchParams, signal } }) as Promise<ResourcePayload<R>>;
+      return apiFetch(resource, { pathParams, queryParams, logError, fetchParams: { ...fetchParams, signal } }) as Promise<ResourcePayload<R>>;
     },
     ...queryOptions,
   });

lib/hooks/useAddressProfileApiQuery.tsx

@@ -27,7 +27,7 @@ export default function useAddressProfileApiQuery(hash: string | undefined, isEn
         return Promise.reject();
       }
 
-      return fetch(feature.apiUrlTemplate.replace('{address}', hash), undefined, { omitMonitoringLog: true });
+      return fetch(feature.apiUrlTemplate.replace('{address}', hash));
     },
     enabled: isEnabled && Boolean(hash),
     refetchOnMount: false,

lib/hooks/useFetch.tsx

@@ -14,7 +14,7 @@ export interface Params {
 
 interface Meta {
   resource?: ResourcePath;
-  omitMonitoringLog?: boolean;
+  logError?: boolean;
 }
 
 export default function useFetch() {
@@ -53,7 +53,7 @@ export default function useFetch() {
           statusText: response.statusText,
         };
 
-        if (!meta?.omitMonitoringLog && rollbar) {
+        if (meta?.logError && rollbar) {
           rollbar.warn('Client fetch failed', {
             resource: meta?.resource,
             status_code: error.status,

lib/hooks/useIsSafeAddress.tsx

@@ -15,7 +15,7 @@ export default function useIsSafeAddress(hash: string | undefined): boolean {
         return Promise.reject();
       }
 
-      return fetch(`${ feature.apiUrl }/${ hash }`, undefined, { omitMonitoringLog: true });
+      return fetch(`${ feature.apiUrl }/${ hash }`);
     },
     enabled: feature.isEnabled && Boolean(hash),
     refetchOnMount: false,

ui/address/details/AddressQrCode.tsx

@@ -52,7 +52,7 @@ const AddressQrCode = ({ address, className, isLoading }: Props) => {
       QRCode.toString(address.hash, SVG_OPTIONS, (error: Error | null | undefined, svg: string) => {
         if (error) {
           setError('We were unable to generate QR code.');
-          rollbar?.error('QR code generation failed');
+          rollbar?.warn('QR code generation failed');
           return;
         }
 

ui/address/utils/useAddressQuery.ts

@@ -45,6 +45,7 @@ export default function useAddressQuery({ hash, isEnabled = true }: Params): Add
         return isRefetchEnabled ? 15 * SECOND : false;
       },
     },
+    logError: true,
   });
 
   const rpcQuery = useQuery<RpcResponseType, unknown, Address | null>({

ui/shared/AppError/AppErrorBoundary.tsx

@@ -1,6 +1,7 @@
 import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import getErrorCauseStatusCode from 'lib/errors/getErrorCauseStatusCode';
 import { useRollbar } from 'lib/rollbar';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 
@@ -25,7 +26,16 @@ const AppErrorBoundary = ({ className, children, Container }: Props) => {
   }, [ className, Container ]);
 
   const handleError = React.useCallback((error: Error) => {
-    rollbar?.error(error);
+    const statusCode = getErrorCauseStatusCode(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.
+      return;
+    }
+
+    // To this point, there can only be errors that lead to a page crash.
+    // Therefore, we set the error level to "critical."
+    rollbar.critical(error);
   }, [ rollbar ]);
 
   return (

ui/snippets/auth/useRedirectForInvalidAuthToken.ts

@@ -14,7 +14,6 @@ export default function useRedirectForInvalidAuthToken() {
       const apiToken = cookies.get(cookies.NAMES.API_TOKEN);
 
       if (apiToken) {
-        rollbar?.warn('Invalid API token');
         cookies.remove(cookies.NAMES.API_TOKEN);
         window.location.assign('/');
       }