enhance: add dynamic import for stack trace decoding in error boundary.

[brymut]

Description

Addresses #1832

Reducing bundle size by importing decodeMinifiedStackTrace when copy error button is actually clicked. Rare user path so should have minimal impact. Noticed in a different project so figured I could bring it here and looks like it has significant bundle savings.

Screenshots

Before fix: After fix:

From 1.01MB -> 917kB, which is about 10%

For testing the functionality I added a window function to force an error in ErrorBoundary constructor method:

constructor (props) {
    super(props)

    // Define a state variable to track whether is an error or not
    this.state = {
      hasError: false,
      error: undefined,
      errorInfo: undefined
    }

    // DEV error trigger
    if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
      window.__triggerErrorBoundary = () => {
        this.setState({
          hasError: true,
          error: new Error('Test error triggered via window.__triggerErrorBoundary()')
        })
      }
    }
  }

Vid:

https://github.com/user-attachments/assets/6dedfcf6-e8ba-499e-96c1-4f89008372b9

Checklist

Are your changes backward compatible? Please answer below:

For example, a change is not backward compatible if you removed a GraphQL field or dropped a database column.

On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below: 9

For frontend changes: Tested on mobile, light and dark mode? Please answer below:

Did you introduce any new environment variables? If so, call them out explicitly here: N

Did you use AI for this? If so, how much did it assist you? Y, coming up with a way to test that wasn't too hacky.

[Soxasora]

This is an amazing find! It actually works great.

I’ll test the difference in bundle size in a fake-production environment and get back to you.

[brymut]

I’ll test the difference in bundle size in a fake-production environment and get back to you.

Actually, would be cool to know how you do your fake prod environment if you don't mind with a quick overview of what you skip/include.

[Soxasora]

In this particular case there was no need to run a full production environment. So I just used @next/bundle-analyzer, wrapped our next.config.js using withBundleAnalyzer and ran npm run build. You’d be automatically directed to the generated bundle overview.

[brymut]

Ahh fair, considered using bundle analyzer too but wasn't too sure on what metric to use to measure the savings between the parsed/gzipped for the client. That's why I used the first load reporting next has for its builds.