アイレット株式会社 Advent Calendar 2025

VSCode上からSlackにエラー報告してみた

Last updated at 2025-12-01Posted at 2025-12-01

VSCodeで開発している時、よくターミナルにエラーが出ますよね。
エラーが出たらSlackで質問を送ると思うのですが、まずターミナルのエラーをコピーして、slackを開いて、エラー内容をコードブロックにして、、という工程が少々面倒くさいのでVSCode上で簡単に送れるように拡張機能を作ってみました。

開発手順

VSCode拡張機能を作成するための基本テンプレートを生成するため、まずYeomanとそのジェネレーターをインストールします。

npm install -g yo generator-code

インストールするとおじさんが出てきて可愛いです。

インストール後、以下のコマンドでプロジェクトの雛形を作成します。

yo code

対話形式の選択肢が出てくるので、以下のように選択してください。
入力を終えると、ファイルを自動で生成してくれます。

拡張機能を実装

拡張機能の中身はsrc/extention.tsに書きます。
まずWebhookURLを設定します。
WebhookURLについてはSlackAppを作る際に後ほど説明します。

extention.ts

const SLACK_WEBHOOK_URL = 'XXXXX;

拡張機能実装に必須なactivate関数の中に、コマンドの登録と実際の処理を記述していきます。
まずVSCodeのターミナルでユーザーが選択しているテキストを、クリップボード経由で読み取り、変数 errorTextに格納する処理を書きます。

extention.ts

// slack-error-reporter.sendErrorとして呼び出せるようにする
let disposable = vscode.commands.registerCommand('slack-error-reporter.sendError', async () => {
        
    // ターミナルの選択範囲をクリップボードにコピーさせる
    await vscode.commands.executeCommand('workbench.action.terminal.copySelection');

    // クリップボードからエラーテキストを読み取る
    const errorText = await vscode.env.clipboard.readText();

次に、VSCodeの上部にある入力ボックスを連続して表示し、ユーザーからエラー発生時に実行したコマンドとエラーの状況に関する補足コメントの2種類のテキスト情報を収集する処理を書きます。

extention.ts

// ユーザーにエラーがおきた時に実行したコマンドを入力してもらう
const executedCommand = await vscode.window.showInputBox({
    placeHolder: '実行したコマンドを入力（例: npm install --save-dev typescript）',
    prompt: 'ターミナルで実行したコマンドを入力'
});

// ユーザーに一言コメントを入力してもらう
const userComment = await vscode.window.showInputBox({
    placeHolder: 'エラーの状況や補足を入力（例: 設定ファイルを変更後、発生した）',
    prompt: 'Slackに送るメッセージを入力'
});

Slack Block Kitの形式でSlackに投稿されるメッセージを作成します。
ここで自由にSlackに投稿する定型文を設定することができます。
お疲れ様です。
作業中に以下のエラーが出ました。
お手隙の際にご確認お願いします🙇
よく言いそうなこの3文にしました。お辞儀の絵文字もつけときました。

extention.ts

// Slackに送るデータを作成
const payload = {
    text: "エラー相談の連絡", // 通知ポップアップに出る文字
    blocks: [
        {
            type: "section",
            text: {
                type: "mrkdwn",
                text: "お疲れ様です。\n作業中に以下のエラーが出ました。\nお手隙の際にご確認お願いします🙇‍♂️"
            }
        },
        // 実行コマンドのセクション
        {
            type: "section",
            fields: [
                {
                    type: "mrkdwn",
                    text: `*▼ 実行コマンド:*\n\`${executedCommand || "不明"}\`` // コマンドをインラインコードで表示
                }
            ]
        },
        // 状況・コメントのセクション
        {
            type: "section",
            fields: [
                {
                    type: "mrkdwn",
                    text: `*▼ 状況・コメント:*\n${userComment || "特になし"}`
                }
            ]
        },
        {
            type: "divider"
        },
        // エラーログのセクション
        {
            type: "section",
            text: {
                type: "mrkdwn",
                text: `*▼ エラーログ:*\n\`\`\`\n${errorText}\n\`\`\`` // エラーログをコードブロックで表示
            }
        }
    ]
};

最後にSlackに送信します。

extention.ts

await axios.post(SLACK_WEBHOOK_URL, payload);

package.jsonに以下を追加します。

pacage.json

{
  "name": "slack-error-reporter",
  "displayName": "slack-error-reporter",
  "description": "Send terminal errors to Slack",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.90.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [],
  "main": "./dist/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "slack-error-reporter.sendError",
        "title": "Slackで質問する"
      }
    ],
    "menus": {
      "terminal/context": [
        {
          "command": "slack-error-reporter.sendError",
          "group": "navigation"
        }
      ]
    },
    "configuration": {
      "title": "Slack Error Reporter",
      "properties": {
        "slack-error-reporter.webhookUrl": {
          "type": "string",
          "default": "",
          "description": "Slack Incoming Webhook URL"
        }
      }
    }
  },