feat: add setting to toggle webhook logging, off by default

Author: ebiggz

src/backend/crowbar-relay/crowbar-relay-websocket.ts

@@ -2,7 +2,6 @@ import ReconnectingWebSocket from '../reconnecting-websocket';
 import accountAccess from "../common/account-access";
 import { TypedEmitter } from "tiny-typed-emitter";
 import logger from "../logwrapper";
-import { maskPII } from '../utils';
 
 class CrowbarRelayWebSocket extends TypedEmitter<{
     "ready": () => void,
@@ -68,7 +67,6 @@ class CrowbarRelayWebSocket extends TypedEmitter<{
         });
 
         this.ws.addEventListener("message", (msg) => {
-            logger.debug("Crowbar Relay WebSocket message:", maskPII(msg.data));
             try {
                 this.emit("message", JSON.parse(msg.data));
             } catch (e) {

src/backend/webhooks/webhook-config-manager.ts

@@ -3,6 +3,9 @@ import frontendCommunicator from "../common/frontend-communicator";
 import JsonDbManager from "../database/json-db-manager";
 import { crowbarRelayWebSocket } from "../crowbar-relay/crowbar-relay-websocket";
 import eventManager from "../events/EventManager";
+import { SettingsManager } from "../common/settings-manager";
+import { maskPII } from "../utils";
+import logger from "../logwrapper";
 
 class WebhookConfigManager extends JsonDbManager<WebhookConfig, { "webhook-received": (data: { config: WebhookConfig; payload: unknown; }) => void }> {
     constructor() {
@@ -18,32 +21,37 @@ class WebhookConfigManager extends JsonDbManager<WebhookConfig, { "webhook-recei
         crowbarRelayWebSocket.on("ready", sendWebhookIds);
 
         crowbarRelayWebSocket.on("message", (msg) => {
-            if (msg.event === "webhook") {
-                const data = msg.data as { webhookId: string; payload: unknown; };
-
-                const webhookConfig = this.getItem(data.webhookId);
-                if (!webhookConfig) {
-                    return;
-                }
-
-                let payload = data.payload;
-
-                if (typeof payload === "string") {
-                    try {
-                        payload = JSON.parse(payload);
-                    } catch {
-                        // ignore
-                    }
-                }
-
-                this.emit("webhook-received", { config: webhookConfig, payload });
-
-                eventManager.triggerEvent("firebot", "webhook-received", {
-                    webhookId: webhookConfig.id,
-                    webhookName: webhookConfig.name,
-                    webhookPayload: payload
-                });
+            if (msg.event !== "webhook") {
+                return;
             }
+
+            if (SettingsManager.getSetting("WebhookDebugLogs")) {
+                logger.debug("Webhook received:", maskPII(msg.data));
+            }
+
+            const data = msg.data as { webhookId: string; payload: unknown; };
+
+            const webhookConfig = this.getItem(data.webhookId);
+            if (!webhookConfig) {
+                return;
+            }
+
+            let payload = data.payload;
+
+            if (typeof payload === "string") {
+                try {
+                    payload = JSON.parse(payload);
+                } catch {}
+            }
+
+            this.emit("webhook-received", { config: webhookConfig, payload });
+
+            eventManager.triggerEvent("firebot", "webhook-received", {
+                webhookId: webhookConfig.id,
+                webhookName: webhookConfig.name,
+                webhookPayload: payload
+            });
+
         });
     }
 }

src/gui/app/directives/settings/categories/advanced-settings.js

@@ -38,6 +38,7 @@
                         name="Proxied Webhooks"
                         tag="Experimental"
                         description="This feature allows you to receive webhooks without exposing your local network. A 'Webhook Received' event is triggered each time a webhook is received with the payload available via the $webhookPayload variable."
+                        bottom-border="false"
                     >
                         <setting-description-addon>
                             <b>This feature is experimental and not guaranteed to be stable.</b>
@@ -48,6 +49,20 @@
                         />
                     </firebot-setting>
 
+                    <firebot-setting
+                        name="Webhook Debug Logs"
+                        description="Enable or disable logging for incoming webhooks. Webhooks might contain sensitive information. Be careful where you send logs when this option is enabled."
+                    >
+                        <setting-description-addon>
+                            <b>Requires Debug Mode to also be enabled.</b>
+                        </setting-description-addon>
+                        <firebot-button
+                            text="{{settings.getSetting('WebhookDebugLogs') && settings.getSetting('DebugMode') ? 'Disable Webhook Logs' : 'Enable Webhook Logs' }}"
+                            disabled="!settings.getSetting('DebugMode')"
+                            ng-click="settings.saveSetting('WebhookDebugLogs', !settings.getSetting('WebhookDebugLogs'))"
+                        />
+                    </firebot-setting>
+
                     <firebot-setting
                         name="Quote ID Recalculation"
                         description="Quote IDs in Firebot are static, even if a quote before another is deleted. If you would like to recalculate your quote IDs so that there isn't any skipped quote numbers, you can use this option."

src/gui/app/directives/settings/firebot-setting.js

@@ -6,16 +6,17 @@
             bindings: {
                 name: "@",
                 tag: "@?",
-                description: "@"
+                description: "@",
+                bottomBorder: "<?"
             },
             transclude: {
                 descriptionAddon: "?settingDescriptionAddon"
             },
             template: `
-            <div style="display: flex; width: 100%; padding: 20px 0; border-bottom: 2px solid #383D3F;">
+            <div style="display: flex; width: 100%; padding: 20px 0;" ng-style="{'border-bottom': $ctrl.bottomBorder === false ? 'none' : '2px solid #383D3F'}">
                 <div style="flex: 1;">
                     <h4 style="display: flex; align-items: center; gap: 10px;">{{$ctrl.name}}<span ng-if="$ctrl.tag" class="label label-primary">{{$ctrl.tag}}</span></h4>
-                    <div style="opacity: 0.7;">{{$ctrl.description}} <div style="display: inline-block" ng-transclude="descriptionAddon"></div></div>
+                    <div style="opacity: 0.7;">{{$ctrl.description}} <div style="display: inline-block;margin-top: 5px;" ng-transclude="descriptionAddon"></div></div>
                 </div>
                 <div ng-transclude style="flex: 1; display:flex; align-items: center; justify-content: flex-end;"></div>
             </div>

src/types/settings.ts

@@ -95,6 +95,7 @@ export type FirebotSettingsTypes = {
     UseOverlayInstances: boolean;
     ViewerDB: boolean;
     ViewerListPageSize: number;
+    WebhookDebugLogs: boolean;
     WebOnlineCheckin: boolean;
     WebServerPort: number;
     WhileLoopEnabled: boolean;
@@ -211,6 +212,7 @@ export const FirebotSettingsDefaults: FirebotSettingsTypes = {
     UseOverlayInstances: false,
     ViewerDB: true,
     ViewerListPageSize: 10,
+    WebhookDebugLogs: false,
     WebOnlineCheckin: false,
     WebServerPort: 7472,
     WhileLoopEnabled: false,