feat: Expand utility of rejectNetworkError (#3743)

Author: nsdeschenes

package.json

@@ -6,6 +6,7 @@
     "dev": "yarn start",
     "start": "vite --host",
     "build": "tsc -b && vite build",
+    "preview": "vite preview",
     "test": "vitest run --config ./vitest.config.mjs",
     "test:changed": "vitest run --changed --config ./vitest.config.mjs",
     "test:watch": "vitest watch --changed --config ./vitest.config.mjs",

src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.jsx

@@ -14,6 +14,12 @@ import upsideDownUmbrella from './assets/error-upsidedown-umbrella.svg'
 import styles from './NetworkErrorBoundary.module.css'
 
 const errorToUI = {
+  400: {
+    illustration: upsideDownUmbrella,
+    title: 'Bad Request',
+    description: null,
+    showDocs: true,
+  },
   401: {
     illustration: openUmbrella,
     title: <a href="/login">Please log in.</a>,

src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx

@@ -225,6 +225,64 @@ describe('NetworkErrorBoundary', () => {
     })
   })
 
+  describe('when the children component has a 400 error', () => {
+    describe('when not running in self-hosted mode', () => {
+      it('renders a Bad Request', async () => {
+        const { user } = setup()
+        render(<App status={400} />, {
+          wrapper: wrapper(),
+        })
+
+        const textBox = await screen.findByRole('textbox')
+        await user.type(textBox, 'fail')
+
+        const badRequest = await screen.findByText(/Bad Request/)
+        expect(badRequest).toBeInTheDocument()
+      })
+
+      it('renders return to previous page button', async () => {
+        const { user } = setup()
+        render(<App status={400} />, {
+          wrapper: wrapper(),
+        })
+
+        const textBox = await screen.findByRole('textbox')
+        await user.type(textBox, 'fail')
+
+        const button = await screen.findByText('Return to previous page')
+        expect(button).toBeInTheDocument()
+      })
+    })
+
+    describe('when running in self hosted mode', () => {
+      it('renders a Bad Request', async () => {
+        const { user } = setup({ isSelfHosted: true })
+        render(<App status={400} />, {
+          wrapper: wrapper(),
+        })
+
+        const textBox = await screen.findByRole('textbox')
+        await user.type(textBox, 'fail')
+
+        const badRequest = await screen.findByText(/Bad Request/)
+        expect(badRequest).toBeInTheDocument()
+      })
+
+      it('renders return to previous page button', async () => {
+        const { user } = setup({ isSelfHosted: true })
+        render(<App status={400} />, {
+          wrapper: wrapper(),
+        })
+
+        const textBox = await screen.findByRole('textbox')
+        await user.type(textBox, 'fail')
+
+        const button = await screen.findByText('Return to previous page')
+        expect(button).toBeInTheDocument()
+      })
+    })
+  })
+
   describe('when the children component has a 404 error', () => {
     describe('when not running in self-hosted mode', () => {
       it('renders a Not found', async () => {

src/shared/api/rejectNetworkError.test.ts

@@ -0,0 +1,167 @@
+import {
+  _rejectNetworkError,
+  determineSentryLevel,
+  determineStatusCode,
+  NetworkErrorName,
+  NotFoundErrorObject,
+  OwnerNotActivatedErrorObject,
+  ParsingErrorObject,
+} from './rejectNetworkError'
+
+const mocks = vi.hoisted(() => ({
+  withScope: vi.fn(),
+  addBreadcrumb: vi.fn(),
+  captureMessage: vi.fn(),
+  setFingerprint: vi.fn(),
+  setTags: vi.fn(),
+  setLevel: vi.fn(),
+}))
+
+vi.mock('@sentry/react', async () => {
+  const actual = await vi.importActual('@sentry/react')
+  return {
+    ...actual,
+    withScope: mocks.withScope.mockImplementation((fn) =>
+      fn({
+        addBreadcrumb: mocks.addBreadcrumb,
+        setFingerprint: mocks.setFingerprint,
+        captureMessage: mocks.captureMessage,
+        setTags: mocks.setTags,
+        setLevel: mocks.setLevel,
+      })
+    ),
+  }
+})
+
+afterEach(() => {
+  vi.clearAllMocks()
+})
+
+const parsingError: ParsingErrorObject = {
+  errorName: 'Parsing Error',
+  errorDetails: {
+    error: Error('bad parsing'),
+    caller: 'TestQueryOpts',
+  },
+}
+
+const notFoundError: NotFoundErrorObject = {
+  errorName: 'Not Found Error',
+  errorDetails: {
+    caller: 'TestQueryOpts',
+  },
+}
+
+const ownerNotActivatedError: OwnerNotActivatedErrorObject = {
+  errorName: 'Owner Not Activated',
+  data: { detail: 'test' },
+  errorDetails: {
+    caller: 'TestQueryOpts',
+  },
+}
+
+describe('rejectNetworkError', () => {
+  const testCases = [
+    { errorObject: parsingError, level: 'error', status: 400 },
+    { errorObject: notFoundError, level: 'info', status: 404 },
+    { errorObject: ownerNotActivatedError, level: 'info', status: 403 },
+  ]
+
+  describe.each(testCases)(
+    'when the error is $errorObject.errorName',
+    ({ errorObject, level, status }) => {
+      it('adds a breadcrumb', () => {
+        _rejectNetworkError(errorObject).catch((_e) => {})
+
+        expect(mocks.addBreadcrumb).toHaveBeenCalledWith({
+          category: 'network.error',
+          level,
+          message: `${errorObject.errorDetails.caller} - ${errorObject.errorName}`,
+          data:
+            'error' in errorObject.errorDetails
+              ? errorObject.errorDetails.error
+              : undefined,
+        })
+      })
+
+      it('sets the tags', () => {
+        _rejectNetworkError(errorObject).catch((_e) => {})
+
+        expect(mocks.setTags).toHaveBeenCalledWith({
+          caller: errorObject.errorDetails.caller,
+          errorName: errorObject.errorName,
+        })
+      })
+
+      it('sets the level', () => {
+        _rejectNetworkError(errorObject).catch((_e) => {})
+
+        expect(mocks.setLevel).toHaveBeenCalledWith(level)
+      })
+
+      it('sets the fingerprint', () => {
+        _rejectNetworkError(errorObject).catch((_e) => {
+          expect(mocks.setFingerprint).toHaveBeenCalledWith([
+            `${errorObject.errorDetails.caller} - ${errorObject.errorName}`,
+          ])
+        })
+      })
+
+      it('captures the error with Sentry', () => {
+        _rejectNetworkError(errorObject).catch((_e) => {})
+
+        expect(mocks.captureMessage).toHaveBeenCalledWith(
+          `${errorObject.errorDetails.caller} - ${errorObject.errorName}`
+        )
+      })
+
+      it('returns a rejected promise', () => {
+        const result = _rejectNetworkError(errorObject)
+
+        expect(result).rejects.toStrictEqual({
+          dev: `${errorObject.errorDetails.caller} - ${errorObject.errorName}`,
+          data: 'data' in errorObject ? errorObject.data : undefined,
+          status,
+        })
+      })
+    }
+  )
+})
+
+describe('determineSentryLevel', () => {
+  const testCases = [
+    { errorName: 'Parsing Error', level: 'error' },
+    { errorName: 'Not Found Error', level: 'info' },
+    { errorName: 'Owner Not Activated', level: 'info' },
+    { errorName: 'Unknown Error', level: 'error' },
+  ]
+
+  describe.each(testCases)(
+    'when the error is $errorName',
+    ({ errorName, level }) => {
+      it('returns the correct level', () => {
+        // casting here to avoid type error
+        expect(determineSentryLevel(errorName as NetworkErrorName)).toBe(level)
+      })
+    }
+  )
+})
+
+describe('determineStatusCode', () => {
+  const testCases = [
+    { errorName: 'Parsing Error', status: 400 },
+    { errorName: 'Not Found Error', status: 404 },
+    { errorName: 'Owner Not Activated', status: 403 },
+    { errorName: 'Unknown Error', status: 400 },
+  ]
+
+  describe.each(testCases)(
+    'when the error is $errorName',
+    ({ errorName, status }) => {
+      it('returns the correct status code', () => {
+        // casting here to avoid type error
+        expect(determineStatusCode(errorName as NetworkErrorName)).toBe(status)
+      })
+    }
+  )
+})

src/shared/api/rejectNetworkError.ts

@@ -0,0 +1,100 @@
+/* eslint-disable camelcase */
+import * as Sentry from '@sentry/react'
+
+type ParsingError = 'Parsing Error'
+type NotFoundError = 'Not Found Error'
+type OwnerNotActivatedError = 'Owner Not Activated'
+export type NetworkErrorName =
+  | ParsingError
+  | NotFoundError
+  | OwnerNotActivatedError
+
+export type ParsingErrorObject = {
+  errorName: ParsingError
+  errorDetails: { error: Error; caller: string }
+}
+
+export type NotFoundErrorObject = {
+  errorName: NotFoundError
+  errorDetails: { caller: string }
+}
+
+export type OwnerNotActivatedErrorObject = {
+  errorName: OwnerNotActivatedError
+  data: { detail?: React.ReactNode }
+  errorDetails: { caller: string }
+}
+
+type NetworkErrorObject =
+  | ParsingErrorObject
+  | NotFoundErrorObject
+  | OwnerNotActivatedErrorObject
+
+/**
+ * @private exporting for testing - do not use
+ */
+export function determineSentryLevel(errorName: NetworkErrorName) {
+  switch (errorName) {
+    case 'Parsing Error':
+      return 'error'
+    case 'Not Found Error':
+      return 'info'
+    case 'Owner Not Activated':
+      return 'info'
+    default:
+      return 'error'
+  }
+}
+
+/**
+ * @private exporting for testing - do not use
+ */
+export function determineStatusCode(errorName: NetworkErrorName) {
+  switch (errorName) {
+    case 'Parsing Error':
+      return 400
+    case 'Not Found Error':
+      return 404
+    case 'Owner Not Activated':
+      return 403
+    default:
+      return 400
+  }
+}
+
+export function _rejectNetworkError(error: NetworkErrorObject) {
+  const {
+    errorName,
+    errorDetails: { caller },
+  } = error
+
+  const devMsg = `${caller} - ${errorName}`
+
+  Sentry.withScope((scope) => {
+    const level = determineSentryLevel(errorName)
+    scope.addBreadcrumb({
+      category: 'network.error',
+      level: level,
+      message: devMsg,
+      data:
+        'error' in error.errorDetails ? error.errorDetails.error : undefined,
+    })
+
+    scope.setTags({
+      caller: caller,
+      errorName: errorName,
+    })
+
+    scope.setLevel(level)
+    scope.setFingerprint([devMsg])
+    scope.captureMessage(devMsg)
+  })
+
+  const status = determineStatusCode(errorName)
+
+  return Promise.reject({
+    dev: devMsg,
+    data: 'data' in error ? error.data : undefined,
+    status: status,
+  })
+}

vite.config.mjs

@@ -60,6 +60,9 @@ export default defineConfig((config) => {
     server: {
       port: 3000,
     },
+    preview: {
+      port: 3000,
+    },
     build: {
       outDir: 'build',
       sourcemap: runSentryPlugin,