CORE-998: add release field to sentry init (#96)

* add release field to sentry init

* update ts-utils

* add prop userUuid

* remove wrong dependencies

* wrong value for uuid

Author: jomcarvajal

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.18.2",
+  "version": "1.18.3",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/index.d.ts",
@@ -35,7 +35,7 @@
   "devDependencies": {
     "npm-run-all": "^4.1.5",
     "@ladle/react": "^2.1.2",
-    "@openstax/ts-utils": "^1.8.0",
+    "@openstax/ts-utils": "^1.27.6",
     "@playwright/test": "^1.25.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.8",

src/components/ErrorBoundary.tsx

@@ -38,6 +38,7 @@ export const ErrorBoundary = ({
   sentryInit?: Sentry.BrowserOptions;
   errorFallbacks?: { [_: string]: JSX.Element }
   errorLevels?: { [_: string]: Sentry.SeverityLevel }
+  userUuid?: string; // Optional user UUID to set in Sentry
 }) => {
   const [error, setError] = React.useState<SentryError | null>(null);
   const errorFallbacks: { [_: string]: JSX.Element } = { ...defaultErrorFallbacks, ...props.errorFallbacks };
@@ -48,7 +49,12 @@ export const ErrorBoundary = ({
   // Optionally re-render with the children so they can display inline errors with <ErrorMessage />
   const renderElement = error && renderFallback ? (typedFallback || fallback) : <>{children}</>;
 
-  type WindowWithUserData = Window & { _OX_USER_DATA?: User }
+  type FrontendConfigType = {
+    releaseId: string;
+    [key: string]: unknown; // any other properties, can vary depending on the frontend config repository
+  };
+
+  type WindowWithUserData = Window & { _OX_USER_DATA?: User, _OX_FRONTEND_CONFIG?: FrontendConfigType }
 
   React.useEffect(() => {
     if (!sentryDsn && !sentryInit) {
@@ -61,6 +67,7 @@ export const ErrorBoundary = ({
     initCalled.current = true;
     Sentry.init(sentryInit || {
       dsn: sentryDsn,
+      release: (window as WindowWithUserData)._OX_FRONTEND_CONFIG?.releaseId,
       environment: window.location.hostname,
       initialScope: {
         user: { uuid: (window as WindowWithUserData)._OX_USER_DATA?.uuid },
@@ -73,6 +80,12 @@ export const ErrorBoundary = ({
     });
   }, [sentryDsn, sentryInit]);
 
+  React.useEffect(() => {
+    if (initCalled.current && (window as WindowWithUserData)._OX_USER_DATA?.uuid !== props.userUuid) {
+      Sentry.setUser({ uuid: props.userUuid });
+    }
+  }, [props.userUuid]);
+
   // There are two references to the render element here because the Sentry fallback (and
   // onError) are not used for unhandledrejection events. To support those events, we provide
   // setError in a context to reuse the same error state and render logic.