Merge pull request #155 from decentraland/feat/add-sentry-to-wp

LautaroPetaccio · web-flow · commit c1871ad18f89 · 2026-03-04T15:23:40.000-03:00
feat: Add Sentry to WP
diff --git a/.github/workflows/build-release.yaml b/.github/workflows/build-release.yaml
@@ -47,3 +47,14 @@ jobs:
           gitlab-pipeline-url: ${{ secrets.GITLAB_CDN_DEPLOYER_URL }}
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Create Sentry release
+        if: github.event_name == 'release' && github.event.action == 'created'
+        uses: getsentry/action-release@v1
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_ORG: ${{ vars.SENTRY_ORG }}
+          SENTRY_PROJECT: ${{ vars.SENTRY_PROJECT }}
+        with:
+          sourcemaps: ${{ github.workspace }}/dist
+          version: '${{ vars.SENTRY_RELEASE_PREFIX }}@${{ github.event.release.tag_name }}'
+          url_prefix: '~'
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "@babylonjs/materials": "^4.2.2",
     "@dcl/schemas": "^20.3.3",
     "@dcl/ui-env": "^1.5.1",
+    "@sentry/browser": "^10.42.0",
     "classnames": "^2.3.1",
     "decentraland-ui": "^6.17.1",
     "fast-deep-equal": "^3.1.3",
@@ -76,4 +77,4 @@
     "typescript": "^5.2.2",
     "vite": "^6.3.5"
   }
-}
+}
diff --git a/src/components/Preview/Preview.tsx b/src/components/Preview/Preview.tsx
@@ -15,6 +15,7 @@ import { useController } from '../../hooks/useController'
 import { render } from '../../lib/babylon/render'
 import { handleEmoteEvents } from '../../lib/emote-events'
 import { getParent } from '../../lib/parent'
+import { captureException } from '../../lib/sentry'
 import './Preview.css'
 
 const Preview: React.FC = () => {
@@ -67,7 +68,10 @@ const Preview: React.FC = () => {
             // handle emote events and forward them as messages
             removeEmoteEvents = handleEmoteEvents(controller.current)
           })
