Next.js 源映射与 Sentry 上的打字稿

Question

我有一个模仿Next JS sentry (simple) example的项目的简单设置

问题是没有哨兵Enable JavaScript source fetching 功能，我无法让源地图正确报告给哨兵 例如：

使用Enable JavaScript source fetching 可以正确显示 示例（相同的错误）：

这里是使用的配置文件：

// next.config.js
const { parsed: localEnv } = require("dotenv").config();
const webpack = require("webpack");
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

// Package.json => "@zeit/next-source-maps": "^0.0.4-canary.1",
const withSourceMaps = require("@zeit/next-source-maps")({ devtool: "source-map" });

module.exports = withSourceMaps({
  target: "serverless",
  env: {
    // Will be available on both server and client
    // Sentry DNS configurations
    SENTRY_DNS: process.env.SENTRY_DNS,
  },
  poweredByHeader: false,

  webpack(config, options) {
    config.plugins.push(new webpack.EnvironmentPlugin(localEnv));
    config.resolve.plugins.push(new TsconfigPathsPlugin());
    config.node = {
      // Fixes node packages that depend on `fs` module
      fs: "empty",
    };

    if (!options.isServer) {
      config.resolve.alias["@sentry/node"] = "@sentry/browser";
    }

    return config;
  },
});

src/pages/_app.tsx 和 src/pages/_error.tsx 遵循 repo 中提到的示例。

// tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "paths": {
      "@src/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@services/*": ["./src/services/*"],
      "@utils/*": ["./src/utils/*"]
    },
    "removeComments": false,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "sourceRoot": "/",
    "strict": true,
    "target": "es6",
    "jsx": "preserve"
  },
  "exclude": [
    "node_modules",
    "cypress",
    "test",
    "public",
    "out"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "compileOnSave": false
}

源地图在 CI 构建过程中上传到哨兵 使用这个脚本（在next build 和next export 之后）

configure-sentry-release.sh
#!/bin/bash
set -eo pipefail

# Install Sentry-CLI
curl -sL https://sentry.io/get-cli/ | bash

export SENTRY_ENVIRONMENT="production"
export SENTRY_RELEASE=$(sentry-cli releases propose-version)

# Configure the release and upload source maps
echo "=> Configure Release: $SENTRY_RELEASE :: $SENTRY_ENVIRONMENT"
sentry-cli releases new $SENTRY_RELEASE --project $SENTRY_PROJECT
sentry-cli releases set-commits --auto $SENTRY_RELEASE
sentry-cli releases files $SENTRY_RELEASE upload-sourcemaps ".next" --url-prefix "~/_next" 
sentry-cli releases deploys $SENTRY_RELEASE new -e $SENTRY_ENVIRONMENT
sentry-cli releases finalize $SENTRY_RELEASE

有没有办法让源地图与哨兵一起工作（没有Enable JavaScript source fetching 并且不让源地图在服务器上公开可用）？

Answer 1

这可以通过放弃 configure-sentry-release.sh 脚本手动上传源地图来解决，而是使用 sentry webpack plugin

yarn add @sentry/webpack-plugin

并使用带有next.config.js (webpack) 的插件在构建步骤中上传源地图

// next.config.js
  ...
  webpack(config, options) {
    ...
    // Sentry Webpack configurations for when all the env variables are configured
    // Can be used to build source maps on CI services
    if (SENTRY_DNS && SENTRY_ORG && SENTRY_PROJECT) {
      config.plugins.push(
        new SentryWebpackPlugin({
          include: ".next",
          ignore: ["node_modules", "cypress", "test"],
          urlPrefix: "~/_next",
        }),
      );
    }
    ...

可以在此处找到有关此问题的更多信息：

• https://github.com/zeit/next.js/issues/11642
• https://github.com/zeit/next.js/issues/8873