fix: Show header on global error #4686

Error: No QueryClient set, use QueryClientProvider to set one ❯ useQueryClient node_modules/@tanstack/react-query/src/QueryClientProvider.tsx:49:5 ❯ useBaseQuery node_modules/@tanstack/react-query/build/lib/useBaseQuery.mjs:12:23 ❯ Module.useQuery node_modules/@tanstack/react-query/src/useQuery.ts:140:3 ❯ Module.useUser src/services/user/useUser.ts:434:32 ❯ Module.useUserAccessGate src/layouts/BaseLayout/hooks/useUserAccessGate.js:43:7 ❯ NetworkErrorBoundary src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.jsx:129:19 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14

src/layouts/SidebarLayout/SidebarLayout.test.tsx > SidebarLayout > it renders with children > renders the sidebar: src/services/user/useUser.ts#L434

src/layouts/SidebarLayout/SidebarLayout.test.tsx > SidebarLayout > it renders with children > renders the content of the page (children): src/services/user/useUser.ts#L434

src/layouts/SidebarLayout/SidebarLayout.test.tsx > SidebarLayout > it renders the content with default styles > renders the sidebar: src/services/user/useUser.ts#L434

src/layouts/SidebarLayout/SidebarLayout.test.tsx > SidebarLayout > it renders the content with custom styles > renders the sidebar: src/services/user/useUser.ts#L434

src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx > NetworkErrorBoundary > when the children component has a 401 error > renders a please login: src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx#L152

TestingLibraryElementError: Unable to find an element with the text: /Please log in/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <div> <div> <label for="text" > Text </label> <input id="text" type="text" /> </div> <div> Oh no </div> <button> Go back </button> <div> <p> Custom Error has been thrown </p> </div> </div> </div> </body> Ignored nodes: comments, script, style <body> <div> <div> <div> <label for="text" > Text </label> <input id="text" type="text" /> </div> <div> Oh no </div> <button> Go back </button> <div> <p> Custom Error has been thrown </p> </div> </div> </div> </body> ❯ waitForWrapper node_modules/@testing-library/dom/dist/wait-for.js:163:27 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:86:33 ❯ src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx:152:38

src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx > NetworkErrorBoundary > when the children component has a 401 error > renders the detail from data: src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx#L165

TestingLibraryElementError: Unable to find an element with the text: /not authenticated/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <div> <div> <label for="text" > Text </label> <input id="text" type="text" /> </div> <div> Oh no </div> <button> Go back </button> <div> <p> Custom Error has been thrown </p> </div> </div> </div> </body> Ignored nodes: comments, script, style <body> <div> <div> <div> <label for="text" > Text </label> <input id="text" type="text" /> </div> <div> Oh no </div> <button> Go back </button> <div> <p> Custom Error has been thrown </p> </div> </div> </div> </body> ❯ waitForWrapper node_modules/@testing-library/dom/dist/wait-for.js:163:27 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:86:33 ❯ src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx:165:45

src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx > NetworkErrorBoundary > when the children component has a 401 error > renders return to previous page button: src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx#L178

TestingLibraryElementError: Unable to find an element with the text: Return to previous page. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <div> <div> <label for="text" > Text </label> <input id="text" type="text" /> </div> <div> Oh no </div> <button> Go back </button> <div> <p> Custom Error has been thrown </p> </div> </div> </div> </body> Ignored nodes: comments, script, style <body> <div> <div> <div> <label for="text" > Text </label> <input id="text" type="text" /> </div> <div> Oh no </div> <button> Go back </button> <div> <p> Custom Error has been thrown </p> </div> </div> </div> </body> ❯ waitForWrapper node_modules/@testing-library/dom/dist/wait-for.js:163:27 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:86:33 ❯ src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx:178:41

src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx > NetworkErrorBoundary > when the children component has a 401 error > sends metric to sentry: src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx#L192

AssertionError: expected "spy" to be called with arguments: [ …(3) ] Received: Number of calls: 0 Ignored nodes: comments, script, style <html> <head /> <body> <div> <div> <div> <label for="text" > Text </label> <input id="text" type="text" /> </div> <div> Oh no </div> <button> Go back </button> <div> <p> Custom Error has been thrown </p> </div> </div> </div> </body> </html> ❯ src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx:192:42 ❯ runWithExpensiveErrorDiagnosticsDisabled node_modules/@testing-library/dom/dist/config.js:47:12 ❯ checkCallback node_modules/@testing-library/dom/dist/wait-for.js:124:77 ❯ Timeout.checkRealTimersCallback node_modules/@testing-library/dom/dist/wait-for.js:118:16

src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx > NetworkErrorBoundary > when the children component has a 403 error > renders a Unauthorized: src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx#L211

TestingLibraryElementError: Unable to find an element with the text: /Unauthorized/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <div> <div> <label for="text" > Text </label> <input id="text" type="text" /> </div> <div> Oh no </div> <button> Go back </button> <div> <p> Custom Error has been thrown </p> </div> </div> </div> </body> Ignored nodes: comments, script, style <body> <div> <div> <div> <label for="text" > Text </label> <input id="text" type="text" /> </div> <div> Oh no </div> <button> Go back </button> <div> <p> Custom Error has been thrown </p> </div> </div> </div> </body> ❯ waitForWrapper node_modules/@testing-library/dom/dist/wait-for.js:163:27 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:86:33 ❯ src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx:211:41

Test Runner #4 - CRACO

Process completed with exit code 1.

Upload Bundle Stats - Staging

Process completed with exit code 1.

Upload Bundle Stats - Production

Process completed with exit code 1.

Test Runner #3 - CRACO

The job was canceled because "_4" failed.

Test Runner #3 - CRACO

Process completed with exit code 1.

Test Runner #3 - CRACO

The operation was canceled.