Improve error message for `Uncaught Rendering Suspense fallback` after fresh setup and writing one query

[Southclaws]

What is the problem?

Just installed Blitz by following the docs, some types were generated incorrectly (which i fixed) but it seems queries are broken too:

I wrote a simple query that literally just prints the args:

export default resolver.pipe(resolver.zod(GetPublicProfile), async (input) => {
  console.log(input)
  return {}
})

Also wrote it another way as I wasn't sure which was is the proper way, found both in docs:

export default async function getPublicProfile(params: z.infer<typeof GetPublicProfile>, ctx: Ctx) {
   console.log("querying", params)
}

Paste all your error logs here:

backend:

[Rendering Suspense fallback...]
error - [Rendering Suspense fallback...] { page: '/[username]' }

frontend:

Uncaught Rendering Suspense fallback...: 

It seems Blitz is omitting information here though, there must be more to this error but I can't figure out how to enable any form of dev/verbose logging.

Paste all relevant code snippets here:

above

What are detailed steps to reproduce this?

fresh install then add one new query to users that does nothing but print args.

Run blitz -v and paste the output here:

❯ blitz -v
Blitz version: 2.0.0-beta.3 (global)
Blitz version: 2.0.0-beta.3 (local)
macOS Monterey | darwin-arm64 | Node: v16.13.1


 Package manager: npm

  System:
    OS: macOS 12.1
    CPU: (8) arm64 Apple M1
    Memory: 79.94 MB / 16.00 GB
    Shell: 0.61.0 - /opt/homebrew/bin/nu
  Binaries:
    Node: 16.13.1 - ~/Library/Caches/fnm_multishells/89818_1662221995014/bin/node
    Yarn: 1.22.15 - ~/Library/Caches/fnm_multishells/89818_1662221995014/bin/yarn
    @blitzjs/auth: 2.0.0-beta.3 => 2.0.0-beta.3 
    @blitzjs/next: 2.0.0-beta.3 => 2.0.0-beta.3 
    @blitzjs/rpc: 2.0.0-beta.3 => 2.0.0-beta.3 
    @prisma/client: 4.0.0 => 4.0.0 
    blitz: 2.0.0-beta.3 => 2.0.0-beta.3 
    next: 12.2.5 => 12.2.5 
    prisma: 4.0.0 => 4.0.0 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ^4.5.3 => 4.8.2

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

No response

[iojcde]

Having similar issues here. However, I only have a single useSession hook, and no queries on the page.

[kivi]

I have upgraded to to 2.0 and I am getting also this message: [Rendering Suspense fallback...]

[mbrookson]

Also seeing this issue when trying to use the Blitz useQuery function in a component.

Blitz version: 2.0.0-beta.3 (global)
Blitz version: 2.0.0-beta.3 (local)
macOS Monterey | darwin-arm64 | Node: v16.17.0


 Package manager: npm

  System:
    OS: macOS 12.5.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 70.28 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - /opt/homebrew/opt/node@16/bin/node
    Yarn: Not Found
    npm: 8.15.0 - /opt/homebrew/opt/node@16/bin/npm
  npmPackages:
    @blitzjs/auth: 2.0.0-beta.3 => 2.0.0-beta.3 
    @blitzjs/next: 2.0.0-beta.3 => 2.0.0-beta.3 
    @blitzjs/rpc: 2.0.0-beta.3 => 2.0.0-beta.3 
    @prisma/client: 4.0.0 => 4.0.0 
    blitz: 2.0.0-beta.3 => 2.0.0-beta.3 
    next: 12.2.5 => 12.2.5 
    prisma: 4.3.1 => 4.3.1 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ^4.5.3 => 4.8.2

[mbrookson]

Ah! I have just solved this by adding a top-level Suspense wrapper in my _app.tsx component like so:

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <ErrorBoundary FallbackComponent={RootErrorFallback}>
        <Suspense fallback="Loading...">
          <Component {...pageProps} />
        </Suspense>
      </ErrorBoundary>
    </ChakraProvider>
  )
}

export default withBlitz(MyApp)

This exists in the default index.tsx page but when you add more pages and use Blitz features there needs to be a suspense boundary added around those pages/components.

[Southclaws]

Ah, I added one to the page itself but I guess it must be inside the top level _app.tsx then?

🥇 for worst error message of the year 😂

[dillondotzip]

Ah, I added one to the page itself but I guess it must be inside the top level _app.tsx then?

🥇 for worst error message of the year 😂

The error message should definitely be more clear, especially when DX is the blitz north star. Now that recipes are basically migrated, our main focus is going to be stability and that will include better documentation & better error messages.

[Southclaws]

Great to hear!

I didn't notice I'm on a beta version, I just followed the tutorial and ran the npx blitz commands. Should I backdate to 1.x? I want to ship something quick rather than wait for bug fixes, I thought blitz was stable now but it seems to be in a bit of state of flux. Is this the best course of action?