From 276f62450441999dd5fb789ac7b256cf181df84b Mon Sep 17 00:00:00 2001 From: Eugene Chybisov Date: Fri, 1 Jul 2022 14:19:58 +0100 Subject: [PATCH] feat: add crash reports and diagnostic data collection --- packages/widget-embedded/src/index.tsx | 1 + packages/widget/src/AppProvider.tsx | 2 + packages/widget/src/config/sentry.ts | 21 ++++++++++ packages/widget/src/config/version.ts | 2 + packages/widget/src/hooks/index.ts | 1 + packages/widget/src/hooks/useTelemetry.ts | 13 +++++++ packages/widget/src/index.ts | 2 + .../pages/SwapRoutesPage/SwapRoutesPage.tsx | 4 ++ packages/widget/src/types/widget.ts | 1 + scripts/private-version.js | 39 +++++++++++++++++++ scripts/version.js | 39 +++++-------------- 11 files changed, 95 insertions(+), 30 deletions(-) create mode 100644 packages/widget/src/config/sentry.ts create mode 100644 packages/widget/src/config/version.ts create mode 100644 packages/widget/src/hooks/useTelemetry.ts create mode 100644 scripts/private-version.js diff --git a/packages/widget-embedded/src/index.tsx b/packages/widget-embedded/src/index.tsx index 387119e57..698c87fec 100644 --- a/packages/widget-embedded/src/index.tsx +++ b/packages/widget-embedded/src/index.tsx @@ -93,6 +93,7 @@ const widgetDrawerConfig: WidgetConfig = { // fromToken: '0x0000000000000000000000000000000000000000', // toToken: '0xcc42724c6683b7e57334c4e856f4c9965ed682bd', // disableColorSchemes: true, + disableTelemetry: true, }; const widgetConfig: WidgetConfig = { ...widgetDrawerConfig, diff --git a/packages/widget/src/AppProvider.tsx b/packages/widget/src/AppProvider.tsx index 6ecc4d2df..e6089555d 100644 --- a/packages/widget/src/AppProvider.tsx +++ b/packages/widget/src/AppProvider.tsx @@ -5,6 +5,7 @@ import { QueryClientProvider, QueryClientProviderProps } from 'react-query'; import { MemoryRouter, useInRouterContext } from 'react-router-dom'; import { WidgetConfig } from '.'; import { queryClient } from './config/queryClient'; +import { useTelemetry } from './hooks'; import { SwapFormProvider } from './providers/SwapFormProvider'; import { ThemeProvider } from './providers/ThemeProvider'; import { WalletProvider } from './providers/WalletProvider'; @@ -22,6 +23,7 @@ export const AppProvider: React.FC> = ({ children, config, }) => { + useTelemetry(config?.disableTelemetry); const inRouterContext = useInRouterContext(); const Router = inRouterContext ? Fragment : MemoryRouter; return ( diff --git a/packages/widget/src/config/sentry.ts b/packages/widget/src/config/sentry.ts new file mode 100644 index 000000000..62d04d7c4 --- /dev/null +++ b/packages/widget/src/config/sentry.ts @@ -0,0 +1,21 @@ +import { CaptureConsole } from '@sentry/integrations'; +import * as Sentry from '@sentry/react'; +import { BrowserTracing } from '@sentry/tracing'; +import { version } from './version'; + +export const initSentry = (enabled?: boolean) => { + Sentry.init({ + dsn: 'https://bc1312161bf948db9b9c82618035ec22@o1302189.ingest.sentry.io/6539228', + integrations: [ + new BrowserTracing(), + new CaptureConsole({ + levels: ['error'], + }), + ], + sampleRate: 1, + tracesSampleRate: 0.2, + enabled, + environment: process.env.NODE_ENV, + release: version, + }); +}; diff --git a/packages/widget/src/config/version.ts b/packages/widget/src/config/version.ts new file mode 100644 index 000000000..8ec1dd866 --- /dev/null +++ b/packages/widget/src/config/version.ts @@ -0,0 +1,2 @@ +export const name = '@lifi/widget'; +export const version = '1.4.0'; diff --git a/packages/widget/src/hooks/index.ts b/packages/widget/src/hooks/index.ts index 2c7866f0e..606935f3a 100644 --- a/packages/widget/src/hooks/index.ts +++ b/packages/widget/src/hooks/index.ts @@ -6,6 +6,7 @@ export * from './useHasSufficientBalance'; export * from './useRouteExecution'; export * from './useScrollableContainer'; export * from './useSwapRoutes'; +export * from './useTelemetry'; export * from './useToken'; export * from './useTokenBalance'; export * from './useTokenBalances'; diff --git a/packages/widget/src/hooks/useTelemetry.ts b/packages/widget/src/hooks/useTelemetry.ts new file mode 100644 index 000000000..9d7d5f7df --- /dev/null +++ b/packages/widget/src/hooks/useTelemetry.ts @@ -0,0 +1,13 @@ +import { useEffect } from 'react'; +import { initSentry } from '../config/sentry'; + +export const useTelemetry = (disabled?: boolean) => { + useEffect(() => { + if (disabled) { + console.warn( + 'Enable crash reports and diagnostic data to be collected. This helps us to better understand how the widget is performing and where improvements need to be made.', + ); + initSentry(false); + } + }, [disabled]); +}; diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts index ee907ea98..bb987b658 100644 --- a/packages/widget/src/index.ts +++ b/packages/widget/src/index.ts @@ -1,10 +1,12 @@ import { App } from './App'; import { AppDrawer } from './AppDrawer'; +import { initSentry } from './config/sentry'; import './fonts/inter.css'; import { configureReactI18next } from './i18n'; export * from './types'; +initSentry(true); configureReactI18next(); // ClassNameGenerator.configure((componentName) => componentName.replace('Mui', '')); diff --git a/packages/widget/src/pages/SwapRoutesPage/SwapRoutesPage.tsx b/packages/widget/src/pages/SwapRoutesPage/SwapRoutesPage.tsx index 84bb8ae9a..daa0cc9c8 100644 --- a/packages/widget/src/pages/SwapRoutesPage/SwapRoutesPage.tsx +++ b/packages/widget/src/pages/SwapRoutesPage/SwapRoutesPage.tsx @@ -24,6 +24,10 @@ export const SwapRoutesPage: React.FC = () => { navigate(routes.swap, { state: { routeId: route.id }, replace: true }); }; + // A route for this transaction does not exist yet possibly due to liquidity issues or because the amount of tokens you are sending is below the bridge minimum amount. + // Please try again later or change the tokens you intend to swap. + // If the problem persists, come to our Discord and leave a message in the support channel. + return ( {isLoading || isFetching diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts index 2968e9f3e..62667c8b9 100644 --- a/packages/widget/src/types/widget.ts +++ b/packages/widget/src/types/widget.ts @@ -28,6 +28,7 @@ interface WidgetConfigBase { theme?: ThemeConfig; appearance?: Appearance; disableAppearance?: boolean; + disableTelemetry?: boolean; walletManagement?: WidgetWalletManagement; } diff --git a/scripts/private-version.js b/scripts/private-version.js new file mode 100644 index 000000000..addf2187e --- /dev/null +++ b/scripts/private-version.js @@ -0,0 +1,39 @@ +/* eslint-disable no-prototype-builtins */ +const fs = require('fs-extra'); +const path = require('path'); +const glob = require('fast-glob'); + +const packagesPath = path.join(process.cwd(), 'packages'); +const directoryPackages = glob + .sync('*/package.json', { cwd: path.join(process.cwd(), 'packages') }) + .map(path.dirname); + +async function run() { + directoryPackages.forEach(async (directoryPackage) => { + const packageJsonPath = path.join( + packagesPath, + directoryPackage, + 'package.json', + ); + + const json = JSON.parse(fs.readFileSync(packageJsonPath).toString()); + + if (json.hasOwnProperty('private')) { + if (process.argv[2] === 'before') { + await fs.writeFile( + packageJsonPath, + JSON.stringify({ ...json, private: false }, null, 2), + ); + console.log(`Change ${directoryPackage} private: false.`); + } else { + await fs.writeFile( + packageJsonPath, + JSON.stringify({ ...json, private: true }, null, 2), + ); + console.log(`Change ${directoryPackage} private: true.`); + } + } + }); +} + +run(); diff --git a/scripts/version.js b/scripts/version.js index addf2187e..bb1cdd32f 100644 --- a/scripts/version.js +++ b/scripts/version.js @@ -1,38 +1,17 @@ -/* eslint-disable no-prototype-builtins */ -const fs = require('fs-extra'); const path = require('path'); -const glob = require('fast-glob'); - -const packagesPath = path.join(process.cwd(), 'packages'); -const directoryPackages = glob - .sync('*/package.json', { cwd: path.join(process.cwd(), 'packages') }) - .map(path.dirname); +const fs = require('fs-extra'); async function run() { - directoryPackages.forEach(async (directoryPackage) => { - const packageJsonPath = path.join( - packagesPath, - directoryPackage, - 'package.json', - ); + const packagePath = path.join(process.cwd(), './package.json'); + + const packageData = await fs.readFile(packagePath, 'utf8'); + + const { version, name } = JSON.parse(packageData); - const json = JSON.parse(fs.readFileSync(packageJsonPath).toString()); + const src = `export const name = '${name}';\nexport const version = '${version}';\n`; - if (json.hasOwnProperty('private')) { - if (process.argv[2] === 'before') { - await fs.writeFile( - packageJsonPath, - JSON.stringify({ ...json, private: false }, null, 2), - ); - console.log(`Change ${directoryPackage} private: false.`); - } else { - await fs.writeFile( - packageJsonPath, - JSON.stringify({ ...json, private: true }, null, 2), - ); - console.log(`Change ${directoryPackage} private: true.`); - } - } + await fs.writeFile(`${process.cwd()}/src/config/version.ts`, src, { + flat: 'w', }); }