Next.js Discord

Discord Forum

500 Internal Server - On dynamic route

Unanswered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
When trying to access a dynamic route that doesn't exist, I get a black screen with the message "500 Internal server". This issue only occurs in production. On my local computer, such requests are correctly redirected to my not-found page.

Here are my files (simplified version):

blog/post/[post_slug]/page.tsx

async function getPost(post_slug: string) {
    const response = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_BASE_URL}/blog/post?slug=${post_slug}`)
    if(!response.ok) throw new Error("Failed to fetch data")

    const data = await response.json()
    if(!data || !data.success) throw new Error("Unsuccessful request to fetch data")

    return data
}

export default async function Product({ params }) {
    const { post_slug } = params

    const data = await getPost(post_slug)
    const { post } = data

    return (
        <div>{post.title} and other post data</div>
    )
}


blog/error.tsx

"use client"

import { notFound } from 'next/navigation'
 
export default function Error({
 
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {

  notFound()
 
  return (<></>)
}


@/app/not-found.tsx

export default function NotFound() {
  return (
    <div>Page not found</div>
  )
}


I deployed my app on Netlify. Is there a way to access website logs on Netlify?

16 Replies

Asian black bearOP
Thanks a lot! I spotted the error by examining Netlify functions logs. It is triggered when trying to access the post.title property, which doesn't exist since the post is null...
However the are a couple of things I don't understand:

- why this part of my code is reached even if in my code an error is supposed to be thrown if there is no post?

- Why the error-handling logic is followed in development but not in production? (In development there is a toast notification showing the error but it still renders the NotFound page ui)

- Even if, I hadn't thrown an error in my getPost function, shouldn't the error caused by accessing the post title property still be handled by my error.tsx file?
because you are throwing notFound() in the error.tsx
so the error page cannot be render
Asian black bearOP
I'll already tried and I was seeing the same error. But I'll try again
Asian black bearOP
I think the error has something to do with the fact that my error.tsx file is a client component while my post page is a server component
Yes sure! How should I share it?
Ray
I would change this too
async function getPost(post_slug: string) {
    const response = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_BASE_URL}/blog/post?slug=${post_slug}`)
    if(!response.ok) console.log("Failed to fetch data")

    const data = await response.json()
    if(!data || !data?success) console.log("Unsuccessful request to fetch data")

    return data
}
// error.jsx
'use client' // Error components must be Client Components
 
import { useEffect } from 'react'
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])
 
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  )
}
Asian black bearOP
Thanks! Thanks to you I think I fixed it 🙌

Sorry it was a silly mistake on my side...

Actually even if the api request is not returning a post, it is still returning data.
So the errors were never thrown

I could spot it by adding the following code in my component:

    const data = await getPost(post_slug)
    if(!data) notFound() // the conditition is never fulfilled
    const { post } = data
    if(!post) notFound() // this condition is always fulfilled
Ray
oh I think you could do this
const data = await getPost(post_slug)
if(!data?.post) notFound()
Asian black bearOP
Yes sure! Thanks again 🙌