Doesn't work when a page.tsx throws an unhandled exception. #106

carlos-dubon · 2024-02-10T19:05:37Z

The library stops working when a page.tsx throws an unhandled error. This results in a cascade of issues in my app.

Expected behaviour: read env vars even tho there is an unhandled exception in a page/layout..

// app/page.tsx
import { env } from 'next-runtime-env';
const NETWORKING_ENVIRONMENT = env('NEXT_PUBLIC_NETWORKING_ENVIRONMENT')

async function getData(): Promise<number> {
    throw new Error('This is a test error');
    return 1;
}

export default async function Home() {
    const pageData = await getData();

    return (
       <div>
home page
<div>ENV: {NETWORKING_ENVIRONMENT}</div> This stops reading/working...
</div>
    );
}

The text was updated successfully, but these errors were encountered:

ccxdev · 2024-02-23T11:02:50Z

I think I have similar issue. When navigating to non-existing page.

NextJS throw error:

Failed prop type: The prop href expects a string or object in <Link>, but got undefined instead.`

Because of appUrl and window['__ENV'] are undefined.

# .env

NEXT_PUBLIC_APP_URL=http://localhost:3000

// config.ts

import { env } from "next-runtime-env"

export const appUrl = env("NEXT_PUBLIC_APP_URL")

// not-found.tsx

'use client'

import Link from "next/link"
import { appUrl } from "./config.ts"

export default function NotFound() {
  console.log(window['__ENV']) // undefined
  console.log(appUrl) // undefined


  return <Link href={appUrl}>Back home</Link>
}

carlos-dubon · 2024-02-23T15:57:08Z

@nekotoriy I found a workaround, and it is using the provider aproach: https://github.com/expatfile/next-runtime-env/tree/main/examples/with-app-router-context This works for my use case.

NOTE: This is NOT a solution, so please don't close the issue!!

HofmannZ · 2024-03-26T11:02:25Z

Thanks for reporting this issue.

@carlos-dubon the env utility in the server is just a wrapper around process.env[key]. Can you confirm that `process.env.NEXT_PUBLIC_NETWORKING_ENVIRONMENT' does provide the correct variable in the server component.

@nekotoriy - I don't think this issue is related, as you are using the env utility in a client component. The question here is if Next.js wraps the not found page with the root layout which would expose the environment variables in the client.

emreakdas · 2024-03-26T12:28:47Z

@HofmannZ

 Error: Environment variable 'blablabla' is not public and cannot be accessed in the browser

I'm getting an error.

<PublicEnvScript />

installation.

HofmannZ · 2024-04-01T20:15:19Z

@emreakdas - Can you please provide some additional context?

emreakdas · 2024-04-01T22:21:36Z

@HofmannZ NextJS 14

I use it normally with this usage, there is nothing extra I do, but it gives the above error in the console

// app/layout.tsx
import { PublicEnvScript } from 'next-runtime-env';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <PublicEnvScript />
      </head>
      <body>
        {children}
      </body>
    </html>
  );
}

gregorybolkenstijn · 2024-04-02T13:36:54Z

@HofmannZ NextJS 14

I use it normally with this usage, there is nothing extra I do, but it gives the above error in the console
// app/layout.tsx
import { PublicEnvScript } from 'next-runtime-env';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <PublicEnvScript />
      </head>
      <body>
        {children}
      </body>
    </html>
  );
}

The env vars stop working once it hits a 404 page, a not-found.tsx in the root of the app directory. The root layout has the <PublicEnvScript /> component and is rendered, but window.__ENV is empty.

emreakdas · 2024-04-02T13:40:22Z

@HofmannZ NextJS 14
I use it normally with this usage, there is nothing extra I do, but it gives the above error in the console
// app/layout.tsx
import { PublicEnvScript } from 'next-runtime-env';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <PublicEnvScript />
      </head>
      <body>
        {children}
      </body>
    </html>
  );
}
The env vars stop working once it hits a 404 page, a not-found.tsx in the root of the app directory. The root layout has the <PublicEnvScript /> component and is rendered, but window.__ENV is empty.

unfortunately I have given up using this package, but what is the solution? isn't this a package problem?

HofmannZ · 2024-04-02T14:08:01Z

@HofmannZ NextJS 14
I use it normally with this usage, there is nothing extra I do, but it gives the above error in the console
// app/layout.tsx
import { PublicEnvScript } from 'next-runtime-env';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <PublicEnvScript />
      </head>
      <body>
        {children}
      </body>
    </html>
  );
}
The env vars stop working once it hits a 404 page, a not-found.tsx in the root of the app directory. The root layout has the <PublicEnvScript /> component and is rendered, but window.__ENV is empty.

