feat(protocol-designer): introduce sentry

.github/workflows/pd-test-build-deploy.yaml

@@ -83,8 +83,12 @@ jobs:
       - uses: ./.github/actions/js/setup
       - name: 'build PD'
         env:
+          NODE_OPTIONS: '--max-old-space-size=5120'
           OT_PD_MIXPANEL_ID: ${{ secrets.OT_PD_MIXPANEL_ID }}
           OT_PD_MIXPANEL_DEV_ID: ${{ secrets.OT_PD_MIXPANEL_DEV_ID }}
+          # ToDo(kk:04/23/2025) need to setup sentry org account and project
+          # OT_PD_SENTRY_DSN: ${{ secrets.OT_PD_SENTRY_DNS }}
+          # OT_PD_SENTRY_DEV_DSN: ${{ secrets.OT_PD_SENTRY_DEV_DSN }}
         run: |
           make -C protocol-designer NODE_ENV=development
       - name: 'upload github artifact'
@@ -93,6 +97,23 @@ jobs:
           name: 'pd-artifact'
           path: protocol-designer/dist
 
+  # ToDo(kk:04/23/2025) need to setup sentry org account and project
+  # upload-sourcemaps-pd:
+  #   timeout-minutes: 10
+  #   name: 'upload protocol designer source maps'
+  #   needs: ['build-pd']
+  #   runs-on: 'ubuntu-24.04'
+  #   if: github.event_name != 'pull_request'
+
+  #   uses: getsentry/action-release@v3
+  #   env:
+  #     SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+  #     SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+  #     SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+  #   with:
+  #     name: pd-artifact
+  #     sourcemaps: ./dist
+
   deploy-pd:
     timeout-minutes: 10
     name: 'deploy protocol designer'

protocol-designer/package.json

@@ -26,6 +26,7 @@
     "@opentrons/components": "link:../components",
     "@opentrons/step-generation": "link:../step-generation",
     "@opentrons/shared-data": "link:../shared-data",
+    "@sentry/react": "^9.12.0",
     "@types/redux-actions": "2.6.1",
     "@types/styled-components": "^5.1.26",
     "@types/ua-parser-js": "0.7.36",
@@ -70,6 +71,7 @@
     "yup": "1.3.3"
   },
   "devDependencies": {
-    "@types/mixpanel-browser": "^2.35.6"
+    "@types/mixpanel-browser": "^2.35.6",
+    "@sentry/vite-plugin": "^3.3.1"
   }
 }

protocol-designer/src/index.tsx

@@ -8,6 +8,7 @@
 import { GlobalStyle } from './components/atoms'
 import { configureStore } from './configureStore'
 import { initialize } from './initialize'
+import { initializeSentry } from './resources/sentry'
 
 // initialize Redux
 const store = configureStore()
@@ -16,6 +17,9 @@
 // initialize analytics
 initializeMixpanel(store.getState())
 
+// initialize Sentry
+initializeSentry(store.getState())
+
 const container = document.getElementById('root')
 if (container == null) throw new Error('Failed to find the root element')
 const root = ReactDOM.createRoot(container)

protocol-designer/src/resources/ProtocolDesignerAppFallback.tsx

