NextJS Sentry Integration

[ChristopherChudzicki]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/5771

How can this be tested?

Trigger some errors in the frontend and check that (a) appropriate UI is shown, (b) errors show up in Sentry

1. Now, set env vars... You something specific to you for the sentry environment name

   # in env/frontend.local.env
   NEXT_PUBLIC_SENTRY_DSN="https://8131564a9b9e31ac3cbcf7952f0fea80@o48788.ingest.us.sentry.io/4506260054540288"
   # suggest using your initials
   NEXT_PUBLIC_SENTRY_ENV=abc-test

2. Visit https://mit-office-of-digital-learning.sentry.io/issues/?end=2024-10-16T16%3A09%3A48&environment=cc-test&project=4506260054540288&start=2024-10-16T16%3A08%3A47 and change the env filter to your environment
3. Restart the nextjs app (e.g., restart docker) and trigger some errors.
4. Async Errors: Visit /sentry-example-page; click Throw async error!
   • The errors should show up in your sentry environment
5. Sync Errors: Visit /sentry-example-page; click Render error!
   • synchronous errors during rendering crash the app unless they are caught by an error boundary. We catch the error with error.ts. You should see a generic error page.
   • The error should show up in your sentry environment
6. Forbidden Errors: Visit /sentry-example-page; click Forbidden error!
   • You should get the Not Allowed page
   • The error should show up in your sentry environment
7. Root Layout Error:
   • Production only: This uses global-error.ts, which only functions when running in production mode. So to test this, you need to run NextJS locally in production mode. This should be easier than it is, but for now:

   # If not using docker, skip to `NODE_ENV...` commands below.
   docker compose stop watch
   docker compose run --rm --service-ports watch bash
   
   # now within the watch container:
   NODE_ENV=production yarn workspace main build
   NODE_ENV=production yarn workspace main next start
   

   • (if you're not using docker, run the last two NODE_ENV... commands in your terminal)
   • Now that you're running in production mode, click "Root Layout Error (production only)
     " in the header. You should see an error page, but no header/footer. (The error occurred in the header. We can't show it.)

Before merging

• Remove the testing page and header button
• merge ol-infra PR

[ChristopherChudzicki]

During production builds, they are disabled to prevent you leaking your source on the client, unless you specifically opt-in with the configuration flag.

From docs

Seems like silly obfuscation to me.

Anyway, our source is public. I think keeping the source maps public will mean we don't need to upload them to sentry, but we'll only know for sure after we deploy it.

[ChristopherChudzicki]

This, and a lot of stuff below, was injected automatically by @sentry/wizard CLI

[ChristopherChudzicki]

To be removed prior to merging. (Added by @sentry/wizard and modified a bit, but useful for testing this PR.)

[ChristopherChudzicki]

This file was unnecessary... NextJS has the error boundaries builtin, we just provide relevant UI at error.ts pages.

I removed it because it was also a little buggy... It had this render method:

  render() {
    if (this.state.hasError && isForbiddenError(this.state.error)) {
      return <ForbiddenPage />
    }
    return this.props.children
  }

which meant that the error was silently suppressed if it was not a ForbiddenError. (The error "should" have been re-thrown, but really we should have just used error.tsx.)

[ChristopherChudzicki]

I extremely doubt we will ever use this file, but @sentry/wizard added it, and there's no real harm in having it.

[gumaerc]

👍 LGTM

Just remember to remove that example page and header error button