Integrate Sentry into a Wasp app

README.md

Sentry is a useful tool to track errors that appear in your Wasp application.

Let's see how we can integrate it on the server and the client.

Sign up for Sentry

Make sure you have an account.

Create a project for your server app

When they ask you what kind of project you are running pick Node.js and then Express as your backend framework (becuase Wasp is using Express behind the scenes).

Set up on the server

We'll do all the set up in the server setup function i.e. server.setupFn:

app sentryTest {
  wasp: {
    version: "^0.15.2"
  },
  title: "sentry-test",
+ server: {
+   setupFn: import { setupFn } from "@src/serverSetup"
+ }
}

Install the server-side SDK with:

npm install @sentry/node

In the src/serverSetup.ts we'll put:

import * as Sentry from "@sentry/node";

import { ServerSetupFn } from "wasp/server";

Sentry.init({
  dsn: "https://<something>@<something>.ingest.de.sentry.io/<someid>",
});

export const setupFn: ServerSetupFn = async ({ app }) => {
  Sentry.setupExpressErrorHandler(app);
};

The dsn value is unique to your project and can be found under Settings > Client Keys (DSN) and then find the DSN value.

The Sentry.setupExpressErrorHandler(app); line sets up the Sentry middleware and it will catch any errors thrown in your server app.

Create a project for your client app

In Sentry, create a new React project.

Set up on the client

We will add the Sentry init code on top of our client setupFn:

app sentryTest {
  wasp: {
    version: "^0.15.2"
  },
  title: "sentry-test",
  server: {
    setupFn: import { setupFn } from "@src/serverSetup"
  },
+ client: {
+   setupFn: import { setupFn } from "@src/clientSetup"
+ },
}

Install the Sentry React SDK:

npm install --save @sentry/react

In the src/clientSetup.ts we'll put:

import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: "https://<something>@<something>.ingest.de.sentry.io/<someid>",
  integrations: [],
});

export const setupFn = async () => {};

The dsn value is the same as the one we used on in the server setupFn. We have to define some setupFn even if it's empty, this is just how Wasp works.