Building a Webhook Test System for Filtered Notifications to Google Chat and Slack

Building a Webhook Test System for Notifications (with Filtering) to Google Chat and Slack

Introduction

In this article, I will introduce how to build a system that sends messages generated from a system (specifically a Web GUI + Node server for testing purposes) to Google Chat and Slack via Webhooks, and automatically sorts the destination channels based on the content.
*Note: Since I could not generate a Webhook for Google Chat, verification was conducted only with Slack.

System Overview

• Node.js: Webhook server (receives messages & forwards to Google Apps Script Bot)
• Google Apps Script: Google Chat Bot (sorts and posts to channels based on received content)
• Google Spreadsheet: Management of filtering rules
• Slack: Notification channels

System Architecture Diagram

1. Chat Service Settings

Creating Google Chat Channels

*Note: Available only for paid Google Workspace users.

1. Access Google Chat
2. Click the "+" button on the left and select "Create space"
3. Enter the space name (e.g., Error Notifications, Normal Notifications)
4. Click "Create"
5. Open the space and issue a Webhook URL via "Manage webhooks"

Slack Channel Settings

1. Log in to your Slack workspace
2. Create or select the channel where you want to send notifications
3. Click the channel name -> "View channel details"
4. Go to "Integrations" -> "Add an App" and install "Incoming Webhooks"
5. Click "Add to Slack" -> "Add Incoming Webhooks integration"
6. Copy the generated Webhook URL

2. Building the Node.js Server

Installing Required Packages

npm install express dotenv ws

Implementing the Server Code

https://github.com/long-910/GoogleChatFilter/blob/f65c8695f29553f94e60a55e9a47189594ac21da/index.js

Implementing the Web GUI

https://github.com/long-910/GoogleChatFilter/blob/f65c8695f29553f94e60a55e9a47189594ac21da/public/index.html

Environment Variable Settings

Create a .env file:

BOT_WEBHOOK_URL="<Your GAS Deployment URL>"
PORT=3000

3. Implementing the Google Apps Script Bot

Preparing the Spreadsheet

1. Create a new Google Spreadsheet
2. Create the following two sheets:
   • "Filter Settings" sheet
     • Column A: Regex pattern
     • Column B: Channel ID
   • "Channel Settings" sheet
     • Column A: Channel ID
     • Column B: Google Chat Webhook URL
     • Column C: Slack Webhook URL

Implementing the Apps Script Code

https://github.com/long-910/GoogleChatFilter/blob/08f03338dd9e9dab3916768a2757fa8f4664c7f7/Code.gs

Deployment Steps

1. Open "Project Settings" in the Google Apps Script editor
2. Select the "Script Properties" tab
3. Click "Add row"
4. Add the following setting:
   • Property name: SPREADSHEET_ID
   • Value: Your spreadsheet ID
5. "Deploy" -> "New deployment"
6. Select "Web app" for "Select type"
7. "Execute as" -> "Me"
8. "Who has access" -> "Anyone"
9. Deploy and set the displayed URL to BOT_WEBHOOK_URL in your .env file

4. Usage

Send a message from the Web page

1. Access http://localhost:3000 in your browser
2. Enter a message in the text area
3. Click the "Send" button

Send a message via API

curl -X POST http://localhost:3000/webhook \
  -H "Content-Type: application/json" \
  -d '{"text": "Error: Server is down"}'

5. Troubleshooting

When a 404 error occurs

1. For Google Chat Webhook URLs:

   • Confirm you are a paid Google Workspace user
   • Check if the Webhook URL was issued correctly
   • Confirm the space type is "Chat"

2. For Slack Webhook URLs:

   • Check if the Webhook URL was issued correctly
   • Confirm the channel exists
   • Check if the app permissions are set correctly

3. For Google Apps Script:

   • Check if the deployment was successful
   • Check if the deployment URL is correct
   • Confirm the access permission is set to "Anyone"

6. Supplementary Information

• There are limits on the number of requests in the free tier of Google Apps Script
• The Google Chat Webhook feature is only available to paid Google Workspace users
• Slack Webhooks are available even on the free plan
• You can dynamically update filtering rules by changing the spreadsheet settings

Summary

By using this system, you can efficiently manage notifications from the system and route them to the appropriate channels. Additionally, by utilizing Google Apps Script and Spreadsheets, configuration changes can be easily made.

Reference Links

• Google Chat API Documentation
• Slack Incoming Webhooks
• Google Apps Script Documentation