@@ -1,5 +1,7 @@
+import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
+import { captureException } from '@sentry/react'
 import { v4 as uuidv4 } from 'uuid'
 
 import {
@@ -20,16 +22,18 @@ import type { FallbackProps } from 'react-error-boundary'
 import type { AnalyticsEvent } from '../analytics/mixpanel'
 import type { ThunkDispatch } from '../types'
 
+const LOG_LEVEL = 'error'
+
 export function ProtocolDesignerAppFallback({
   error,
   resetErrorBoundary,
 }: FallbackProps): JSX.Element {
   const { t } = useTranslation('shared')
   const dispatch: ThunkDispatch<any> = useDispatch()
 
-  // Note (kk:02/12/25) this is to track a users' error since many users send a screenshot.
+  // Note errorId will be used to track a specific user's error
+  // when the support team share the data(screenshot or errorId) with us
   const errorId = uuidv4()
-
   const errorEvent: AnalyticsEvent = {
     name: 'protocolDesignerAppError',
     properties: {
@@ -47,6 +51,12 @@ export function ProtocolDesignerAppFallback({
     dispatch(actions.saveProtocolFile())
   }
 
+  useEffect(() => {
+    if (error) {
+      captureException(error, { extra: { errorId }, level: LOG_LEVEL })
+    }
+  }, [error, errorId])
+
   return (
     <Modal type="warning" title={t('error_boundary_title')} marginLeft="0">
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>

protocol-designer/src/resources/sentry.ts

@@ -0,0 +1,50 @@
+import {
+  browserTracingIntegration,
+  init,
+  replayIntegration,
+} from '@sentry/react'
+
+import { getHasOptedIn } from '../analytics/selectors'
+import { getIsProduction } from '../networking/opentronsWebApi'
+
+import type { BaseState } from '../types'
+
+let isSentryInitialized = false
+
+const sentryDsn = getIsProduction()
+  ? process.env.OT_PD_SENTRY_DNS
+  : process.env.OT_PD_SENTRY_DEV_DNS
+
+export const initializeSentry = (state: BaseState): void => {
+  const optedIn = getHasOptedIn(state)?.hasOptedIn ?? false
+  if (isSentryInitialized) {
+    console.warn('Sentry is already initialized')
+    return
+  }
+
+  if (sentryDsn == null) {
+    console.warn('Sentry DSN not found - Sentry is not initialized')
+    return
+  }
+  if (optedIn) {
+    try {
+      init({
+        dsn: sentryDsn,
+        integrations: [replayIntegration(), browserTracingIntegration()],
+        tracesSampleRate: 1.0,
+        tracePropagationTargets: [
+          'localhost',
+          /^https:\/\/designer\.opentrons\.com/,
+        ],
+        replaysSessionSampleRate: 0.0, // No Session Replay
+        replaysOnErrorSampleRate: 0.0, // No Session Replay
+      })
+      isSentryInitialized = true
+      console.log('Sentry.init done')
+    } catch (error) {
+      console.error('Error initializing Sentry:', error)
+    }
+  } else {
+    console.debug('User has opted out of Sentry; stopping Sentry')
+  }
+}

protocol-designer/vite.config.mts

@@ -1,25 +1,31 @@
 import path from 'path'
-import { defineConfig } from 'vite'
+import { sentryVitePlugin } from '@sentry/vite-plugin'
 import react from '@vitejs/plugin-react'
-import postCssImport from 'postcss-import'
+import lostCss from 'lost'
 import postCssApply from 'postcss-apply'
 import postColorModFunction from 'postcss-color-mod-function'
+import postCssImport from 'postcss-import'
 import postCssPresetEnv from 'postcss-preset-env'
-import lostCss from 'lost'
+import { defineConfig } from 'vite'
+
 import { versionForProject } from '../scripts/git-version.mjs'
+
 import type { UserConfig } from 'vite'
 
 // eslint-disable-next-line import/no-default-export
 export default defineConfig(
   async (): Promise<UserConfig> => {
     const OT_PD_VERSION = await versionForProject('protocol-designer')
     const OT_PD_BUILD_DATE = new Date().toUTCString()
+    const mode = process.env.NODE_ENV ?? 'development'
     return {
       // this makes imports relative rather than absolute
       base: '',
       build: {
         // Relative to the root
         outDir: 'dist',
+        // sourcemap for Sentry
+        sourcemap: true,
       },
       plugins: [
         react({
@@ -37,6 +43,18 @@ export default defineConfig(
             }
           },
         },
+        sentryVitePlugin({
+          org: 'opentrons-sw',
+          project: 'protocol-designer',
+          authToken: process.env.OT_SENTRY_AUTH_TOKEN,
+          telemetry: false,
+          sourcemaps: {
+            assets: ['./dist/**'],
+            ignore: ['./node_modules/**'],
+            filesToDeleteAfterUpload:
+              mode === 'production' ? ['./dist/**/*.js.map'] : undefined,
+          },
+        }),
       ],
       optimizeDeps: {
         esbuildOptions: {
@@ -74,7 +92,7 @@ export default defineConfig(
         port: 5178,
         watch: {
           ignored: ['**/cypress/downloads/**'],
-        }
+        },
       },
     }
   }