Skip to main content
Version: 0.24

Sentry

note

Last checked with Wasp 0.24, @sentry/node 8, and @sentry/react 8.

This guide depends on external libraries or services, so it may become outdated over time. We do our best to keep it up to date, but make sure to check their documentation for any changes.

This guide shows you how to integrate Sentry into your Wasp application for error tracking on both the server and client.

Prerequisites​

Setting up Sentry​

1. Create Sentry Projects​

You'll need to create two projects in Sentry:

  1. Server project: Select Node.js as the platform and Express as the framework
  2. Client project: Select React as the platform

After creating each project, you'll receive a unique DSN (Data Source Name) that you'll use to configure Sentry.

2. Install Sentry packages​

Install the Sentry SDKs:

npm install @sentry/node @sentry/react

3. Configure your Wasp file​

Add both the server and client setup functions to your main.wasp.ts:

main.wasp.ts
import { app } from "@wasp.sh/spec"
import { setupClient } from "./src/clientSetup" with { type: "ref" }
import { setupServer } from "./src/serverSetup" with { type: "ref" }

export default app({
  name: "MyApp",
  wasp: { version: "^0.24.0" },
  title: "my-app",
  head: ["<link rel='icon' href='/favicon.ico' />"],
  server: {
    setupFn: setupServer,
  },
  client: {
    setupFn: setupClient,
  },
  // ...
})

4. Configure Server-Side Sentry​

Create the server setup file:

src/serverSetup.js
import * as Sentry from "@sentry/node";
import { ServerSetupFn } from "wasp/server";

Sentry.init({
  dsn: process.env.SENTRY_SERVER_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: 1.0,
});

export const setupServer = async ({ app }) => {
  Sentry.setupExpressErrorHandler(app);
};
note

Find your DSN in Sentry under Settings > Client Keys (DSN).

5. Configure Client-Side Sentry​

Create the client setup file:

src/clientSetup.js
import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: import.meta.env.REACT_APP_SENTRY_CLIENT_DSN,
  environment: import.meta.env.MODE,
  tracesSampleRate: 1.0,
});

export const setupClient = async () => {
  // Sentry is initialized above, before the setup function runs.
  // You can add additional client-side setup here if needed.
};
note

The setupFn must be defined and exported even if it has no additional logic. Sentry's init call runs at module load time, which is before Wasp calls the setup function.

6. Set up environment variables​

Add to your .env.server:

.env.server
SENTRY_SERVER_DSN=https://your-server-dsn@sentry.io/your-project-id

Add to your .env.client:

.env.client
REACT_APP_SENTRY_CLIENT_DSN=https://your-client-dsn@sentry.io/your-project-id

Testing the Integration​

Test Server Errors​

Create an API endpoint that throws an error:

src/apis.js
import { TestError } from "wasp/server/api";

export const testError = async (req, res) => {
  throw new Error("Test server error for Sentry");
};

Test Client Errors​

Add a button that triggers an error:

src/MainPage.jsx
export const MainPage = () => {
  const handleError = () => {
    throw new Error("Test client error for Sentry");
  };

  return (
    <div>
      <button onClick={handleError}>Test Sentry Error</button>
    </div>
  );
};

Advanced Configuration​

Adding User Context​

Track which user encountered an error:

src/serverSetup.js
import * as Sentry from "@sentry/node";

// In your API handlers or operations
export const someOperation = async (args, context) => {
  if (context.user) {
    Sentry.setUser({
      id: context.user.id,
      email: context.user.email,
    });
  }
  // ...
};

Performance Monitoring​

Enable performance monitoring:

Sentry.init({
  dsn: "your-dsn",
  tracesSampleRate: 0.1, // Capture 10% of transactions
  profilesSampleRate: 0.1, // Capture 10% of profiles (if using profiling)
});

Error Boundaries (React)​

Use Sentry's error boundary for React:

src/App.jsx
import * as Sentry from "@sentry/react";

export const App = ({ children }) => {
  return (
    <Sentry.ErrorBoundary fallback={<p>An error occurred</p>}>
      {children}
    </Sentry.ErrorBoundary>
  );
};

For more configuration options, see the Sentry documentation.