Update env configs and monitoring docs

.envrc

@@ -31,7 +31,10 @@ export JWT_SECRET='3fd2e448ed2cec1fa46520f1b64bcb243c784f68db41ea67ef9abc45c1295
 
 export REACT_APP_OTEL_COLLECTOR_URL='http://localhost:4318/v1/traces'
 export REACT_APP_LD_CLIENT_ID='this-value-can-be-set-in-local-if-desired'
-
+export REACT_APP_NR_ACCOUNT_ID='this-value-is-ignored-local-but-used-in-deployed-env'
+export REACT_APP_NR_TRUST_KEY='this-value-is-ignored-local-but-used-in-deployed-env'
+export REACT_APP_NR_LICENSE_KEY='this-value-is-ignored-local-but-used-in-deployed-env'
+export REACT_APP_NR_APPLICATION_ID='this-value-is-ignored-local-but-used-in-deployed-env'
 # Sources a local overrides file. You can export any variables you
 # need for your local setup there. Any that match variables set here
 # will overwrite them.

README.md

@@ -306,16 +306,7 @@ You'll need to add this service to our deployment GitHub Actions workflows:
 
 ## Monitoring
 
-We currently are using Open Telemetry for distributed tracing, with our OTEL exporters pointed to New Relic. In order to access our New Relic dashboard, you'll first need to request access from someone on the team. Once access has been granted, the following should be used to sign in to your account:
-
-1. Open https://one.newrelic.com and log in to your account using your `@teamtrussworks.com` email address.
-2. You will be redirected to the CMS SSO for Active Directory in Azure.
-3. Log in with an email address consisting of your EUA ID + `@cloud.cms.gov`.
-4. Enter your EUA password at the next screen.
-5. You should be prompted to choose your MFA type, either by SMS or by phone.
-6. Enter your MFA token.
-
-You should now be at our New Relic dashboard where all our OTEL metrics are being displayed.
+Read more in [monitoring documentation](./docs/technical-design/monitoring.md).
 
 ## Launch Darkly
 

docs/Configuration.md

@@ -187,6 +187,21 @@ Read by `app-web`
 
 This is the client ID for Launch Darkly in our frontend. This key is designed to have limited access since it's exposed in our client side code. There is one per environment of local/dev/val/prod.
 