-          .catch((error) => setPreviewError(error.message))
+          .catch((error) => {
+            captureException(error, { component: 'Preview', phase: 'render' })
+            setPreviewError(error.message)
+          })
           .finally(() => {
             setIsLoadingModel(false)
             setIsLoaded(true)
@@ -90,6 +94,7 @@ const Preview: React.FC = () => {
           controller.current?.emote.play()
         }
       } else if (error) {
+        captureException(new Error(error), { component: 'Preview', phase: 'sendErrorToParent' })
         sendMessage(getParent(), PreviewMessageType.ERROR, { message: error })
         setIsMessageSent(true)
       }
diff --git a/src/components/UnityPreview/UnityPreview.tsx b/src/components/UnityPreview/UnityPreview.tsx
@@ -4,6 +4,7 @@ import { PreviewType, PreviewMessageType, sendMessage, PreviewRenderer } from '@
 
 import { sendIndividualOverrideMessages, sendUnityMessage, UnityMethod } from '../../lib/unity/messages'
 import { getParent } from '../../lib/parent'
+import { captureException } from '../../lib/sentry'
 import { render } from '../../lib/unity/render'
 import { getRandomDefaultProfile } from '../../lib/profile'
 import { useWindowSize } from '../../hooks/useWindowSize'
@@ -86,6 +87,7 @@ const useUnityRenderer = (
       } else if (type === UnityMessageType.ELEMENT_BOUNDS) {
         sendMessage(getParent(), ELEMENT_BOUNDS_RESPONSE as any, payload)
       } else if (type === UnityMessageType.ERROR) {
+        captureException(new Error(payload), { component: 'UnityPreview', phase: 'unityMessage' })
         setRenderingState((prev) => ({ ...prev, error: payload }))
         sendMessage(getParent(), PreviewMessageType.ERROR, { message: 'Error loading the wearable. Please try again.' })
       }
@@ -116,6 +118,7 @@ const useUnityRenderer = (
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : DEFAULT_ERROR_MESSAGE
       console.error('Unity init failed:', err)
+      captureException(err, { component: 'UnityPreview', phase: 'initializeUnity' })
       setRenderingState((prev) => ({ ...prev, error: errorMessage }))
       sendMessage(getParent(), PreviewMessageType.ERROR, { message: errorMessage })
     } finally {
diff --git a/src/config/env/dev.json b/src/config/env/dev.json
@@ -1,5 +1,6 @@
 {
   "MARKETPLACE_SERVER_URL": "https://marketplace-api.decentraland.zone",
+  "SENTRY_DSN": "https://fc6203205a7c4a0e1408cc9e7fdad2be@o4504361728212992.ingest.us.sentry.io/4510982059130880",
   "PEER_URL": "https://peer-ap1.decentraland.zone",
   "NETWORK": "amoy"
 }
diff --git a/src/config/env/prod.json b/src/config/env/prod.json
@@ -1,5 +1,6 @@
 {
   "MARKETPLACE_SERVER_URL": "https://marketplace-api.decentraland.org",
+  "SENTRY_DSN": "https://fc6203205a7c4a0e1408cc9e7fdad2be@o4504361728212992.ingest.us.sentry.io/4510982059130880",
   "PEER_URL": "https://peer.decentraland.org",
   "NETWORK": "matic"
 }
diff --git a/src/config/env/stg.json b/src/config/env/stg.json
@@ -1,5 +1,6 @@
 {
   "MARKETPLACE_SERVER_URL": "https://marketplace-api.decentraland.org",
+  "SENTRY_DSN": "https://fc6203205a7c4a0e1408cc9e7fdad2be@o4504361728212992.ingest.us.sentry.io/4510982059130880",
   "PEER_URL": "https://peer.decentraland.org",
   "NETWORK": "matic"
 }
diff --git a/src/hooks/useAsync.ts b/src/hooks/useAsync.ts
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { captureException } from '../lib/sentry'
 
 /* 
  ids and nonces are used to identity the order on which async functions are called, 
@@ -32,6 +33,7 @@ export function useAsync<T>(id: string, asyncFunction: (...args: any[]) => Promi
         }
       })
       .catch((error) => {
+        captureException(error, { phase: 'useAsync', id })
         if (isValid(id, nonce)) {
           setError(error.message)
         }
diff --git a/src/hooks/useController.ts b/src/hooks/useController.ts
@@ -2,6 +2,7 @@ import { useRef } from 'react'
 import { IPreviewController, PreviewMessagePayload, PreviewMessageType, sendMessage } from '@dcl/schemas'
 import { useMessage } from './useMessage'
 import { getParent } from '../lib/parent'
+import { captureException } from '../lib/sentry'
 
 function sendResult(id: string, result: any) {
   sendMessage(getParent(), PreviewMessageType.CONTROLLER_RESPONSE, { id, ok: true, result })
@@ -36,6 +37,7 @@ export const useController = () => {
               const result = await fn.apply(null, params)
               sendResult(id, result)
             } catch (error: any) {
+              captureException(error, { phase: 'controller', namespace, method })
               sendError(id, error.message)
             }
           } else {
diff --git a/src/index.tsx b/src/index.tsx
@@ -5,8 +5,12 @@ import { UnityPreview } from './components/UnityPreview'
 import { WebGPUProvider } from './contexts/WebGPUContext'
 import { useWebGPU } from './hooks/useWebGPU'
 import { detectWebGPU } from './lib/webgpu'
+import { initSentry } from './lib/sentry'
 import './index.css'
 
+// Initialize Sentry as early as possible to capture all errors
+initSentry()
+
 const App = () => {
   const search = new URLSearchParams(window.location.search)
   const isUnityPreview = search.get('unity') === 'true'
diff --git a/src/lib/babylon/emote.ts b/src/lib/babylon/emote.ts
@@ -1,5 +1,6 @@
 import mitt from 'mitt'
 import { AnimationGroup, ArcRotateCamera, AssetContainer, Scene, TransformNode, Sound, Engine } from '@babylonjs/core'
+import { captureException } from '../sentry'
 import {
   IEmoteController,
   PreviewCamera,
@@ -84,6 +85,7 @@ export async function playEmote(
       sound = await loadEmoteSound(scene, config.item as EmoteDefinition, config)
     } catch (error) {
       console.warn(`Could not load emote=${config.item.id}`)
+      captureException(error, { phase: 'loadEmoteFromWearable', emoteId: config.item.id })
     }
   }
   if (!container && config.emote) {
@@ -248,6 +250,7 @@ export async function playEmote(
     return controller
   } catch (error) {
     console.warn(`Could not play emote=${config.emote}`, error)
+    captureException(error, { phase: 'playEmote', emote: config.emote })
   }
 }
 
diff --git a/src/lib/babylon/render.ts b/src/lib/babylon/render.ts
@@ -1,5 +1,6 @@
 import { Color4, Mesh, TransformNode, Color3 } from '@babylonjs/core'
 import { PreviewConfig, PreviewType, BodyShape, IPreviewController, IEmoteController } from '@dcl/schemas'
+import { captureException } from '../sentry'
 import { createInvalidEmoteController, isEmote } from '../emote'
 import { getBodyShape } from './body'
 import { getSlots } from './slots'
@@ -38,6 +39,7 @@ export async function render(canvas: HTMLCanvasElement, config: PreviewConfig):
       for (const wearable of wearables.filter(isModel)) {
         const promise = loadWearable(scene, wearable, config.bodyShape, config.skin, config.hair).catch((error) => {
           console.warn(error.message)
+          captureException(error, { phase: 'loadWearable', bodyShape: config.bodyShape })
         })
         promises.push(promise)
       }
diff --git a/src/lib/config.ts b/src/lib/config.ts
@@ -21,6 +21,7 @@ import {
 import { config } from '../config'
 import { nftApi } from './api/nft'
 import { peerApi } from './api/peer'
+import { captureException } from './sentry'
 import { createMemo } from './cache'
 import { colorToHex, formatHex } from './color'
 import { isEmote, getRandomSocialEmoteAnimation } from './emote'
@@ -181,7 +182,10 @@ export async function fetchProfile(profile: string, peerUrl: string) {
     const resp = await peerApi
       .fetchProfile(profile, peerUrl)
       .then((profile) => (profile && profile.avatars.length > 0 ? profile.avatars[0] : null))
-      .catch((error: Error) => console.log(`Failed to load profile="${profile}"`, error))
+      .catch((error: Error) => {
+        console.log(`Failed to load profile="${profile}"`, error)
+        captureException(error, { phase: 'fetchProfile', profile })
+      })
     return resp || null
   })
 }
@@ -191,7 +195,10 @@ export async function fetchProfileEntity(profile: string, peerUrl: string) {
     const resp = await peerApi
       .fetchProfileEntity(profile, peerUrl)
       .then((profile) => (profile && profile.avatars.length > 0 ? profile.avatars[0] : null))
-      .catch((error: Error) => console.log(`Failed to load profile="${profile}"`, error))
+      .catch((error: Error) => {
+        console.log(`Failed to load profile="${profile}"`, error)
+        captureException(error, { phase: 'fetchProfileEntity', profile })
+      })
     return resp || null
   })
 }
diff --git a/src/lib/sentry.ts b/src/lib/sentry.ts
@@ -0,0 +1,42 @@
+import * as Sentry from '@sentry/browser'
+import { config } from '../config'
+
+let sentryClient: ReturnType<typeof Sentry.init>
+
+export function initSentry() {
+  const SENTRY_DSN = config.get('SENTRY_DNS')
+
+  sentryClient = Sentry.init({
+    dsn: SENTRY_DSN,
+    environment: import.meta.env.MODE,
+    // Tag every event so we know it came from the iframe renderer
+    initialScope: {
+      tags: {
+        app: 'wearable-preview',
+        parentUrl: document.referrer || 'unknown',
+      },
+    },
+  })
+}
+
+/**
+ * Capture an exception in Sentry with optional contextual information.
+ */
+export function captureException(error: unknown, context?: Record<string, unknown>) {
+  if (!sentryClient) {
+    return
+  }
+
+  Sentry.captureException(error, context ? { extra: context } : undefined)
+}
+
+/**
+ * Capture a message-level event in Sentry (for warnings / non-exception errors).
+ */
+export function captureMessage(message: string, context?: Record<string, unknown>) {
+  if (!sentryClient) {
+    return
+  }
+
+  Sentry.captureMessage(message, { extra: context })
+}
diff --git a/src/lib/unity/messages.ts b/src/lib/unity/messages.ts
@@ -1,3 +1,5 @@
+import { captureException, captureMessage } from '../sentry'
+
 export enum UnityMethod {
   // Property setters
   SET_MODE = 'SetMode',
@@ -75,6 +77,7 @@ export const sendUnityMessage = (unityInstance: any, method: UnityMethod | strin
 
       if (!isValidMethod) {
         console.warn(`Unknown Unity method: ${methodString}. Sending anyway...`)
+        captureMessage(`Unknown Unity method: ${methodString}`, { method: methodString, value })
       }
 
       if (value !== undefined) {
@@ -84,9 +87,11 @@ export const sendUnityMessage = (unityInstance: any, method: UnityMethod | strin
       }
     } catch (error) {
       console.error(`Failed to send Unity message ${method}:`, error)
+      captureException(error, { method: String(method), value })
     }
   } else {
     console.warn(`Unity instance not ready, cannot send message: ${method}`)
+    captureMessage(`Unity instance not ready, cannot send message: ${method}`, { method: String(method) })
   }
 }
 
@@ -97,6 +102,7 @@ export const sendIndividualOverrideMessages = (
 ) => {
   if (!unityInstance) {
     console.warn('Unity instance not available, cannot send override messages')
+    captureMessage('Unity instance not available, cannot send override messages')
     return
   }
 
@@ -131,6 +137,7 @@ export const sendIndividualOverrideMessages = (
         messagesSent++
       } else {
         console.warn(`No Unity method mapping found for property: ${key}`)
+        captureMessage(`No Unity method mapping found for property: ${key}`, { property: key, value })
       }
     }
   })
