feat: ignore common errors

.changeset/selfish-days-repeat.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+feat: ignore common errors

examples/cra-dapp/package.json

@@ -20,6 +20,6 @@
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react": "4.2.1",
     "typescript": "5.2.2",
-    "vite": "6.0.3"
+    "vite": "6.0.8"
   }
 }

package.json

@@ -128,7 +128,8 @@
       "secp256k1@=5.0.0": ">=5.0.1",
       "elliptic@<6.6.0": ">=6.6.0",
       "cross-spawn@<7.0.5": ">=7.0.5",
-      "nanoid@<3.3.8": "3.3.8"
+      "nanoid@<3.3.8": "3.3.8",
+      "store2@<2.14.4": ">=2.14.4"
     }
   }
 }

packages/app/package.json

@@ -102,7 +102,7 @@
     "ts-jest-mock-import-meta": "1.1.0",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "5.2.2",
-    "vite": "6.0.3",
+    "vite": "6.0.8",
     "vite-plugin-clean": "1.0.0",
     "vite-plugin-static-copy": "2.2.0",
     "vite-tsconfig-paths": "5.1.4",

packages/app/playwright/e2e/ReportError.test.ts

@@ -48,9 +48,11 @@ test.describe('ReportError', () => {
     await getByAriaLabel(page, 'Send error reports').click();
     await expect(page.getByText(/Unexpected error/)).toHaveCount(0);
 
-    await page.waitForTimeout(2000);
-    const errorsAfterReporting = await getPageErrors(page);
-    expect(errorsAfterReporting.length).toBe(0);
+    await expect
+      .poll(async () => (await getPageErrors(page)).length, {
+        timeout: 10000,
+      })
+      .toBe(0);
   });
 
   test('should show Review Error in menu when there is a error in the database', async () => {
@@ -59,7 +61,7 @@ test.describe('ReportError', () => {
       await window.fuelDB.errors.add({
         id: '12345',
         error: {
-          name: 'React error',
+          name: 'React$ error',
           message: 'Test Error',
           stack: 'Line error 1',
         },
@@ -85,8 +87,8 @@ test.describe('ReportError', () => {
       await window.fuelDB.errors.add({
         id: '12345',
         error: {
-          name: 'React error',
-          message: 'Test Error',
+          name: 'React$ error',
+          message: 'Test$ Error',
           stack: 'Line error 1',
         },
         extra: {
@@ -103,20 +105,24 @@ test.describe('ReportError', () => {
     page.locator(`[data-key="hasErrors"]`).click();
     await hasText(page, /Unexpected error/i);
 
+    expect((await getPageErrors(page)).length).toBe(1);
     // report error
     await getByAriaLabel(page, 'Ignore error(s)').click();
     await expect(page.getByText(/Unexpected error/i)).toHaveCount(0);
 
-    const errorsAfterReporting = await getPageErrors(page);
-    expect(errorsAfterReporting.length).toBe(1);
+    await expect
+      .poll(async () => (await getPageErrors(page)).length, {
+        timeout: 10000,
+      })
+      .toBe(1);
   });
   test('should be able to dismiss all errors', async () => {
     await visit(page, '/');
     await page.evaluate(async () => {
       await window.fuelDB.errors.add({
         id: '12345',
         error: {
-          name: 'React error',
+          name: 'React$ error',
           message: 'Test Error',
           stack: 'Line error 1',
         },
@@ -141,16 +147,19 @@ test.describe('ReportError', () => {
     ).click();
     await expect(page.getByText(/Unexpected error/i)).toHaveCount(0);
 
-    const errorsAfterReporting = await getPageErrors(page);
-    expect(errorsAfterReporting.length).toBe(0);
+    await expect
+      .poll(async () => (await getPageErrors(page)).length, {
+        timeout: 10000,
+      })
+      .toBe(0);
   });
   test('should hide when the single error is dismissed', async () => {
     await visit(page, '/');
     await page.evaluate(async () => {
       await window.fuelDB.errors.add({
         id: '12345',
         error: {
-          name: 'React error',
+          name: 'React$ error',
           message: 'Test Error',
           stack: 'Line error 1',
         },
@@ -172,14 +181,17 @@ test.describe('ReportError', () => {
     await getByAriaLabel(page, 'Dismiss error').click();
     await expect(page.getByText(/Unexpected error/i)).toHaveCount(0);
 
-    const errorsAfterReporting = await getPageErrors(page);
-    expect(errorsAfterReporting.length).toBe(0);
+    await expect
+      .poll(async () => (await getPageErrors(page)).length, {
+        timeout: 10000,
+      })
+      .toBe(0);
   });
   test('should detect and capture global errors', async () => {
-    await visit(page, '/');
     await page.evaluate(async () => {
-      console.error(new Error('Test Error'));
+      console.error(new Error('New Error'));
     });
+    await visit(page, '/');
     await reload(page);
     await getByAriaLabel(page, 'Menu').click();
     page.locator(`[data-key="hasErrors"]`).click();
@@ -195,7 +207,7 @@ test.describe('ReportError', () => {
       await window.fuelDB.errors.add({
         id: '12345',
         error: {
-          name: 'React error',
+          name: 'React$ error',
           message: 'Test Error',
           stack: 'Line error 1',
         },
@@ -210,7 +222,7 @@ test.describe('ReportError', () => {
       await window.fuelDB.errors.add({
         id: '123456',
         error: {
-          name: 'React error',
+          name: 'React$ error',
           message: 'Test Error',
           stack: 'Line error 1',
         },
@@ -231,4 +243,29 @@ test.describe('ReportError', () => {
     const errorsAfterReporting = await getPageErrors(page);
     expect(errorsAfterReporting.length).toBe(1);
   });
+  test('should not show ignored errors', async () => {
+    await visit(page, '/');
+
+    await page.evaluate(async () => {
+      await window.fuelDB.errors.add({
+        id: '12345',
+        error: {
+          name: 'React Error',
+          message: 'React Error',
+          stack: 'Line error 1',
+        },
+        extra: {
+          timestamp: Date.now(),
+          location: 'http://localhost:3000',
+          pathname: '/',
+          hash: '#',
+          counts: 0,
+        },
+      });
+    });
+    await getByAriaLabel(page, 'Menu').click();
+    expect(
+      await page.locator(`[data-key="hasErrors"]`).isVisible()
+    ).toBeFalsy();
+  });
 });

packages/app/src/systems/Account/components/QuickAccountConnect/QuickAccountConnect.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { cssObj } from '@fuel-ui/css';
 import {
   Alert,
@@ -61,7 +63,9 @@ export const QuickAccountConnect = () => {
   const onDismiss = () => {
     if (!origin || !account) return;
     setDismissed(true);
-    localStorage.setItem(getDismissKey(account.address, origin.full), 'true');
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(getDismissKey(account.address, origin.full), 'true');
+    }
   };
 
   useEffect(() => {

packages/app/src/systems/Error/machines/reportErrorMachine.tsx

@@ -4,6 +4,7 @@ import { assign, createMachine } from 'xstate';
 
 import { db } from '~/systems/Core/utils/database';
 import { ErrorProcessorService } from '~/systems/Error/services/ErrorProcessorService';
+import { getErrorIgnoreData } from '~/systems/Error/utils/getErrorIgnoreData';
 import { ReportErrorService } from '../services';
 
 export type ErrorMachineContext = {
@@ -124,6 +125,9 @@ export const reportErrorMachine = createMachine(
               target: 'idle',
             },
           ],
+          onError: {
+            target: 'idle',
+          },
         },
       },
       reporting: {
@@ -175,7 +179,13 @@ export const reportErrorMachine = createMachine(
       checkForErrors: async (context) => {
         await context.errorProcessorService.processErrors();
         const hasErrors = await context.reportErrorService.checkForErrors();
-        const errors = await context.reportErrorService.getErrors();
+        const errors = (await context.reportErrorService.getErrors()).filter(
+          (e) => !getErrorIgnoreData(e?.error)?.action
+        );
+        await context.reportErrorService.handleAndRemoveOldIgnoredErrors(
+          errors
+        );
+
         return {
           hasErrors,
           errors,

packages/app/src/systems/Error/services/ReportErrorService.tsx

@@ -1,6 +1,7 @@
 import type { StoredFuelWalletError } from '@fuel-wallet/types';
-import * as Sentry from '@sentry/react';
 import { db } from '~/systems/Core/utils/database';
+import { captureException } from '~/systems/Error/utils/captureException';
+import { getErrorIgnoreData } from '~/systems/Error/utils/getErrorIgnoreData';
 import { parseFuelError } from '../utils';
 
 export class ReportErrorService {
@@ -12,29 +13,32 @@ export class ReportErrorService {
       if (typeof window !== 'undefined' && (window as any).playwright) {
         return;
       }
-      Sentry.captureException(e.error, {
-        extra: e.extra,
-        tags: { id: e.id, manual: true },
-      });
+      captureException(e.error, e.extra);
     }
   }
 
   static async saveError(error: Error) {
-    const parsedError = parseFuelError(error);
-    if (!parsedError) {
-      console.warn(`Can't save error without a message`);
-      return;
-    }
-    if (!('id' in parsedError)) {
-      console.warn(`Can't save error without an id`);
-      return;
-    }
-    if (!db.isOpen() || db.hasBeenClosed()) {
-      console.warn('Error saving error: db is closed');
-      return;
-    }
-
     try {
+      const parsedError = parseFuelError(error);
+      const ignoreData = getErrorIgnoreData(parsedError?.error);
+      if (!parsedError) {
+        console.warn(`Can't save error without a message`);
+        return;
+      }
+      if (!('id' in parsedError)) {
+        console.warn(`Can't save error without an id`);
+        return;
+      }
+      if (ignoreData?.action === 'ignore') return;
+      if (ignoreData?.action === 'hide') {
+        // Directly report to Sentry and exit
+        captureException(parsedError.error, parsedError.extra);
+        return;
+      }
+      if (!db.isOpen() || db.hasBeenClosed()) {
+        console.warn('Error saving error: db is closed');
+        return;
+      }
       return await db.errors.add(parsedError);
     } catch (e) {
       console.warn('Failed to save error', e);
@@ -43,17 +47,40 @@ export class ReportErrorService {
 
   async checkForErrors(): Promise<boolean> {
     const errors = await this.getErrors();
-    return errors.length > 0;
+    return (
+      errors.filter((e) => !getErrorIgnoreData(e?.error)?.action).length > 0
+    );
   }
 
   async getErrors(): Promise<StoredFuelWalletError[]> {
-    return db.errors.toArray();
+    return await db.errors.toArray();
   }
 
   async clearErrors() {
     await db.errors.clear();
   }
 
+  async handleAndRemoveOldIgnoredErrors(errors: StoredFuelWalletError[]) {
+    const errorsBeingRemoved: Array<Promise<unknown>> = [];
+    // Convert to for of
+    for (const e of errors) {
+      const errorIgnoreData = getErrorIgnoreData(e?.error);
+      if (errorIgnoreData?.action) {
+        errorsBeingRemoved.push(
+          new Promise((resolve) => {
+            if (errorIgnoreData?.action === 'hide') {
+              captureException(e.error, e.extra);
+            }
+            return resolve(
+              this.dismissError(e.id).finally(() => resolve(true))
+            );
+          })
+        );
+      }
+    }
+    await Promise.all(errorsBeingRemoved);
+  }
+
   async dismissError(key: string) {
     if (!key) return;
     db.errors.delete(key);

packages/app/src/systems/Error/utils/captureException.ts

@@ -0,0 +1,9 @@
+import type { SentryExtraErrorData } from '@fuel-wallet/types';
+import * as Sentry from '@sentry/react';
+
+export function captureException(error: Error, extra: SentryExtraErrorData) {
+  Sentry.captureException(error, {
+    extra,
+    tags: { manual: true },
+  });
+}