Sentry error and performance monitoring [experimental]

Experimental Features
1

This command is currently in the canary release. It will be fully available with Redwood v5.2.

Setup Sentry error and performance monitoring across your Redwood application.

From your command line, run:

yarn redwood experimental setup-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()],
  ...
})

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)

  ...
}

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.

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

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)
  }
}
1 Like
3

Seems to crash when setting up

❯ yarn redwood experimental setup-sentry
✔ Adding required api packages...
✔ Adding required web packages...
✔ Adding SENTRY_DSN var to .env...
✔ Setting up Sentry on the API and web sides
✖ contentLines.findLastIndex is not a function
◼ Replacing Redwood's Error boundary
◼ Adding config to redwood.toml...
◼ One more thing...
contentLines.findLastIndex is not a function

This probably doesn’t handle releases?

It also seems to import the deprecated BrowserTracing instead of the new one.

1 Like
4

@razzeee I’ve seen this error just the other day—are you on Node 16? The fix may be just using Node 18 locally

5

That seems to be the case, it then crashes on my current sentry implementation, but that’s fine.

[...]
✔ Implementing the Envelop plugin
✖ Unterminated regular expression. (50:3)
  48 |
  49 | export default App
  > 50 | </Sentry.ErrorBoundary>
  |   ^
◼ Adding config to redwood.toml...
◼ One more thing...
Unterminated regular expression. (50:3)
  48 |
  49 | export default App
> 50 | </Sentry.ErrorBoundary>
     |   ^
1 Like
6

I have just raised a PR to update the implementation to remove the deprecated tracing package as this is no longer its own package.

1 Like