@gregorybolkenstijn I will add an example to try and replicate.

HofmannZ · 2024-04-02T15:31:50Z

I was able to replicate the initial issue reported by @carlos-dubon. The problem appears to be that Next.js does not include the scripts from the top-level layout when a server error occurs. I attempted to address this by adding an error.tsx file to handle the error, but it didn't have any impact. I also tried switching from an HTML script tag to using Script from next/script, but the result was the same.

This seems to be a problem with Next.js itself, rather than with our package, and I've opened an issue on their GitHub repository. If you'd like to keep track of its progress, please give it an upvote: vercel/next.js#63980

However, I did confirm that everything works fine on the not-found page. (@gregorybolkenstijn, I can't reproduce your issue.)

gregorybolkenstijn · 2024-04-30T10:26:29Z

This comment in the. related Next.js issue gave us an idea of how to tackle this issue: vercel/next.js#63980 (comment)

The solution of adding a loading.tsx fixed it, but it also led to an unnecessary and intrusive loading state between pages. This other remark led us to another solution though:

If an error occurs on the server, react will skip SSR up to the nearest suspense boundary

So we wrapped the children in a <Suspense> in the root layout to allow that component to be partially rendered on the server correctly:

// app/layout.tsx
import { PublicEnvScript } from 'next-runtime-env';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <PublicEnvScript />
      </head>
      <body>
        <Suspense>{children}</Suspense>
      </body>
    </html>
  );
}

It has worked well for us, we have not experienced any issues.

lightrow · 2024-05-13T12:28:48Z

This comment in the. related Next.js issue gave us an idea of how to tackle this issue: vercel/next.js#63980 (comment)

The solution of adding a loading.tsx fixed it, but it also led to an unnecessary and intrusive loading state between pages. This other remark led us to another solution though:

If an error occurs on the server, react will skip SSR up to the nearest suspense boundary

So we wrapped the children in a <Suspense> in the root layout to allow that component to be partially rendered on the server correctly:
// app/layout.tsx
import { PublicEnvScript } from 'next-runtime-env';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <PublicEnvScript />
      </head>
      <body>
        <Suspense>{children}</Suspense>
      </body>
    </html>
  );
}
It has worked well for us, we have not experienced any issues.

that's bad for UX though, user just sees a blank page until everything is loaded.

A better solution is to set up an /error/page.tsx and /not-found/page.tsx and redirect to those pages on 500 or 404, that way the scripts will load.

HofmannZ added the bug Something isn't working label Mar 26, 2024

HofmannZ self-assigned this Apr 2, 2024

thomasdax98 mentioned this issue Sep 3, 2024

Improve rendering of site vivid-planet/comet-starter#351

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Doesn't work when a page.tsx throws an unhandled exception. #106

Doesn't work when a page.tsx throws an unhandled exception. #106

carlos-dubon commented Feb 10, 2024

ccxdev commented Feb 23, 2024 •

edited

Loading

carlos-dubon commented Feb 23, 2024

HofmannZ commented Mar 26, 2024

emreakdas commented Mar 26, 2024 •

edited

Loading

HofmannZ commented Apr 1, 2024

emreakdas commented Apr 1, 2024

gregorybolkenstijn commented Apr 2, 2024

emreakdas commented Apr 2, 2024

HofmannZ commented Apr 2, 2024

HofmannZ commented Apr 2, 2024

gregorybolkenstijn commented Apr 30, 2024

lightrow commented May 13, 2024 •

edited

Loading

Doesn't work when a page.tsx throws an unhandled exception. #106

Doesn't work when a page.tsx throws an unhandled exception. #106

Comments

carlos-dubon commented Feb 10, 2024

ccxdev commented Feb 23, 2024 • edited Loading

carlos-dubon commented Feb 23, 2024

HofmannZ commented Mar 26, 2024

emreakdas commented Mar 26, 2024 • edited Loading

HofmannZ commented Apr 1, 2024

emreakdas commented Apr 1, 2024

gregorybolkenstijn commented Apr 2, 2024

emreakdas commented Apr 2, 2024

HofmannZ commented Apr 2, 2024

HofmannZ commented Apr 2, 2024

gregorybolkenstijn commented Apr 30, 2024

lightrow commented May 13, 2024 • edited Loading

ccxdev commented Feb 23, 2024 •

edited

Loading

emreakdas commented Mar 26, 2024 •

edited

Loading

lightrow commented May 13, 2024 •

edited

Loading