Sentry

Setup Sentry error and performance monitoring across your Redwood application.

From your command line, run:

yarn redwood setup monitoring sentry

This command installs and sets up @sentry/node and @sentry/react, enabling Prisma and Browser tracing to capture 100% of events. The following sections detail how you may further integrate Sentry in your Redwood application.

Sentry Envelop Plugin

The setup command will install and attempt to setup the @envelop/sentry plugin in your application's GraphQL handler. If there is a problem installing it, the following can be used to do so manually.

import { useSentry } from '@envelop/sentry'

import { createGraphQLHandler } from '@redwoodjs/graphql-server'

import directives from 'src/directives/**/*.{js,ts}'
import sdls from 'src/graphql/**/*.sdl.{js,ts}'
import services from 'src/services/**/*.{js,ts}'

import 'src/lib/sentry'

...

export const handler = createGraphQLHandler({
  directives,
  sdls,
  services,
  extraPlugins: [useSentry()],
  ...
})

</TabItem> <TabItem value="ts" label="TypeScript">

import { useSentry } from '@envelop/sentry'

import { createGraphQLHandler } from '@redwoodjs/graphql-server'

import directives from 'src/directives/**/*.{js,ts}'
import sdls from 'src/graphql/**/*.sdl.{js,ts}'
import services from 'src/services/**/*.{js,ts}'

import 'src/lib/sentry'

...

export const handler = createGraphQLHandler({
  directives,
  sdls,
  services,
  extraPlugins: [useSentry()],
  ...
})

</TabItem> </Tabs>

Setting the current user

You can associate error and performance events with a unique identity using Sentry.setUser. Below is an example of doing so on the API by setting the identity to the user returned by getCurrentUser.

import Sentry from 'src/lib/sentry'

export const getCurrentUser = async (...) => {
  const user = await db.user.findUnique(...)

  Sentry.setUser(user)

  ...
}

</TabItem> <TabItem value="ts" label="TypeScript">

import Sentry from 'src/lib/sentry'

export const getCurrentUser = async (...) => {
  const user = await db.user.findUnique(...)

  Sentry.setUser(user)

  ...
}

</TabItem> </Tabs>

Below we set the current user on the web-side from within a layout. Note that the useEffect dependency array may vary depending on where you place Sentry.setUser in your own application.

jsx

import { useEffect } from 'react'

import { useAuth } from 'src/lib/auth'
import Sentry from 'src/lib/sentry'

const SentryLayout = ({ children }) => {
  const { currentUser } = useAuth()

  useEffect(() => Sentry.setUser(currentUser), [currentUser])

  return <>{children}</>
}

export default SentryLayout

</TabItem> <TabItem value="ts" label="TypeScript">

tsx

import React, { useEffect } from 'react'

import { useAuth } from 'src/lib/auth'
import Sentry from 'src/lib/sentry'

interface Props {
  children: React.ReactNode
}

const SentryLayout = ({ children }: Props) => {
  const { currentUser } = useAuth()

  useEffect(() => Sentry.setUser(currentUser), [currentUser])

  return <>{children}</>
}

export default SentryLayout

</TabItem> </Tabs>

Capturing exceptions

You can make use of Sentry to capture exceptions which occur while executing API Functions.

import Sentry from 'src/lib/sentry'

export const handler = async (event, context) => {
  try {
    ...
  } catch (err) {
    Sentry.captureException(err)
  }
}