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:

Screen.Recording.2025-12-04.at.17.16.46.mov

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.

[Soxasora]

bundle sizes

before:

after:

This an ~8% decrease in overall bundle size, good job!
It becomes harder and harder to decrease the bundle size so an 8% is actually really great.

I'll approve this PR but I need you to remove everything other than the dynamic import. Thank you!

[Soxasora]

while this is nice to look at, the toaster already does the job of giving visual feedback, so this is unnecessary.

[brymut]

Fair, removed.

[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.