feat: Add Sentry to the auth site

.github/workflows/build-release.yaml

@@ -45,3 +45,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: ${{ secrets.SENTRY_ORG }}
+          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+        with:
+          sourcemaps: ${{ github.workspace }}/webapp/dist
+          version: '${{ vars.SENTRY_RELEASE_PREFIX }}@${{ github.event.release.tag_name }}'
+          url_prefix: '~'

package.json

@@ -30,6 +30,7 @@
     "@dcl/single-sign-on-client": "^0.1.0",
     "@dcl/ui-env": "^1.4.0",
     "@magic-ext/oauth2": "^9.21.0",
+    "@sentry/react": "^9.1.0",
     "@well-known-components/fetch-component": "^2.0.2",
     "ajv": "^8.12.0",
     "classnames": "^2.3.2",

scripts/prebuild.cjs

@@ -13,7 +13,7 @@ const packageJson = JSON.parse(fs.readFileSync('./package.json').toString())
 const publicPackageJson = JSON.parse(fs.readFileSync('./public/package.json').toString())
 
 // set version
-ENV_CONTENT['REACT_APP_WEBSITE_VERSION'] = packageJson.version
+ENV_CONTENT['VITE_REACT_APP_WEBSITE_VERSION'] = packageJson.version
 publicPackageJson.version = packageJson.version
 
 // set public url

src/components/Pages/CallbackPage/CallbackPage.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useContext, useEffect, useState } from 'react'
+import { captureException } from '@sentry/react'
 import { ProviderType } from '@dcl/schemas'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { Modal } from 'decentraland-ui/dist/components/Modal/Modal'
@@ -64,6 +65,7 @@ export const CallbackPage = () => {
       redirect()
     } catch (error) {
       console.log(error)
+      captureException(error)
       navigate(locations.login())
     }
   }, [navigate, redirectTo, connectAndGenerateSignature, redirect, flags[FeatureFlagsKeys.DAPPS_MAGIC_AUTO_SIGN]])
