🔖

Vite + SentryでSourceMap送信と削除を行う

hashigo

2023/12/16に公開

Vite

Sentry

tech

この記事は株式会社ガラパゴス（有志） Advent Calendar 2023の16日目です。

前提

社内でSentryにSourceMapの送信を行い、Sentry上でエラーが起こった箇所をビルド前のコードで追跡できるというナレッジを頂いたので、それを適用した話です。

ただ、production環境ではSourceMapは公開したくないので、下記の手順を踏む必要があるとのこと。

ビルド時にはSourceMapを生成する
生成したSourceMapファイルをSentryに送信する
送信完了後にSourceMapファイルを削除する

これを簡単にできないだろうか？というのがこの記事の目的です。

結論(vite.configの書き換え)

SourceMap送信と削除は、vite.config.ts(js)の書き換えだけで完了できました。
CIによるかもしれませんが、AWS AmplifyのCIでは正常に動くのを確認できています。

上記のGitHubのコードにあるsourcemaps.filesToDeleteAfterUploadというオプションを設定します。vite.config.tsの中身的には下記のようにすると、SourceMapファイル送信後に指定したファイルを削除してくれます。

vite.config.ts

/// <reference types="vite/client" />
/// <reference types="vitest" />

import { defineConfig } from "vite";
import { sentryVitePlugin } from "@sentry/vite-plugin";

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      // Put the Sentry vite plugin after all other plugins
      // ↑すべてのプラグインの後方に置いてねという、Sentryからのお知らせ
      sentryVitePlugin({
        org: xxxxxx,
        project: xxxxxx,
        authToken: xxxxxx,
        sourcemaps: {
          // この設定をすることで、本番ビルド時にソースマップを削除することができます
          filesToDeleteAfterUpload:
            mode === "production" ? ["./dist/**/*.js.map"] : undefined,
        },
      }),
    ],
    build: {
      // 本番ビルド時にソースマップを出力する設定
      sourcemap: true,
    },
  };
});

また、実際に試してはいない(~~うまくいかなかった~~)ですが、自動設定する方法もドキュメントに紹介されています。

余談

sourcemaps.filesToDeleteAfterUploadオプションが、bundler-plugin-core/src/types.tsに記述されているので、WebpackやNext.jsでもいけるのでは〜と予想していますが、実際には試しておりません。

株式会社ガラパゴス（有志）Publication

株式会社ガラパゴス（有志）株式会社ガラパゴスのエンジニアを中心に情報発信をしている Publication です。各記事の内容は個人の意見であり、企業を代表するものではございません。

前提

結論(vite.configの書き換え)

余談

Discussion