diff --git a/packages/app/playwright/e2e/ReportError.test.ts b/packages/app/playwright/e2e/ReportError.test.ts index 8fe2a04f9..29673d87b 100644 --- a/packages/app/playwright/e2e/ReportError.test.ts +++ b/packages/app/playwright/e2e/ReportError.test.ts @@ -59,7 +59,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 +85,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,12 +103,13 @@ 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 page.pause(); + expect((await getPageErrors(page)).length).toBe(0); }); test('should be able to dismiss all errors', async () => { await visit(page, '/'); @@ -116,7 +117,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', }, @@ -150,7 +151,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', }, @@ -176,10 +177,10 @@ test.describe('ReportError', () => { expect(errorsAfterReporting.length).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 +196,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 +211,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 +232,39 @@ 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 reload(page); + await getByAriaLabel(page, 'Menu').click(); + // hasErrors should not be visible + expect + .poll(() => page.locator(`[data-key="hasErrors"]`).isVisible(), { + timeout: 1000, + }) + .toBeFalsy(); + await reload(page); + const errorsAfterReporting = await getPageErrors(page); + expect + .poll(() => errorsAfterReporting.length, { + timeout: 1000, + }) + .toBe(0); + }); }); diff --git a/packages/app/src/systems/Error/machines/reportErrorMachine.tsx b/packages/app/src/systems/Error/machines/reportErrorMachine.tsx index 6f2000836..0bfc14a76 100644 --- a/packages/app/src/systems/Error/machines/reportErrorMachine.tsx +++ b/packages/app/src/systems/Error/machines/reportErrorMachine.tsx @@ -179,7 +179,9 @@ export const reportErrorMachine = createMachine( const errors = (await context.reportErrorService.getErrors()).filter( (e) => !getErrorIgnoreData(e?.error)?.action ); - context.reportErrorService.handleAndRemoveOldIgnoredErrors(errors); + await context.reportErrorService.handleAndRemoveOldIgnoredErrors( + errors + ); return { hasErrors, diff --git a/packages/app/src/systems/Error/services/ReportErrorService.tsx b/packages/app/src/systems/Error/services/ReportErrorService.tsx index 54d676c78..41cf8e30a 100644 --- a/packages/app/src/systems/Error/services/ReportErrorService.tsx +++ b/packages/app/src/systems/Error/services/ReportErrorService.tsx @@ -51,9 +51,7 @@ export class ReportErrorService { } async getErrors(): Promise { - return (await db.errors.toArray()).filter( - (e) => !getErrorIgnoreData(e?.error)?.action - ); + return await db.errors.toArray(); } async clearErrors() { @@ -65,7 +63,7 @@ export class ReportErrorService { // Convert to for of for (const e of errors) { const errorIgnoreData = getErrorIgnoreData(e?.error); - if (!errorIgnoreData?.action) { + if (errorIgnoreData?.action) { errorsBeingRemoved.push( new Promise((resolve) => { if (errorIgnoreData?.action === 'hide') { diff --git a/packages/app/src/systems/Error/utils/getErrorIgnoreData.ts b/packages/app/src/systems/Error/utils/getErrorIgnoreData.ts index bef580c7f..97ec52e11 100644 --- a/packages/app/src/systems/Error/utils/getErrorIgnoreData.ts +++ b/packages/app/src/systems/Error/utils/getErrorIgnoreData.ts @@ -124,13 +124,13 @@ const IGNORED_ERRORS: IgnoredError[] = [ }, { value: 'Error fetching asset from db', - field: 'message', + field: 'name', comparison: 'partial', action: 'hide', }, { value: 'React Error', - field: 'message', + field: 'name', comparison: 'partial', action: 'hide', },