diff --git a/src/lib/unity/render.ts b/src/lib/unity/render.ts
@@ -2,6 +2,7 @@ import { IPreviewController } from '@dcl/schemas'
 import { loadUnityInstance } from './loader'
 import { createSceneController } from './scene'
 import { createEmoteController } from './emote'
+import { captureException } from '../sentry'
 
 export interface UnityInstance {
   SendMessage: (objectName: string, methodName: string, value: string) => void
@@ -57,6 +58,7 @@ export async function render(canvas: HTMLCanvasElement): Promise<IPreviewControl
         instance.Quit()
       } catch (e) {
         console.error('Error quitting Unity instance:', e)
+        captureException(e, { phase: 'unityQuit' })
       }
     }
     throw error
diff --git a/src/lib/webgpu.ts b/src/lib/webgpu.ts
@@ -31,6 +31,8 @@ declare global {
   type GPUFeatureName = string
 }
 
+import { captureException } from './sentry'
+
 export interface WebGPUSupport {
   isSupported: boolean
   isAvailable: boolean
@@ -182,6 +184,7 @@ export const detectWebGPU = async (): Promise<WebGPUSupport> => {
     }
   } catch (error) {
     console.error('❌ WebGPU detection error:', error)
+    captureException(error, { phase: 'detectWebGPU' })
     return {
       isSupported: true,
       isAvailable: false,
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -1 +1,7 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"MARKETPLACE_SERVER_URL": "https://marketplace-api.decentraland.zone",`
	`3`	`+ "SENTRY_DSN": "https://fc6203205a7c4a0e1408cc9e7fdad2be@o4504361728212992.ingest.us.sentry.io/4510982059130880",`
`3`	`4`	`"PEER_URL": "https://peer-ap1.decentraland.zone",`
`4`	`5`	`"NETWORK": "amoy"`
`5`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import { useEffect, useState } from 'react'`
	`2`	`+import { captureException } from '../lib/sentry'`
`2`	`3`
`3`	`4`	`/*`
`4`	`5`	`ids and nonces are used to identity the order on which async functions are called,`
`@@ -32,6 +33,7 @@ export function useAsync<T>(id: string, asyncFunction: (...args: any[]) => Promi`
`32`	`33`	`}`
`33`	`34`	`})`
`34`	`35`	`.catch((error) => {`
	`36`	`+ captureException(error, { phase: 'useAsync', id })`
`35`	`37`	`if (isValid(id, nonce)) {`
`36`	`38`	`setError(error.message)`
`37`	`39`	`}`