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

【问题标题】：Sentry not getting TypeScript source maps when integrated with NestJS与 NestJS 集成时，Sentry 未获取 TypeScript 源映射
【发布时间】：2020-12-16 07:04:04
【问题描述】：

我最近创建了一个小型 NestJS 项目，我试图将 Sentry 集成到该项目中。我已按照 Nest-Raven 软件包自述文件中的说明以及 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，所以我不确定如何继续。

【问题讨论】：

标签： typescript nestjs source-maps sentry

【解决方案1】：

所以问题出在我提供给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 和上面的代码的例子。此后，我编写了自己的 SentryModule 来引导 Sentry，但更改的要点是找到您调用 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 或初始化哨兵的任何地方

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

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

【讨论】：

嘿，你能有一个你使用的完整设置吗？我也坚持使用nestjs和哨兵，但它也不适用于正确的路径。也许您可以发布适合您的配置？提前致谢！ :)
我希望你能解释更多，我也无法做到这一点。我提出了将目标设置为 es2019 的想法，以便转译后的代码更接近源代码，然后我可以更轻松地找到该行。无论如何，如果可以请提供 tsconfig 和设置，您可以使其工作。
我已经编辑了上面的答案，包括我的tsconfig.json 的示例以及我如何将process.cwd() 传递给 Sentry 构造函数。
你好@ConorWatson，谢谢你的例子。我努力让它工作好几天......还没有成功，即使有与你相同的配置并检查 process.cwd() 的值 - 它是正确的项目根目录。打字稿源图的上传是自动的还是应该手动完成？如何查看发送的内容？

【解决方案2】：

您可以让 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 所以这可能也值得一试。

【讨论】：