Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MCR-4097 Fix frontend monitoring, add back error boundary fallback UI #2433

Merged
merged 17 commits into from
May 17, 2024

Conversation

haworku
Copy link
Contributor

@haworku haworku commented May 8, 2024

Summary

  • Get proper error component rendering again when JS error thrown
    • See 4910df5
    • Fixed this error by bringing back <PageHeading/>. This is needed because theusePage context is not reliable if the entire app is crashing, it's too far down in the stack and will not be available in a crash.
  • Get thrown errors logging again in monitoring (added New Relic snippet to handle this)
  • New Relic config set up in higher level environment

Config changes
I added 4 new config for each environment for new relic. Several are the same across all environments. I think eventually REACT_APP_NR_LICENSE_KEY could totally replace existing NR_LICENSE_KEY used to set up OTEL - but decided that could switch on future PR since its a change to existing setup

New Relic Changes

  • set up three new applications for NR browser monitoring mc-review-web (for dev), mc-review-web-val, and mc-review-web-prod
  • added errors from val and prod to the app-web errors alert policies
  • added to dashboards

Related issues

https://jiraent.cms.gov/browse/MCR-4097

Test cases covered

No tests but made a way to manually check monitoring

QA guidance

  • Login in as Admin user
  • Navigate to /settings?test=crash

You should see

  1. the error boundary which is a react error component NOT a blank screen
  2. an error in the browsering monitoring for that environment alert in slack if this is triggered in a higher environment
    Screenshot 2024-05-17 at 10 52 38 AM
  3. (if this is set up) an alert in mc-review alerts channel on slack

@haworku haworku changed the title Mcr 4097 error boundary MCR-4097 Fix frontend monitoring, add back error boundary fallback UI May 8, 2024
function App({
authMode,
apolloClient,
s3Client,
}: AppProps): React.ReactElement {
const environmentName = process.env.REACT_APP_STAGE_NAME || ''
const isHigherEnv = ['prod', 'val', 'dev'].includes(environmentName )
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

STAGE_NAME in dev is confusingly main, so we'll want that in this array. Really not sure why it was called main 🤷🏻‍♂️

@haworku haworku merged commit 1bc95e4 into main May 17, 2024
28 checks passed
@haworku haworku deleted the mcr-4097-error-boundary branch May 17, 2024 19:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants