chore(react-helpers,utils,logger): create logger lib and move sentry/logger utils there (#3990)

apps/trading/lib/hooks/use-telemetry-approval.spec.ts

@@ -1,11 +1,11 @@
 import { renderHook, act, waitFor } from '@testing-library/react';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
-import { SentryInit, SentryClose } from '@vegaprotocol/utils';
+import { SentryInit, SentryClose } from '@vegaprotocol/logger';
 import { STORAGE_KEY, useTelemetryApproval } from './use-telemetry-approval';
 
 const mockSetValue = jest.fn();
 const mockRemoveValue = jest.fn();
-jest.mock('@vegaprotocol/utils');
+jest.mock('@vegaprotocol/logger');
 jest.mock('@vegaprotocol/react-helpers', () => ({
   ...jest.requireActual('@vegaprotocol/react-helpers'),
   useLocalStorage: jest

apps/trading/lib/hooks/use-telemetry-approval.ts

@@ -1,6 +1,6 @@
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import { useCallback } from 'react';
-import { SentryInit, SentryClose } from '@vegaprotocol/utils';
+import { SentryInit, SentryClose } from '@vegaprotocol/logger';
 import { ENV } from '../config';
 export const STORAGE_KEY = 'vega_telemetry_approval';
 

apps/trading/sentry.client.config.js

@@ -1,5 +1,5 @@
 import { ENV } from './lib/config/env';
-import { LocalStorage, SentryInit } from '@vegaprotocol/utils';
+import { LocalStorage, SentryInit } from '@vegaprotocol/logger';
 import { STORAGE_KEY } from './lib/hooks/use-telemetry-approval';
 
 const { dsn, envName } = ENV;

libs/apollo-client/src/lib/apollo-client.ts

@@ -13,7 +13,7 @@ import { createClient as createWSClient } from 'graphql-ws';
 import { onError } from '@apollo/client/link/error';
 import { RetryLink } from '@apollo/client/link/retry';
 import ApolloLinkTimeout from 'apollo-link-timeout';
-import { localLoggerFactory } from '@vegaprotocol/utils';
+import { localLoggerFactory } from '@vegaprotocol/logger';
 import { useHeaderStore } from './header-store';
 
 const isBrowser = typeof window !== 'undefined';

libs/deposits/src/lib/use-deposit-balances.ts

@@ -8,7 +8,8 @@ import {
   useIsExemptDepositor,
 } from './use-get-deposit-maximum';
 import { useGetDepositedAmount } from './use-get-deposited-amount';
-import { isAssetTypeERC20, localLoggerFactory } from '@vegaprotocol/utils';
+import { isAssetTypeERC20 } from '@vegaprotocol/utils';
+import { localLoggerFactory } from '@vegaprotocol/logger';
 import { useAccountBalance } from '@vegaprotocol/accounts';
 import type { Asset } from '@vegaprotocol/assets';
 import { useWeb3React } from '@web3-react/core';

libs/deposits/src/lib/use-get-allowance.ts

@@ -4,7 +4,8 @@ import { useCallback } from 'react';
 import { useEthereumConfig } from '@vegaprotocol/web3';
 import BigNumber from 'bignumber.js';
 import type { Asset } from '@vegaprotocol/assets';
-import { addDecimal, localLoggerFactory } from '@vegaprotocol/utils';
+import { addDecimal } from '@vegaprotocol/utils';
+import { localLoggerFactory } from '@vegaprotocol/logger';
 
 export const useGetAllowance = (
   contract: Token | null,

libs/deposits/src/lib/use-get-deposit-maximum.ts

@@ -1,7 +1,8 @@
 import { useCallback } from 'react';
 import BigNumber from 'bignumber.js';
 import type { Asset } from '@vegaprotocol/assets';
-import { addDecimal, localLoggerFactory } from '@vegaprotocol/utils';
+import { addDecimal } from '@vegaprotocol/utils';
+import { localLoggerFactory } from '@vegaprotocol/logger';
 import type { CollateralBridge } from '@vegaprotocol/smart-contracts';
 
 export const useGetDepositMaximum = (

libs/deposits/src/lib/use-get-deposited-amount.ts

@@ -3,7 +3,8 @@ import { ethers } from 'ethers';
 import { useEthereumConfig } from '@vegaprotocol/web3';
 import BigNumber from 'bignumber.js';
 import type { Asset } from '@vegaprotocol/assets';
-import { addDecimal, localLoggerFactory } from '@vegaprotocol/utils';
+import { addDecimal } from '@vegaprotocol/utils';
+import { localLoggerFactory } from '@vegaprotocol/logger';
 import { useWeb3React } from '@web3-react/core';
 
 export const useGetDepositedAmount = (asset: Asset | undefined) => {

libs/environment/src/hooks/use-releases.ts

@@ -1,4 +1,4 @@
-import { localLoggerFactory } from '@vegaprotocol/utils';
+import { localLoggerFactory } from '@vegaprotocol/logger';
 import { useCallback, useEffect, useState } from 'react';
 import z from 'zod';
 

libs/logger/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/logger/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/logger/README.md

@@ -0,0 +1,7 @@
+# logger
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test logger` to execute the unit tests via [Jest](https://jestjs.io).

libs/logger/jest.config.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+  displayName: 'logger',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/libs/logger',
+};

libs/logger/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vegaprotocol/logger",
+  "version": "0.0.1",
+  "type": "commonjs"
+}

libs/logger/project.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/logger/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nrwl/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "format": ["esm", "cjs"],
+      "options": {
+        "outputPath": "dist/libs/logger",
+        "main": "libs/logger/src/index.ts",
+        "tsConfig": "libs/logger/tsconfig.lib.json",
+        "assets": ["libs/logger/*.md"]
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/logger/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/libs/logger"],
+      "options": {
+        "jestConfig": "libs/logger/jest.config.ts",
+        "passWithNoTests": true
+      }
+    }
+  }
+}

libs/logger/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-logger';

libs/logger/src/hooks/use-logger.ts

@@ -1,6 +1,7 @@
 import { useRef } from 'react';
-import type { LocalLogger, LoggerConf } from '@vegaprotocol/utils';
+import type { LocalLogger, LoggerConf } from '../lib/local-logger';
-import { localLoggerFactory, SentryInit } from '@vegaprotocol/utils';
+import { localLoggerFactory } from '../lib/local-logger';
+import { SentryInit } from '../lib/sentry-utils';
 
 export interface LoggerProps extends LoggerConf {
   dsn?: string;

libs/logger/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib';
+export * from './hooks';

libs/logger/src/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './local-logger';
+export * from './sentry-utils';

libs/logger/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/logger/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": []
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["jest.config.ts", "**/*.spec.ts", "**/*.test.ts"]
+}

libs/logger/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

libs/react-helpers/.eslintrc.json

@@ -7,15 +7,21 @@
       "rules": {
         "no-restricted-imports": [
           "error",
-          "@apollo/client",
+          {
-          "@vegaprotocol/data-provider",
+            "paths": [
-          "ag-grid-react",
+              "error",
-          "ag-grid-community",
+              "@apollo/client",
-          "graphql",
+              "@vegaprotocol/data-provider",
-          "graphql-tag",
+              "ag-grid-react",
-          "graphql-ws",
+              "ag-grid-community",
-          "ethers",
+              "graphql",
-          "@ethersproject"
+              "graphql-tag",
+              "graphql-ws",
+              "ethers",
+              "@ethersproject"
+            ],
+            "patterns": ["@sentry/*"]
+          }
         ]
       }
     },

libs/react-helpers/src/hooks/index.ts

@@ -11,6 +11,5 @@ export * from './use-theme-switcher';
 export * from './use-storybook-theme-observer';
 export * from './use-yesterday';
 export * from './use-previous';
-export * from './use-logger';
 export * from './use-pane-layout';
 export * from './use-copy-timeout';

libs/react-helpers/src/hooks/use-mutation-observer.ts

@@ -1,4 +1,3 @@
-import { captureException } from '@sentry/react';
 import debounce from 'lodash/debounce';
 import { useEffect, useMemo } from 'react';
 
@@ -31,11 +30,7 @@ export function useMutationObserver(
 
   useEffect(() => {
     if (!observer || !target) return;
-    try {
+    observer.observe(target, options.config);
-      observer.observe(target, options.config);
-    } catch (err) {
-      captureException(err);
-    }
     return () => observer?.disconnect();
   }, [observer, options.config, target]);
 }

libs/react-helpers/src/hooks/use-resize-observer.ts

@@ -1,6 +1,5 @@
 import debounce from 'lodash/debounce';
 import { useCallback, useEffect, useMemo } from 'react';
-import { localLoggerFactory } from '@vegaprotocol/utils';
 
 type ResizeObserverConfiguration = {
   debounceTime: number;
@@ -35,11 +34,7 @@ export function useResizeObserver(
 
   useEffect(() => {
     if (!observer || !target) return;
-    try {
+    observer.observe(target, options.config);
-      observer.observe(target, options.config);
-    } catch (err) {
-      localLoggerFactory({ application: 'react-helpers' }).debug(err as Error);
-    }
     return () => observer?.disconnect();
   }, [observer, options.config, target]);
 }

libs/ui-toolkit/.eslintrc.json

@@ -4,7 +4,15 @@
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
+      "rules": {
+        "no-restricted-imports": [
+          "error",
+          {
+            "paths": [],
+            "patterns": ["@sentry/*"]
+          }
+        ]
+      }
     },
     {
       "files": ["*.ts", "*.tsx"],

libs/utils/.eslintrc.json

@@ -7,15 +7,21 @@
       "rules": {
         "no-restricted-imports": [
           "error",
-          "@apollo/client",
+          {
-          "@vegaprotocol/data-provider",
+            "paths": [
-          "ag-grid-react",
+              "error",
-          "ag-grid-community",
+              "@apollo/client",
-          "graphql",
+              "@vegaprotocol/data-provider",
-          "graphql-tag",
+              "ag-grid-react",
-          "graphql-ws",
+              "ag-grid-community",
-          "ethers",
+              "graphql",
-          "@ethersproject"
+              "graphql-tag",
+              "graphql-ws",
+              "ethers",
+              "@ethersproject"
+            ],
+            "patterns": ["@sentry/*"]
+          }
         ]
       }
     },

libs/utils/src/index.ts

@@ -6,7 +6,6 @@ export * from './lib/get-user-locale';
 export * from './lib/helpers';
 export * from './lib/is-asset-erc20';
 export * from './lib/is-valid-url';
-export * from './lib/local-logger';
 export * from './lib/local-storage';
 export * from './lib/markets';
 export * from './lib/price-change';
@@ -14,4 +13,3 @@ export * from './lib/remove-0x';
 export * from './lib/remove-pagination-wrapper';
 export * from './lib/time';
 export * from './lib/validate';
-export * from './lib/sentry-utils';

libs/web3/src/lib/use-eager-connect.ts

@@ -1,5 +1,6 @@
-import type { LoggerProps } from '@vegaprotocol/react-helpers';
+import { useLocalStorage } from '@vegaprotocol/react-helpers';
-import { useLocalStorage, useLogger } from '@vegaprotocol/react-helpers';
+import type { LoggerProps } from '@vegaprotocol/logger';
+import { localLoggerFactory } from '@vegaprotocol/logger';
 import type { Web3ReactHooks } from '@web3-react/core';
 import { MetaMask } from '@web3-react/metamask';
 import type { Connector } from '@web3-react/types';
@@ -14,7 +15,7 @@ export const useEagerConnect = (loggerConf: LoggerProps) => {
   const [eagerConnector] = useLocalStorage(ETHEREUM_EAGER_CONNECT);
   const attemptedRef = useRef(false);
 
-  const logger = useLogger(loggerConf);
+  const logger = localLoggerFactory(loggerConf);
 
   useEffect(() => {
     if (attemptedRef.current || 'Cypress' in window) return;

libs/web3/src/lib/use-ethereum-withdraw-approvals-manager.tsx

@@ -5,7 +5,7 @@ import { addDecimal } from '@vegaprotocol/utils';
 import { useGetWithdrawThreshold } from './use-get-withdraw-threshold';
 import { useGetWithdrawDelay } from './use-get-withdraw-delay';
 import { t } from '@vegaprotocol/i18n';
-import { localLoggerFactory } from '@vegaprotocol/utils';
+import { localLoggerFactory } from '@vegaprotocol/logger';
 
 import { CollateralBridge } from '@vegaprotocol/smart-contracts';
 

libs/web3/src/lib/use-get-withdraw-delay.ts

@@ -1,6 +1,6 @@
 import { useBridgeContract } from './use-bridge-contract';
 import { useCallback } from 'react';
-import { localLoggerFactory } from '@vegaprotocol/utils';
+import { localLoggerFactory } from '@vegaprotocol/logger';
 
 /**
  * Gets the delay in seconds thats required if the withdrawal amount is

libs/withdraws/src/lib/use-complete-withdraw.ts

@@ -6,7 +6,7 @@ import {
   useEthereumTransaction,
 } from '@vegaprotocol/web3';
 import { useCallback, useEffect, useState } from 'react';
-import { localLoggerFactory } from '@vegaprotocol/utils';
+import { localLoggerFactory } from '@vegaprotocol/logger';
 import { Erc20ApprovalDocument } from './__generated__/Erc20Approval';
 import type {
   Erc20ApprovalQuery,

libs/withdraws/src/lib/use-verify-withdrawal.ts

@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react';
 import BigNumber from 'bignumber.js';
-import { addDecimal, localLoggerFactory } from '@vegaprotocol/utils';
+import { addDecimal } from '@vegaprotocol/utils';
+import { localLoggerFactory } from '@vegaprotocol/logger';
 import { t } from '@vegaprotocol/i18n';
 import {
   ApprovalStatus,

libs/withdraws/src/lib/use-withdraw-asset.tsx

@@ -1,5 +1,6 @@
 import type { Asset } from '@vegaprotocol/assets';
-import { addDecimal, localLoggerFactory } from '@vegaprotocol/utils';
+import { addDecimal } from '@vegaprotocol/utils';
+import { localLoggerFactory } from '@vegaprotocol/logger';
 import * as Schema from '@vegaprotocol/types';
 import BigNumber from 'bignumber.js';
 import { useCallback, useEffect } from 'react';

tsconfig.base.json

@@ -31,6 +31,7 @@
       "@vegaprotocol/i18n": ["libs/i18n/src/index.ts"],
       "@vegaprotocol/ledger": ["libs/ledger/src/index.ts"],
       "@vegaprotocol/liquidity": ["libs/liquidity/src/index.ts"],
+      "@vegaprotocol/logger": ["libs/logger/src/index.ts"],
       "@vegaprotocol/market-depth": ["libs/market-depth/src/index.ts"],
       "@vegaprotocol/markets": ["libs/markets/src/index.ts"],
       "@vegaprotocol/mock": ["libs/cypress/mock.ts"],

workspace.json

@@ -21,6 +21,7 @@
     "ledger": "libs/ledger",
     "liquidity": "libs/liquidity",
     "liquidity-provision-dashboard": "apps/liquidity-provision-dashboard",
+    "logger": "libs/logger",
     "market-depth": "libs/market-depth",
     "markets": "libs/markets",
     "multisig-signer": "apps/multisig-signer",