Next.js 应用程序中在哪里设置 Sentry 的 setUser？

Question

我一直在尝试将用户数据设置到 Sentry 的全局范围内，因此每次出现错误或事件时，用户信息都会传递给它。

我的应用程序是在 Next.js 中构建的，因此我很自然地添加了 Sentry 的 Next.js 文档中的配置。

我不知道在哪里添加 Sentry.setUser({id: user.Id}) 方法以使其全局设置用户。

到目前为止，我已将其添加到 Sentry 的 _error.js 文件中的 getInitialProps 方法中：

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;

但是当尝试记录错误时，Sentry 中不显示用户信息，仅显示默认用户 ip：

我也尝试过登录成功后设置用户，但仍然没有任何结果。

感谢帮助！

Answer 1

不确定这是否是正确的方法，但上述解决方案对我不起作用。所以我尝试在内部调用 setUser _app.tsx。

import { useEffect } from "react";
import { setUser } from "@sentry/nextjs";
import { UserProvider, useUser } from "@auth0/nextjs-auth0";
import type { AppProps } from "next/app";

function SentryUserManager() {
  const { user } = useUser();

  useEffect(() => {
    if (user) {
      setUser({
        email: user.email ?? undefined,
        username: user.name ?? undefined,
      });
    } else {
      setUser(null);
    }
  }, [user]);
  return null;
}

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <UserProvider>
      <Component {...pageProps} />
      <SentryUserManager />
    </UserProvider>
  );
}

仍然不确定为什么这对我有用而其他解决方案却不起作用，但认为值得分享。