add meta data to sentry errors

lib/api/resources.ts

@@ -41,7 +41,7 @@ import type ArrayElement from 'types/utils/ArrayElement';
 import appConfig from 'configs/app/config';
 
 export interface ApiResource {
-  path: string;
+  path: ResourcePath;
   endpoint?: string;
   basePath?: string;
   pathParams?: Array<string>;
@@ -364,6 +364,11 @@ export const RESOURCES = {
 
 export type ResourceName = keyof typeof RESOURCES;
 
+type ResourcePathMap = {
+  [K in ResourceName]: typeof RESOURCES[K]['path']
+}
+export type ResourcePath = ResourcePathMap[keyof ResourcePathMap]
+
 export type ResourceFiltersKey<R extends ResourceName> = typeof RESOURCES[R] extends {filterFields: Array<unknown>} ?
   ArrayElement<typeof RESOURCES[R]['filterFields']> :
   never;

lib/api/useApiFetch.tsx

@@ -23,14 +23,20 @@ export default function useApiFetch() {
   ) => {
     const resource: ApiResource = RESOURCES[resourceName];
     const url = buildUrl(resourceName, pathParams, queryParams);
-    return fetch<SuccessType, ErrorType>(url, {
-      credentials: 'include',
-      ...(resource.endpoint && appConfig.host === 'localhost' ? {
-        headers: {
-          'x-endpoint': resource.endpoint,
-        },
-      } : {}),
-      ...fetchParams,
-    });
+    return fetch<SuccessType, ErrorType>(
+      url,
+      {
+        credentials: 'include',
+        ...(resource.endpoint && appConfig.host === 'localhost' ? {
+          headers: {
+            'x-endpoint': resource.endpoint,
+          },
+        } : {}),
+        ...fetchParams,
+      },
+      {
+        resource: resource.path,
+      },
+    );
   }, [ fetch ]);
 }

lib/hooks/useFetch.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import type { CsrfData } from 'types/client/account';
 
-import type { ResourceError } from 'lib/api/resources';
+import type { ResourceError, ResourcePath } from 'lib/api/resources';
 import { getResourceKey } from 'lib/api/useApiQuery';
 
 export interface Params {
@@ -15,11 +15,15 @@ export interface Params {
   credentials?: RequestCredentials;
 }
 
+interface Meta {
+  resource?: ResourcePath;
+}
+
 export default function useFetch() {
   const queryClient = useQueryClient();
   const { token } = queryClient.getQueryData<CsrfData>(getResourceKey('csrf')) || {};
 
-  return React.useCallback(<Success, Error>(path: string, params?: Params): Promise<Success | ResourceError<Error>> => {
+  return React.useCallback(<Success, Error>(path: string, params?: Params, meta?: Meta): Promise<Success | ResourceError<Error>> => {
     const _body = params?.body;
     const isFormData = _body instanceof FormData;
     const isBodyAllowed = params?.method && ![ 'GET', 'HEAD' ].includes(params.method);
@@ -51,7 +55,7 @@ export default function useFetch() {
           status: response.status,
           statusText: response.statusText,
         };
-        Sentry.captureException(new Error('Client fetch failed'), { extra: error, tags: { source: 'fetch' } });
+        Sentry.captureException(new Error('Client fetch failed'), { extra: { ...error, ...meta }, tags: { source: 'api_fetch' } });
 
         return response.json().then(
           (jsonError) => Promise.reject({

lib/hooks/useGetCsrfToken.tsx

+import * as Sentry from '@sentry/react';
 import { useQuery } from '@tanstack/react-query';
 
 import buildUrl from 'lib/api/buildUrl';
@@ -14,7 +15,13 @@ export default function useGetCsrfToken() {
       const url = buildUrl('csrf');
       const apiResponse = await fetch(url, { credentials: 'include' });
       const csrfFromHeader = apiResponse.headers.get('x-bs-account-csrf');
-      return csrfFromHeader ? { token: csrfFromHeader } : undefined;
+
+      if (!csrfFromHeader) {
+        Sentry.captureException(new Error('Unable to get csrf token'), { tags: { source: 'csrf_token' } });
+        return;
+      }
+
+      return { token: csrfFromHeader };
     }
 
     return nodeApiFetch('/node-api/csrf');

lib/hooks/useRedirectForInvalidAuthToken.tsx

@@ -19,7 +19,7 @@ export default function useRedirectForInvalidAuthToken() {
       const apiToken = cookies.get(cookies.NAMES.API_TOKEN);
 
       if (apiToken) {
-        Sentry.captureException(new Error('Invalid api token'), { tags: { source: 'fetch' } });
+        Sentry.captureException(new Error('Invalid api token'), { tags: { source: 'invalid_api_token' } });
         window.location.assign(loginUrl);
       }
     }

ui/address/details/AddressQrCode.tsx

@@ -26,7 +26,7 @@ const AddressQrCode = ({ hash, className }: Props) => {
       QRCode.toString(hash, SVG_OPTIONS, (error: Error | null | undefined, svg: string) => {
         if (error) {
           setError('We were unable to generate QR code.');
-          Sentry.captureException(error, { tags: { source: 'QR code' } });
+          Sentry.captureException(error, { tags: { source: 'qr_code' } });
           return;
         }