javascript - 在 Next.js 项目中集成 Sentry

Question

我正在使用带有 AMP 的 Next.js。
这意味着我的代码仅在服务器上运行。没有客户端代码。

我正在尝试集成 @sentry/node但是，虽然我将这一行单独添加到 index.js在 /pagesconst Sentry = require('@sentry/node');
构建失败并出现以下错误:

[ wait ]  compiling ...
[ error ] ./node_modules/@sentry/node/esm/integrations/console.js
Module not found: Can't resolve 'console' in '/Users/lirancohen/Projects/amp-app/node_modules/@sentry/node/esm/integrations'

我将不胜感激任何帮助理解这个问题。
使用下一个 9.0.1 和 Sentry 5.0.5

Answer 1

对于希望使用 Next.js 实现 Sentry 的人，请务必查看 https://github.com/UnlyEd/next-right-now
最有趣的部分是:

https://github.com/UnlyEd/next-right-now/blob/7fd4523e59528dfaaf418b601a3830559360c9d4/src/utils/monitoring/sentry.ts ( Sentry 配置)

https://github.com/UnlyEd/next-right-now/blob/b78b03296b9977ef2d9550418219dac0326fbfb1/src/components/appBootstrap/MultiversalAppBootstrap.tsx#L70-L132 (各种 Sentry 使用)

https://github.com/UnlyEd/next-right-now/blob/c2946306e5e4658afafe8525330d003fd61534bb/src/pages/api/error.ts ( Sentry 捕捉错误)

https://github.com/UnlyEd/next-right-now/blob/f24da10646f1a8225fed537337193fd0707f7ac1/next.config.js#L237-L254 (万能 Sentry )

免责声明:我是项目的贡献者之一
请注意，上面的链接指向修复提交以避免中断，但您应该考虑查看最新版本。分公司: https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-at-lcz-sty/

实用程序/Sentry .ts

import { NowRequest } from '@now/node/dist';
import * as Sentry from '@sentry/node';
import get from 'lodash.get';
import { isBrowser } from '@unly/utils';

/**
 * Initialize Sentry and export it.
 *
 * Helper to avoid duplicating the init() call in every /pages/api file.
 * Also used in pages/_app for the client side, which automatically applies it for all frontend pages.
 */
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  enabled: process.env.NODE_ENV !== 'test',
  environment: process.env.APP_STAGE,
  release: process.env.APP_VERSION_RELEASE,
});

if (!process.env.SENTRY_DSN && process.env.NODE_ENV !== 'test') {
  // eslint-disable-next-line no-console
  console.error('Sentry DSN not defined');
}

// Scope configured by default, subsequent calls to "configureScope" will add additional data
Sentry.configureScope((scope) => { // See https://www.npmjs.com/package/@sentry/node
  scope.setTag('nodejs', process.version);
  scope.setTag('nodejsAWS', process.env.AWS_EXECUTION_ENV || null); // Optional - Available on production environment only
  scope.setTag('memory', process.env.AWS_LAMBDA_FUNCTION_MEMORY_SIZE || null); // Optional - Available on production environment only
  scope.setTag('runtimeEngine', isBrowser() ? 'browser' : 'server');
  scope.setTag('buildTime', process.env.BUILD_TIME);
});

/**
 * Configure the Sentry scope by extracting useful tags and context from the given request.
 *
 * @param req
 */
export const configureReq = (req: NowRequest): void => {
  Sentry.configureScope((scope) => {
    scope.setTag('host', get(req, 'headers.host'));
    scope.setTag('url', get(req, 'url'));
    scope.setTag('method', get(req, 'method'));
    scope.setContext('query', get(req, 'query'));
    scope.setContext('cookies', get(req, 'cookies'));
    scope.setContext('body', get(req, 'body'));
    scope.setContext('headers', get(req, 'headers'));
  });
};

export default Sentry;

使用示例(pages/_app.tsx):

import * as Sentry from '@sentry/node';
import '../utils/sentry';

//...

Sentry.configureScope((scope) => { // See https://www.npmjs.com/package/@sentry/node
  scope.setTag('customer', customerRef);
  scope.setTag('userId', userSession.id);
  scope.setContext('userSession', userSession);
  scope.setContext('cookies', readonlyCookies);
});

Sentry.addBreadcrumb({ // See https://docs.sentry.io/enriching-error-data/breadcrumbs
  category: fileLabel,
  message: `Preparing app (${isBrowser() ? 'browser' : 'server'})`,
  level: Sentry.Severity.Debug,
});

Webpack 配置 (next.config.js)

webpack: (config, { isServer, buildId }) => {
    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: 'empty',
    };

    // XXX See https://github.com/zeit/next.js/blob/canary/examples/with-sentry-simple/next.config.js
    // In `pages/_app.js`, Sentry is imported from @sentry/node. While
    // @sentry/browser will run in a Node.js environment, @sentry/node will use
    // Node.js-only APIs to catch even more unhandled exceptions.
    //
    // This works well when Next.js is SSRing your page on a server with
    // Node.js, but it is not what we want when your client-side bundle is being
    // executed by a browser.
    //
    // Luckily, Next.js will call this webpack function twice, once for the
    // server and once for the client. Read more:
    // https://nextjs.org/docs#customizing-webpack-config
    //
    // So ask Webpack to replace @sentry/node imports with @sentry/browser when
    // building the browser's bundle
    if (!isServer) {
      config.resolve.alias['@sentry/node'] = '@sentry/browser';
    }

    return config;
  },