与 NestJS 集成时，Sentry 未获取 TypeScript 源映射

Question

我最近创建了一个小的 NestJS 项目，我试图将 Sentry 集成到其中。我已按照 Nest-Raven package readme, along with the instructions provided by Sentry for TypeScript integration.

上的说明进行操作

不幸的是，我似乎无法让 Sentry 显示 TypeScript 源映射，只有常规的 JS 源映射，正如您在此处看到的那样：

我已按照说明

在main.ts中初始化了 Sentry

import { NestFactory } from '@nestjs/core';
import { RewriteFrames } from '@sentry/integrations';
import * as Sentry from '@sentry/node';
import { AppModule } from './app.module';

// This allows TypeScript to detect our global value
declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace NodeJS {
    interface Global {
      __rootdir__: string;
    }
  }
}

global.__rootdir__ = __dirname || process.cwd();

async function bootstrap() {
  Sentry.init({
    dsn: 'https://mySentryDSN.ingest.sentry.io/0',
    integrations: [
      new RewriteFrames({
        root: global.__rootdir__,
      }),
    ],
  });
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

我还设置了 Nest-Raven 以使用全局拦截器

import { APP_INTERCEPTOR } from '@nestjs/core';
import { RavenInterceptor, RavenModule } from 'nest-raven';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    RavenModule,
    ...
  ],
  controllers: [AppController],
  providers: [
    AppService,
    {
      provide: APP_INTERCEPTOR,
      useValue: new RavenInterceptor(),
    },
  ],
})
export class AppModule {}

还有其他人遇到过这个问题吗？我在想，也许我需要按照 these intstructions 将源映射直接上传到 Sentry，但据我所知，NestJS 不使用 Webpack，所以我不确定如何继续。

Answer 1

您可以让 Nest 将 webpack 编译器与 nest build --webpackas described here. It looks like Sentry also has documentation on how to get source map support using typescript without webpack 一起使用，因此这也值得一试。

Answer 2

原来问题是我提供给 RewriteFrames 构造函数的目录。我最初从 Sentry Typescript documentation 复制了 global.__rootdir__ 实现，但在调试期间我发现 __dirname 和 process.cwd() 返回不同的路径。

  dirname: '/Users/<name>/Documents/Projects/nest-test-project/dist',
  cwd: '/Users/<name>/Documents/Projects/nest-test-project'

由于 __dirname 返回的是真值，因此提供给 Sentry 的路径是包含 dist 文件夹的路径。一旦我更改代码为 Sentry 提供项目的实际根路径，所有 Typescript 源映射都上传到 Sentry。

编辑：有些人要我的 tsconfig 和上面的代码的例子。我已经为引导 Sentry 编写了自己的 SentryModule，但更改的要点是找到你调用 new RewriteFrames({...}) 的位置并传递正确的 root，在我的例子中是 process.cwd().

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2017",
    "lib": [ "ES2020.Promise" ],
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "sourceMap": true,
    "inlineSources": true,
    "sourceRoot": "/"
  }
}

main.ts 或者初始化 Sentry 的地方

import { RewriteFrames } from "@sentry/integrations";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [
    new RewriteFrames({
      root: process.cwd(),
    }),
  ],
});

与 NestJS 集成时，Sentry 未获取 TypeScript 源映射

Sentry not getting TypeScript source maps when integrated with NestJS

sentry

source-maps

typescript

nestjs