@@ -91,6 +93,7 @@ export const CallbackPage = () => {
       }
     } catch (error) {
       console.error('Error logging in', error)
+      captureException(error)
       getAnalytics()?.track(TrackingEvents.LOGIN_ERROR, { error: isErrorWithMessage(error) ? error.message : error })
       await wait(800)
       navigate(locations.login())

src/components/Pages/LoginPage/LoginPage.tsx

@@ -1,4 +1,5 @@
 import { useState, useCallback, useMemo, useEffect, useContext } from 'react'
+import { captureException } from '@sentry/react'
 import { Env } from '@dcl/ui-env'
 import { Loader } from 'decentraland-ui/dist/components/Loader/Loader'
 import Image1 from '../../../assets/images/background/image1.webp'
@@ -149,6 +150,7 @@ export const LoginPage = () => {
           setShowConnectionModal(false)
         } catch (error) {
           console.error('Error', isErrorWithMessage(error) ? error.message : JSON.stringify(error))
+          captureException(error)
           getAnalytics()?.track(TrackingEvents.LOGIN_ERROR, { error: isErrorWithMessage(error) ? error.message : error })
           if (isErrorWithName(error) && error.name === 'ErrorUnlockingWallet') {
             setConnectionModalState(ConnectionModalState.ERROR_LOCKED_WALLET)

src/components/Pages/RequestPage/RequestPage.tsx

@@ -1,12 +1,12 @@
 import { ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
+import { captureException } from '@sentry/react'
 import { Profile } from 'dcl-catalyst-client/dist/client/specs/catalyst.schemas'
 import { ethers, BrowserProvider, formatEther } from 'ethers'
 import Icon from 'semantic-ui-react/dist/commonjs/elements/Icon/Icon'
 import { io } from 'socket.io-client'
 import { ChainId } from '@dcl/schemas'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
-import { CommunityBubble } from 'decentraland-ui/dist/components/CommunityBubble'
 import { Loader } from 'decentraland-ui/dist/components/Loader/Loader'
 import { Web2TransactionModal } from 'decentraland-ui/dist/components/Web2TransactionModal'
 import { connection } from 'decentraland-connect'
@@ -170,6 +170,7 @@ export const RequestPage = () => {
         }
       } catch (e) {
         setError(isErrorWithMessage(e) ? e.message : 'Unknown error')
+        captureException(e)
         getAnalytics()?.track(TrackingEvents.REQUEST_LOADING_ERROR, {
           browserTime: Date.now(),
           requestType: requestRef.current?.method,
@@ -292,6 +293,7 @@ export const RequestPage = () => {
       }
     } catch (e) {
       console.error('Wallet error', JSON.stringify(e))
+      captureException(e)
       const signer = await providerRef.current?.getSigner()
       if (signer) {
         if (isRpcError(e)) {
@@ -352,7 +354,6 @@ export const RequestPage = () => {
                   </div>
                 ) : null}
               </div>
-              <CommunityBubble className={styles.communityBubble} />
             </div>
           </div>
         )
@@ -380,7 +381,6 @@ export const RequestPage = () => {
             <div className={styles.right}>
               {connectedAccountRef.current && profile !== null ? <CustomWearablePreview profile={connectedAccountRef.current} /> : null}
             </div>
-            <CommunityBubble className={styles.communityBubble} />
           </div>
         </div>
       )

src/components/Pages/SetupPage/SetupPage.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { captureException } from '@sentry/react'
 import classNames from 'classnames'
 import { AuthIdentity } from '@dcl/crypto'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
@@ -194,6 +195,7 @@ export const SetupPage = () => {
           try {
             await subscribeToNewsletter(email)
           } catch (e) {
+            captureException(e)
             console.warn('There was an error subscribing to the newsletter', (e as Error).message)
           }
         }
@@ -210,6 +212,7 @@ export const SetupPage = () => {
         // Redirect to the site defined in the search params.
         redirect()
       } catch (e) {
+        captureException(e)
         setDeploying(false)
 
         // TODO: Display a proper error on the page to show the user.

src/main.tsx

@@ -15,6 +15,7 @@ import { FeatureFlagsProvider } from './components/FeatureFlagsProvider'
 import { config } from './modules/config'
 import { getAnalytics } from './modules/analytics/segment'
 import './modules/analytics/snippet'
+import './modules/analytics/sentry'
 import 'decentraland-ui/dist/themes/alternative/dark-theme.css'
 import './index.css'
 

src/modules/analytics/sentry.ts

@@ -0,0 +1,16 @@
+import { init, browserTracingIntegration, replayIntegration } from '@sentry/react'
+import { Env } from '@dcl/ui-env/dist/env'
+import { config } from '../config'
+
+init({
+  environment: config.get('ENVIRONMENT'),
+  release: `${config.get('SENTRY_RELEASE_PREFIX', 'auth')}@${process.env.VITE_REACT_APP_WEBSITE_VERSION}`,
+  dsn: config.get('SENTRY_DSN'),
+  integrations: [browserTracingIntegration(), replayIntegration()],
+  // Performance Monitoring
+  tracesSampleRate: 0.001,
+  // Session Replay
+  replaysSessionSampleRate: 0.01,
+  replaysOnErrorSampleRate: 0.01,
+  enabled: !config.is(Env.DEVELOPMENT)
+})

src/modules/config/env/dev.json

@@ -1,8 +1,10 @@
 {
+  "ENVIRONMENT": "development",
   "AUTH_SERVER_URL": "https://auth-api.decentraland.zone",
   "SEGMENT_API_KEY": "FQqbzV2KeUKe2RPOeFkedKRPkJAFsU9r",
   "PEER_URL": "https://peer.decentraland.zone",
   "FEATURE_FLAGS_URL": "https://feature-flags.decentraland.org",
+  "SENTRY_DSN": "https://d0ec8d688f4d9827a270acece39153b0@o4504361728212992.ingest.us.sentry.io/4508858418266112",
   "FEATURE_FLAGS_INTERVAL": "60000",
   "BUILDER_SERVER_URL": "https://builder-api.decentraland.zone",
   "INTERCOM_APP_ID": "z0h94kay"

src/modules/config/env/prod.json

@@ -1,8 +1,10 @@
 {
+  "ENVIRONMENT": "production",
   "AUTH_SERVER_URL": "https://auth-api.decentraland.org",
   "SEGMENT_API_KEY": "FQqbzV2KeUKe2RPOeFkedKRPkJAFsU9r",
   "PEER_URL": "https://peer.decentraland.org",
   "FEATURE_FLAGS_URL": "https://feature-flags.decentraland.org",
+  "SENTRY_DSN": "https://d0ec8d688f4d9827a270acece39153b0@o4504361728212992.ingest.us.sentry.io/4508858418266112",
   "FEATURE_FLAGS_INTERVAL": "60000",
   "BUILDER_SERVER_URL": "https://builder-api.decentraland.org",
   "INTERCOM_APP_ID": "z0h94kay"

src/modules/config/env/stg.json

@@ -1,8 +1,10 @@
 {
+  "ENVIRONMENT": "production",
   "AUTH_SERVER_URL": "https://auth-api.decentraland.today",
   "SEGMENT_API_KEY": "FQqbzV2KeUKe2RPOeFkedKRPkJAFsU9r",
   "PEER_URL": "https://peer-testing.decentraland.org",
   "FEATURE_FLAGS_URL": "https://feature-flags.decentraland.org",
+  "SENTRY_DSN": "https://d0ec8d688f4d9827a270acece39153b0@o4504361728212992.ingest.us.sentry.io/4508858418266112",
   "FEATURE_FLAGS_INTERVAL": "60000",
   "BUILDER_SERVER_URL": "https://builder-api.decentraland.today",
   "INTERCOM_APP_ID": "z0h94kay"