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.

```js title="api/src/functions/graphql.js" 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">

```ts title="api/src/functions/graphql.ts"
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()],
  ...
})

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.

```js title="api/src/lib/auth.js" 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">

```ts title="api/src/lib/auth.ts"
import Sentry from 'src/lib/sentry'

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

  Sentry.setUser(user)

  ...
}

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 title="web/src/layouts/SentryLayout/SentryLayout.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 title="web/src/layouts/SentryLayout/SentryLayout.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

Capturing exceptions

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

```ts title="api/src/functions/foo.{js,ts}" import Sentry from 'src/lib/sentry'

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