Where to set Sentry's setUser in Next.js app?

Question

I have been trying to set user data into Sentry's scope globally, so every time there's an error or event, user info is passed to it.

My app is built in Next.js, so naturally I added the config as it is in Sentry's documentation for Next.js.

I haven't got the idea on where to add the Sentry.setUser({id: user.Id}) method in order for it to set the user globally.

So far I have added it to the Sentry's _error.js file, inside the getInitialProps method:

import NextErrorComponent from 'next/error';

import * as Sentry from '@sentry/nextjs';
import { getUser } from '../lib/session';

const MyError = ({ statusCode, hasGetInitialPropsRun, err }) => {
    if (!hasGetInitialPropsRun && err) {
        Sentry.captureException(err);
    }

    return <NextErrorComponent statusCode={statusCode} />;
};

MyError.getInitialProps = async (context) => {
    const errorInitialProps = await NextErrorComponent.getInitialProps(context);

    const { req, res, err, asPath } = context;

    errorInitialProps.hasGetInitialPropsRun = true;

    const user = await getUser(req, res);

    // Set user information
    if (user) {
        console.log('Setting user');
        Sentry.setUser({ id: user.Id });
    }
    else {
        console.log('Removing user');
        Sentry.configureScope(scope => scope.setUser(null));
    }

    if (res?.statusCode === 404) {
        return errorInitialProps;
    }


    if (err) {
        Sentry.captureException(err);

        await Sentry.flush(2000);

        return errorInitialProps;
    }

    Sentry.captureException(
        new Error(`_error.js getInitialProps missing data at path: ${asPath}`),
    );
    await Sentry.flush(2000);

    return errorInitialProps;
};

export default MyError;

But when trying to log errors, the user info doesn't show in Sentry, only the default user ip:

I have also tried setting the user after successful login, and still nothing..

Help is appreciated!!

Answer 1

I would suggest using the callback handler to set your Sentry user context.

import { handleAuth, handleLogin, handleCallback } from "@auth0/nextjs-auth0";
import * as Sentry from "@sentry/nextjs";
import { NextApiHandler } from "next";

const afterCallback = (_req, _res, session, _state) => {
  Sentry.setUser({
    id: session.user.sub,
    email: session.user.email,
    username: session.user.nickname,
    name: session.user.name,
    avatar: session.user.picture,
  });
  return session;
};

const handler: NextApiHandler = handleAuth({
  async login(req, res) {
    await handleLogin(req, res, {
      returnTo: "/dashboard",
    });
  },
  async callback(req, res) {
    try {
      await handleCallback(req, res, { afterCallback });
    } catch (error) {
      res.status(error.status || 500).end(error.message);
    }
  },
});

export default Sentry.withSentry(handler);

Answer 2

You can set the user in Sentry right after successful login

const handleLogin = {
  try {
    const res = await axios.post("/login", {"[email protected]", "password"})
    if (res && res?.data) {
      // Do other stuff
      Sentry.setUser({ email: "[email protected]" });
    }
  }
}

Additionaly you can clear the user while logging out

const handleLogout = {
  // Do othe stuff
  Sentry.configureScope(scope => scope.setUser(null));
}