Source map for troubleshooting post-build errors?

[nocturne yew]

Hi all

Apologies if you've seen this post in another Discord server - I honestly thought I was posting it here, lol!

As per title, I’m new to Next and I’m wanting to understand whether there’s a way to troubleshoot issues on a built site.

Context: During dev I have no issues, and I can run a build script without issues as well. However when I run my build (npm run start) I get a 500 on the initial document load, even though the page still loads without any visible errors. So essentially I get a 200 response right after a 500. The error itself I can share later, but it’s essentially a call() error. It seems that it’s trying to call a react component that doesn’t exist.

My question is really how I go about troubleshooting this principally rather than the error itself? Since I can’t see the exact origin it makes it difficult. Is there a build config I can set to make my code build with a source map for example?

[scenic sleet]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[spice atlas]

I think there is an error/warning during the build?

[nocturne yew]

Nope that’s my problem, none during the build. Only happens when I run it post build. Incredibly weird!

[spice atlas]

/** @type {import('next').NextConfig} */
const nextConfig = {
  productionBrowserSourceMaps: true,
};

module.exports = nextConfig;

this can enable source map in production build

[nocturne yew]

Thank you this gave me the clue I needed. It seems that my google analytics script was forcing all my components to be client-rendered, which in turn caused the errors not to show up during my build

[nocturne yew]

I still can't see where the error occurs but at least I can now systematically remove things to troubleshoot

[spice atlas]

how do you load the analytics script?

[nocturne yew]

Thanks for your help I appreciate it>

I looked at a couple of methodologies and started using the below as this is what worked for me. It now warned me that it's best to wrap that in a suspense boundery so I've done that.

'use client'
import { pageview } from '@/app/lib'
import { usePathname, useSearchParams } from 'next/navigation'
import Script from 'next/script'
import { useEffect } from 'react'

export default function Analytics() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    if (pathname) {
      pageview(pathname)
    }
  }, [pathname, searchParams])

  return (
    <>
      <Script
        id="gtm-script"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer', "GTM-PQGP9C7M");
  `,
        }}
      />
    </>
  )
}

useSearchParams was essentially causing this.

I think I figured it out though... it seems like it couldn't connect to my API during build, and I had forgotten to force the page to SSR. I don't know how it was still collecting or loading the information though lol. Anyway let me try go through the issue to see if I can now replicate it. Thanks again!

[spice atlas]

yes you should wrap Analytics with Suspense

[nocturne yew]

I eventually fixed my issue, leaving this here for anyone interested.

The problem is related to MUI in combination with NextJS. It seems that support for Next 13+ is not quite there yet, or I have perhaps missed a key point regarding how it is set up. Removing MUI components fixed my issue.