feat: Add Sentry Profiler and profiling for code renderers (#3141)

src/config.js

@@ -5,6 +5,7 @@ const defaultConfig = {
   STRIPE_KEY: '',
   SENTRY_ENVIRONMENT: 'staging',
   SENTRY_TRACING_SAMPLE_RATE: 1.0,
+  SENTRY_PROFILING_SAMPLE_RATE: 0.1,
   SENTRY_SESSION_SAMPLE_RATE: 0.1,
   SENTRY_ERROR_SAMPLE_RATE: 1.0,
   GH_APP: 'codecov',
@@ -40,6 +41,12 @@ export function removeReactAppPrefix(obj) {
     )
   }
 
+  if ('SENTRY_PROFILING_SAMPLE_RATE' in keys) {
+    keys['SENTRY_PROFILING_SAMPLE_RATE'] = parseFloat(
+      keys['SENTRY_PROFILING_SAMPLE_RATE']
+    )
+  }
+
   if ('SENTRY_SESSION_SAMPLE_RATE' in keys) {
     keys['SENTRY_SESSION_SAMPLE_RATE'] = parseFloat(
       keys['SENTRY_SESSION_SAMPLE_RATE']

src/sentry.ts

@@ -116,6 +116,9 @@ export const setupSentry = ({
       // Adds Sentry Replay
       Sentry.replayIntegration(),
 
+      // Adds Sentry browser profiling
+      Sentry.browserProfilingIntegration(),
+
       // Adds routing instrumentation
       Sentry.reactRouterV5BrowserTracingIntegration({
         history,
@@ -134,6 +137,8 @@ export const setupSentry = ({
     replaysSessionSampleRate: config?.SENTRY_SESSION_SAMPLE_RATE,
     // Of the remaining x% of sessions, if an error happens start capturing
     replaysOnErrorSampleRate: config?.SENTRY_ERROR_SAMPLE_RATE,
+    // profiling sample rate
+    profilesSampleRate: config?.SENTRY_PROFILING_SAMPLE_RATE,
     beforeSend: (event, _hint) => {
       if (checkForBlockedUserAgents()) {
         return null

src/shared/RawFileViewer/RawFileViewer.spec.tsx

@@ -33,6 +33,7 @@ jest.mock('@sentry/react', () => {
   const originalModule = jest.requireActual('@sentry/react')
   return {
     ...originalModule,
+    withProfiler: (component: any) => component,
     captureMessage: jest.fn(),
   }
 })

src/ui/CodeRenderer/CodeRenderer.spec.tsx

@@ -2,6 +2,15 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 
 import CodeRenderer from './CodeRenderer'
 
+jest.mock('@sentry/react', () => {
+  const originalModule = jest.requireActual('@sentry/react')
+  return {
+    ...originalModule,
+    withProfiler: (component: any) => component,
+    captureMessage: jest.fn(),
+  }
+})
+
 window.requestAnimationFrame = (cb) => {
   cb(1)
   return 1

src/ui/CodeRenderer/CodeRenderer.tsx

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/react'
 import Highlight, { defaultProps } from 'prism-react-renderer'
 import { useLayoutEffect, useRef } from 'react'
 
@@ -103,4 +104,6 @@ function CodeRenderer({
   )
 }
 
-export default CodeRenderer
+export default Sentry.withProfiler(CodeRenderer, {
+  name: 'CodeRenderer',
+})

src/ui/VirtualFileRenderer/VirtualFileRenderer.spec.tsx

@@ -17,6 +17,7 @@ jest.mock('@sentry/react', () => {
   const originalModule = jest.requireActual('@sentry/react')
   return {
     ...originalModule,
+    withProfiler: (component: any) => component,
     captureMessage: jest.fn(),
   }
 })

src/ui/VirtualFileRenderer/VirtualFileRenderer.tsx

@@ -306,7 +306,7 @@ interface VirtualFileRendererProps {
   fileName: string
 }
 
-export function VirtualFileRenderer({
+function VirtualFileRendererComponent({
   code,
   coverage,
   fileName: fileType,
@@ -466,3 +466,10 @@ export function VirtualFileRenderer({
     </div>
   )
 }
+
+export const VirtualFileRenderer = Sentry.withProfiler(
+  VirtualFileRendererComponent,
+  {
+    name: 'VirtualFileRenderer',
+  }
+)