Query inside a custom ErrorBoundary is executed multiple times, before the fallback is rendered

Open

#30 opened on May 20, 2021 9 comments 0 reactions 0 assignees View on GitHub

kind/bug legacy-framework status/ready-to-work-on

Dominant language: JavaScript
Stars: 3
Forks: 2
PR merge metrics: No merged PRs in 30d

Description

### What is the problem?

A ChildComponent executes a query, which throws a 404 NotFoundError. The ChildComponent lives inside an ErrorBoundary with its own fallback. The query is being retried at least 3 times before the boundary finally renders the fallback and calls its `onError` callback.

We chatted about this in a discordia help channel: https://discord.com/channels/802917734999523368/814628031322128394/844583897223135303

Expectation: No retries on 404.

### Paste all your error logs here:

```

workbox Router is responding to: / ./workbox-32092201.js:47:24
workbox Network request for '/' returned a response with status '200'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to '/' ./workbox-32092201.js:47:24
workbox Router is responding to: /_next/static/chunks/webpack.js?ts=1621520427922 ./workbox-32092201.js:47:24
workbox Router is responding to: /_next/static/chunks/main.js?ts=1621520427922 ./workbox-32092201.js:47:24
workbox Router is responding to: /_next/static/chunks/pages/_app.js?ts=1621520427922 ./workbox-32092201.js:47:24
workbox Router is responding to: /_next/static/chunks/pages/index.js?ts=1621520427922 ./workbox-32092201.js:47:24
workbox Router is responding to: /_next/static/chunks/react-refresh.js?ts=1621520427922 ./workbox-32092201.js:47:24
workbox Router is responding to: /_next/static/development/_buildManifest.js?ts=1621520427922 ./workbox-32092201.js:47:24
workbox Router is responding to: /_next/static/development/_ssgManifest.js?ts=1621520427922 ./workbox-32092201.js:47:24
workbox Network request for '/_next/static/chunks/webpack.js?ts=1621520427922' returned a response with status '200'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to '/_next/static/chunks/webpack.js?ts=1621520427922' ./workbox-32092201.js:47:24
workbox Network request for '/_next/static/chunks/main.js?ts=1621520427922' returned a response with status '200'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to '/_next/static/chunks/main.js?ts=1621520427922' ./workbox-32092201.js:47:24
workbox Network request for '/_next/static/chunks/pages/_app.js?ts=1621520427922' returned a response with status '200'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to '/_next/static/chunks/pages/_app.js?ts=1621520427922' ./workbox-32092201.js:47:24
workbox Network request for '/_next/static/chunks/react-refresh.js?ts=1621520427922' returned a response with status '200'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to '/_next/static/chunks/react-refresh.js?ts=1621520427922' ./workbox-32092201.js:47:24
workbox Network request for '/_next/static/chunks/pages/index.js?ts=1621520427922' returned a response with status '200'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to '/_next/static/chunks/pages/index.js?ts=1621520427922' ./workbox-32092201.js:47:24
workbox Network request for '/_next/static/development/_buildManifest.js?ts=1621520427922' returned a response with status '200'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to '/_next/static/development/_buildManifest.js?ts=1621520427922' ./workbox-32092201.js:47:24
workbox Network request for '/_next/static/development/_ssgManifest.js?ts=1621520427922' returned a response with status '200'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to '/_next/static/development/_ssgManifest.js?ts=1621520427922' ./workbox-32092201.js:47:24
workbox Router is responding to: /_next/static/chunks/0.js ./workbox-32092201.js:47:24
workbox Router is responding to: /_next/webpack-hmr?page=/ ./workbox-32092201.js:47:24
workbox Router is responding to: /logo.png ./workbox-32092201.js:47:24
workbox No route found for: /api/users/queries/myFailingQuery ./workbox-32092201.js:47:24
workbox No route found for: /api/users/queries/getCurrentUser ./workbox-32092201.js:47:24
workbox Router is responding to: https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;700&display=swap ./workbox-32092201.js:47:24
workbox Network request for '/_next/static/chunks/0.js' returned a response with status '200'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to '/_next/static/chunks/0.js' ./workbox-32092201.js:47:24
workbox Router is responding to: /favicon.ico ./workbox-32092201.js:47:24
workbox Network request for '/_next/webpack-hmr?page=/' returned a response with status '200'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to '/_next/webpack-hmr?page=/' ./workbox-32092201.js:47:24
workbox Network request for '/logo.png' returned a response with status '200'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to '/logo.png' ./workbox-32092201.js:47:24
workbox Network request for 'https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;700&display=swap' returned a response with status '0'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to 'https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;700&display=swap' ./workbox-32092201.js:47:24
workbox Network request for '/favicon.ico' returned a response with status '200'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to '/favicon.ico' ./workbox-32092201.js:47:24
workbox Router is responding to: https://fonts.gstatic.com/s/librefranklin/v7/jizDREVItHgc8qDIbSTKq4XkRiUf2zcZiVbJ.woff2 ./workbox-32092201.js:47:24
Object { name: "NotFoundError", message: "This could not be found", code: undefined, statusCode: 404, meta: undefined, stack: "" }
query.js:317:19
Uncaught
Object { name: "NotFoundError", message: "This could not be found", code: undefined, statusCode: 404, meta: undefined, stack: "" }
useBaseQuery.js:91
The above error occurred in the component:

Sadge404@webpack-internal:///./pages/index.tsx:167:81
ErrorBoundary@webpack-internal:///../../node_modules/react-error-boundary/dist/react-error-boundary.umd.js:71:37
main
div
Home@webpack-internal:///./pages/index.tsx:190:111
WithSuperJSON@webpack-internal:///../../node_modules/babel-plugin-superjson-next/dist/tools.js:110:26
BlitzInnerRoot@webpack-internal:///../../node_modules/@blitzjs/core/dist/blitzjs-core.esm.js:697:19
Layout@webpack-internal:///./app/core/layouts/Layout.tsx:13:15
ErrorBoundary@webpack-internal:///../../node_modules/react-error-boundary/dist/react-error-boundary.umd.js:71:37
Suspense
App@webpack-internal:///./pages/_app.tsx:25:19
Hydrate@webpack-internal:///../../node_modules/react-query/es/hydration/react.js:26:18
QueryClientProvider@webpack-internal:///../../node_modules/react-query/es/react/QueryClientProvider.js:37:16
BlitzProvider@webpack-internal:///../../node_modules/@blitzjs/core/dist/blitzjs-core.esm.js:476:16
BlitzOuterRoot@webpack-internal:///../../node_modules/@blitzjs/core/dist/blitzjs-core.esm.js:728:28
ErrorBoundary@webpack-internal:///../../node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47
ReactDevOverlay@webpack-internal:///../../node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:20
Container@webpack-internal:///../../node_modules/next/dist/client/index.js:154:20
AppContainer@webpack-internal:///../../node_modules/next/dist/client/index.js:643:18
Root@webpack-internal:///../../node_modules/next/dist/client/index.js:779:19

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. react-dom.development.js:21953
The above error occurred in the component:

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. react-dom.development.js:21953
React 17
NextJS 3
React
NextJS 3
React 2
NextJS 3
React
NextJS 3
index.tsx:4
index.js:895
NextJS 3
next-dev.js:2
next-dev.js:153
NextJS 5
Uncaught
Object { name: "NotFoundError", message: "This could not be found", code: undefined, statusCode: 404, meta: undefined, stack: "" }
useBaseQuery.js:91
workbox Network request for 'https://fonts.gstatic.com/s/librefranklin/v7/jizDREVItHgc8qDIbSTKq4XkRiUf2zcZiVbJ.woff2' returned a response with status '200'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to 'https://fonts.gstatic.com/s/librefranklin/v7/jizDREVItHgc8qDIbSTKq4XkRiUf2zcZiVbJ.woff2' ./workbox-32092201.js:47:24
workbox Router is responding to: https://fonts.gstatic.com/s/librefranklin/v7/jizDREVItHgc8qDIbSTKq4XkRiUf2zcZiVbJ.woff2 ./workbox-32092201.js:47:24
workbox Router is responding to: /_next/static/development/_devPagesManifest.json ./workbox-32092201.js:47:24
workbox Network request for '/_next/static/development/_devPagesManifest.json' returned a response with status '200'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to '/_next/static/development/_devPagesManifest.json' ./workbox-32092201.js:47:24
workbox Network request for 'https://fonts.gstatic.com/s/librefranklin/v7/jizDREVItHgc8qDIbSTKq4XkRiUf2zcZiVbJ.woff2' returned a response with status '200'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to 'https://fonts.gstatic.com/s/librefranklin/v7/jizDREVItHgc8qDIbSTKq4XkRiUf2zcZiVbJ.woff2' ./workbox-32092201.js:47:24
workbox Router is responding to: /favicon.ico ./workbox-32092201.js:47:24
workbox Network request for '/favicon.ico' returned a response with status '200'. ./workbox-32092201.js:47:24
workbox Using NetworkOnly to respond to '/favicon.ico' ./workbox-32092201.js:47:24

```

