web-dev-qa-db-ja.com

SentryでTypeScriptを使用したnext.jsソースマップ

次のJS歩哨（単純）の例を模倣するプロジェクトの簡単な設定があります

セントリーEnable JavaScript source fetching機能をオンにしないと問題が発生します。ソースマップをセントリーの例に正しく報告できません： enter image description here

Enable JavaScript source fetchingを使用すると、（同じエラーの）例が正しく表示されます： enter image description here

使用される構成ファイルは次のとおりです。

// 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は、リポジトリで言及されている例に従います。

// 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なしで、サーバーでソースマップを公開したままにすることなく）にはどうしますか？

typescriptwebpacknext.jssentry
2
a14m

これは、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",
        }),
      );
    }
    ...

この問題の詳細はここにあります：

0
a14m