+### `REACT_APP_NR_*`
+
+Read by `app-web`
+
+There are vars per environment for dev/val/prod.
+- REACT_APP_NR_ACCOUNT_ID
+- REACT_APP_NR_APPLICATION_ID
+
+These are the same in all environments.
+- REACT_APP_NR_LICENSE_KEY
+- REACT_APP_NR_TRUST_KEY
+
+
+These env vars configure new relic for browser monitoring. They are interpolated into browser monitoring inline script. If we move towards integration via New Relic APM instead, these variables can be deleted.
+
 ## Email configuration
 
 Important email configuration is stored in AWS Parameter Store. Reference for the expected values can be found in [Confluence](https://qmacbis.atlassian.net/wiki/spaces/OY2/pages/3164864517/Emails)
@@ -211,7 +226,7 @@ We plan to move this to the DB down the road. Until then, know that if these val
 
 #### `/configuration/email/rateHelpAddress`
 
-*[same in prod/val* This the help address displayed in state emails for contacting the rate policy team.
+*[same in prod/val]* This the help address displayed in state emails for contacting the rate policy team.
 
 #### `/configuration/email/reviewHelpAddress`
 
@@ -223,7 +238,7 @@ We plan to move this to the DB down the road. Until then, know that if these val
 
 #### `/configuration/email/dmcpReview`
 
-*[environment specific]* This contains the DMCP inbox for external communication and Q&A notifications. 
+*[environment specific]* This contains the DMCP inbox for external communication and Q&A notifications.
 
 
 #### `/configuration/email/oact`

docs/Technologies.md

@@ -40,15 +40,15 @@ Protobuf is a tool for serializing key-value data. Designed for API requests, th
 
 ### New Relic
 
-New Relic is used for endpoint monitoring and to observe Open Telemetry data in deployed environments. Read more in [Monitoring](../README.md#monitoring).
+New Relic is used for endpoint monitoring and to observe Open Telemetry data in deployed environments. Read more in [Monitoring](./technical-design/monitoring.md).
 
 ### Open Telemetry
 
 Open Telemetry (OTEL) is an ecosystem of tools for collecting data about an application and its services. It provides a standard way to instrument code and is vendor agnostic. We send our OTEL data to New Relic where it helps us assemble tracing of all of our requests and record errors.
 
 ### Jaeger
 
-[Jaeger](https://www.jaegertracing.io/) is used to observe Open Telemetry data in local dev. Read more in the [Jaeger docs](https://www.jaegertracing.io/docs/1.35/getting-started/) or visit port [16686](http://localhost:16686)) on local dev.
+[Jaeger](https://www.jaegertracing.io/) is used to observe Open Telemetry data in local dev. Read more in [Monitoring](./technical-design/monitoring.md)
 
 ## React Web Application
 

docs/technical-design/monitoring.md

@@ -0,0 +1,32 @@
+---
+title: Monitoring
+---
+
+# How to use and validate monitoring tools
+
+## Background
+We gather performance data and pay attention to metrics related to our production application. We receive alerts for particular error conditions so that we can investigate errors before they are reported by users. This document explains more about the monitoring tools in use in our application.
+
+## Open Telemetry (OTEL)
+Forthcoming.
+
+### Jaeger
+See [Jaeger docs](https://www.jaegertracing.io/docs/1.35/getting-started/) or visit port [16686](http://localhost:16686) on local dev.
+
+## New Relic
+We export all monitoring and peformance data to New Relic. In order to access our New Relic dashboard, you'll first need to request access from someone on the team. Once access has been granted, the following should be used to sign in to your account:
+
+### Steps to check new relic dashboard
+1. Open https://one.newrelic.com and log in to your account using your `@teamtrussworks.com` email address.
+2. You will be redirected to the CMS SSO for Active Directory in Azure.
+3. Log in with an email address consisting of your EUA ID + `@cloud.cms.gov`.
+4. Enter your EUA password at the next screen.
+5. You should be prompted to choose your MFA type, either by SMS or by phone.
+6. Enter your MFA token. You should now be at our New Relic dashboard where all our OTEL metrics are being displayed.
+
+### Technical details
+- New Relic browser monitoring is currently set up in `App.tsx` via inline script. More about this approach in the [instrumentation for browser monitoring](https://docs.newrelic.com/docs/browser/new-relic-browser/page-load-timing-resources/instrumentation-browser-monitoring/).
+
+## Related Documentation
+- Often we have how tos that relate to other how tos or other documentation.
+- They can be listed here.

services/app-web/serverless.yml

@@ -34,6 +34,10 @@ custom:
   react_app_auth_mode: ${env:REACT_APP_AUTH_MODE}
   nr_license_key: ${env:NR_LICENSE_KEY, ssm:/configuration/nr_license_key}
   react_app_ld_client_id: ${env:REACT_APP_LD_CLIENT_ID, ssm:/configuration/react_app_ld_client_id_feds}
+  react_app_nr_account_id: ${env:REACT_APP_NR_ACCOUNT_ID, ssm:/configuration/react_app_nr_account_id}
+  react_app_nr_trust_key: ${env:REACT_APP_NR_TRUST_KEY, ssm:/configuration/nr_trust_key}
+  react_app_nr_license_key: ${env:REACT_APP_NR_TRUST_KEY, ssm:/configuration/nr_license_key}
+  react_app_nr_application_id: ${env:REACT_APP_NR_APPLICATION_ID, ssm:/configuration/react_app_application_key}
   serverlessTerminationProtection:
     stages:
       - dev
@@ -75,7 +79,11 @@ custom:
         export REACT_APP_S3_QA_BUCKET=${self:custom.s3_qa_bucket_name}
         export REACT_APP_STAGE_NAME=${sls:stage}
         export REACT_APP_OTEL_COLLECTOR_URL=${self:custom.api_url}/otel
-        export REACT_APP_LD_CLIENT_ID=${self:custom.react_app_ld_client_id}
+        export REACT_APP_NR_ACCOUNT_ID=${self:custom.react_app_nr_account_id
+        export REACT_APP_NR_APPLICATION_ID=${self:custom.react_app_nr_application_id}
+        export REACT_APP_NR_LICENSE_KEY=${self:custom.react_app_nr_license_key}
+        export REACT_APP_NR_TRUST_KEY=${self:custom.react_app_nr_trust_key}
+
 
         yarn run build
         yarn build-storybook

services/app-web/src/pages/App/App.tsx

@@ -35,7 +35,7 @@ function App({
 }: AppProps): React.ReactElement {
     const environmentName = process.env.REACT_APP_STAGE_NAME || ''
     const isHigherEnv = ['prod', 'val', 'dev'].includes(environmentName )
-    const nrSnippet = generateNRScriptContent({accountID: getEnv('REACT_APP_NR_ACCOUNT_ID'), trustKey: getEnv('REACT_APP_NR_TRUST_KEY'), applicationID: getEnv('REACT_APP_NR_APPLICATION_ID'), licenseKey: getEnv('REACT_APP_NR_LISCENSE_KEY')})
+    const nrSnippet = generateNRScriptContent({accountID: getEnv('REACT_APP_NR_ACCOUNT_ID'), trustKey: getEnv('REACT_APP_NR_TRUST_KEY'), applicationID: getEnv('REACT_APP_NR_APPLICATION_ID'), licenseKey: getEnv('REACT_APP_NR_LICENSE_KEY')})
     useScript({inlineScriptAsString: nrSnippet, src:'', id: 'newrelic', showScript: isHigherEnv})
 
     return (