### Paste all relevant code snippets here:

index.tsx
```
const Sadge404 = () => {
const [data] = useQuery(myFailingQuery, null)

return

My nice template

}

const Home: BlitzPage = () => {
const { reset } = useQueryErrorResetBoundary()
return (

My dank fallback

} onReset={reset}>

)
}
//... etc
```

Query:
```
import { Ctx, NotFoundError } from "blitz"

export default async function myFailingQuery(_ = null, { session }: Ctx) {
throw new NotFoundError()
return "I never can reach my full potential"
}

```

### What are detailed steps to reproduce this?

Here is repo (`blitz new`) with the above query and components added to `index.tsx`, which reproduces the issue.
Just install and run `blitz dev`

https://github.com/lksnmnn/blitz-404-error-boundary-issue

### Run `blitz -v` and paste the output here:

```
macOS Catalina | darwin-x64 | Node: v12.18.0

blitz: 0.35.0 (global)
blitz: 0.35.0 (local)

Package manager: npm
System:
OS: macOS 10.15.7
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 24.12 GB / 64.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
Yarn: Not Found
npm: 6.14.11 - ~/.nvm/versions/node/v12.18.0/bin/npm
Watchman: Not Found
npmPackages:
@prisma/client: ~2.20 => 2.20.1
blitz: 0.35.0 => 0.35.0
prisma: ~2.20 => 2.20.1
react: 0.0.0-experimental-6a589ad71 => 0.0.0-experimental-6a589ad71
react-dom: 0.0.0-experiment
```

This does also occure with node 14 and npm 7.

### Please include below any other applicable logs and screenshots that show your problem:

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Query inside a custom ErrorBoundary is executed multiple times, before the fallback is rendered

Description

Contributor guide

Assessment

Get new issues in your inbox