feat: add crash reports and diagnostic data collection

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,

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<PropsWithChildren<AppProps>> = ({
   children,
   config,
 }) => {
+  useTelemetry(config?.disableTelemetry);
   const inRouterContext = useInRouterContext();
   const Router = inRouterContext ? Fragment : MemoryRouter;
   return (

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://[email protected]/6539228',
+    integrations: [
+      new BrowserTracing(),
+      new CaptureConsole({
+        levels: ['error'],
+      }),
+    ],
+    sampleRate: 1,
+    tracesSampleRate: 0.2,
+    enabled,
+    environment: process.env.NODE_ENV,
+    release: version,
+  });
+};

packages/widget/src/config/version.ts

@@ -0,0 +1,2 @@
+export const name = '@lifi/widget';
+export const version = '1.4.0';

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';

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]);
+};

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', ''));
 

packages/widget/src/pages/SwapRoutesPage/SwapRoutesPage.tsx

@@ -24,6 +24,10 @@ export const SwapRoutesPage: React.FC<BoxProps> = () => {
     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 (
     <Stack direction="column" spacing={2}>
       {isLoading || isFetching

packages/widget/src/types/widget.ts

@@ -28,6 +28,7 @@ interface WidgetConfigBase {
   theme?: ThemeConfig;
   appearance?: Appearance;
   disableAppearance?: boolean;
+  disableTelemetry?: boolean;
   walletManagement?: WidgetWalletManagement;
 }
 

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();

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',
   });
 }