[feat] Logger package

.vscode/settings.json

@@ -11,6 +11,7 @@
     "apps/cli/cli-core",
     "apps/cli/cli-web",
     "apps/docs",
-    "apps/marketing"
+    "apps/marketing",
+    "packages/logger"
   ]
 }

apps/cli/cli-core/package.json

@@ -13,6 +13,7 @@
     "format:check": "prettier --check --plugin-search-dir=. src/**/*.{cjs,mjs,ts,tsx,md,json} --ignore-path ../.gitignore"
   },
   "dependencies": {
+    "@captain/logger": "workspace:*",
     "@trpc/client": "10.9.0",
     "@trpc/server": "10.9.0",
     "node-fetch": "^3.3.0",

apps/cli/cli-core/src/get-sample-hooks.ts

@@ -2,14 +2,14 @@ import path from "path";
 import fs from "fs";
 import fsPromise from "fs/promises";
 import fetch from "node-fetch";
+
 import { HOOK_PATH } from "./constants";
+import logger from "@captain/logger";
 
 export async function getSampleHooks() {
   // Create the directory if it doesn't exist
   if (!fs.existsSync(HOOK_PATH)) {
-    console.log(
-      `\x1b[33m[WARNING] Could not find .thing directory, creating it now!\x1b[0m`
-    );
+    logger.warn(`Could not find .thing directory, creating it now!`);
     fs.mkdirSync(HOOK_PATH, { recursive: true });
   }
 
@@ -20,10 +20,10 @@ export async function getSampleHooks() {
     download_url: string;
   }[];
 
-  console.log(`[INFO] Downloading ${files.length} sample hooks.`);
+  logger.info(`Downloading ${files.length} sample hooks.`);
 
   const promiseMap = files.map(async (file) => {
-    console.log(`[INFO] Downloading ${file.name}`);
+    logger.info(`Downloading ${file.name}`);
     const fileContent = await fetch(file.download_url).then((res) =>
       res.text()
     );
@@ -32,8 +32,8 @@ export async function getSampleHooks() {
     try {
       return await fsPromise.writeFile(newFilePath, fileContent);
     } catch (e) {
-      console.log(`[ERROR] Could not write file ${file.name}`);
-      console.log(e);
+      logger.error(`Could not write file ${file.name}`);
+      logger.error(e);
       throw e;
     }
   });

apps/cli/cli-core/src/open-folder.ts

@@ -3,6 +3,8 @@ import { promisify } from "util";
 import os from "os";
 import fs from "fs";
 
+import logger from "@captain/logger";
+
 const promisifiedExecFile = promisify(childProcess.execFile);
 
 const getCommand = () => {
@@ -23,9 +25,7 @@ const getCommand = () => {
 export async function openInExplorer(path: string) {
   // Create the directory if it doesn't exist
   if (!fs.existsSync(path)) {
-    console.log(
-      `\x1b[33m[WARNING] Could not find .thing directory, creating it now!\x1b[0m`
-    );
+    logger.warn(`Could not find .thing directory, creating it now!`);
     fs.mkdirSync(path, { recursive: true });
   }
 

apps/cli/cli-core/src/templateSubstitution.ts

@@ -1,3 +1,5 @@
+import logger from "@captain/logger";
+
 export const substituteTemplate = (input: {
   template: string;
   sanitize?: boolean;
@@ -13,17 +15,15 @@ export const substituteTemplate = (input: {
     const variable = match[1]?.trim();
 
     if (!variable) {
-      console.log(`\u001b[31m[ERROR] Invalid template configuration`);
+      logger.error(`Invalid template configuration`);
       throw new Error(`Invalid template configuration`);
     }
     const sanitizedString = `%%${variable}%%`;
 
     const fromEnv = process.env[variable];
 
     if (!fromEnv) {
-      console.log(
-        `\u001b[31m[ERROR] Environment variable ${variable} not found`
-      );
+      logger.error(`Environment variable ${variable} not found`);
       throw new Error(`Environment variable ${variable} not found`);
     }
 

apps/cli/cli-core/src/trpc.ts

@@ -15,10 +15,29 @@ import { substituteTemplate } from "./templateSubstitution";
 
 export type { ConfigValidatorType } from "./update-config";
 
+import logger from "@captain/logger";
+import { observable } from "@trpc/server/observable";
+
+import type { LogLevels } from "@captain/logger";
+
 export const t = initTRPC.create({
   transformer: superjson,
 });
 export const cliApiRouter = t.router({
+  onLog: t.procedure.subscription(() => {
+    return observable<{ message: string; level: LogLevels }>((emit) => {
+      const onLog = (m: { message: string; level: LogLevels }) => {
+        emit.next(m);
+      };
+
+      logger.subscribe(onLog);
+
+      return () => {
+        logger.unsubscribe(onLog);
+      };
+    });
+  }),
+
   getBlobs: t.procedure.query(async () => {
     if (!fs.existsSync(HOOK_PATH)) {
       // TODO: this should probably be an error, and the frontend should handle it
@@ -87,8 +106,8 @@ export const cliApiRouter = t.router({
       try {
         await openInExplorer(path.join(HOOK_PATH, input.path));
       } catch (e) {
-        console.log(
-          "[ERROR] Failed to open folder (unless you're on Windows, then this just happens)",
+        logger.error(
+          "Failed to open folder (unless you're on Windows, then this just happens)",
           e
         );
       }
@@ -108,7 +127,7 @@ export const cliApiRouter = t.router({
     .mutation(async ({ input }) => {
       const { file, url } = input;
       let hasCustomConfig = false;
-      console.log(`[INFO] Reading file ${file}`);
+      logger.info(`Reading file ${file}`);
 
       let config = {
         url,
@@ -128,7 +147,7 @@ export const cliApiRouter = t.router({
 
       if (fs.existsSync(path.join(HOOK_PATH, configName))) {
         hasCustomConfig = true;
-        console.log(`[INFO] Found ${configName}, reading it`);
+        logger.info(`Found ${configName}, reading it`);
         const configFileContents = await fsPromises.readFile(
           path.join(HOOK_PATH, configName)
         );
@@ -154,8 +173,8 @@ export const cliApiRouter = t.router({
       const data = await fsPromises.readFile(path.join(HOOK_PATH, file));
 
       try {
-        console.log(
-          `[INFO] Sending to ${config.url} ${
+        logger.info(
+          `Sending to ${config.url} ${
             hasCustomConfig ? `with custom config from ${configName}` : ""
           }\n`
         );
@@ -166,18 +185,16 @@ export const cliApiRouter = t.router({
           body: config.method !== "GET" ? data.toString() : undefined,
         }).then((res) => res.json());
 
-        console.log(
-          `[INFO] Got response: \n\n${JSON.stringify(fetchedResult, null, 2)}\n`
+        logger.info(
+          `Got response: \n\n${JSON.stringify(fetchedResult, null, 2)}\n`
         );
         return fetchedResult;
       } catch (e) {
-        console.log("\u001b[31m[ERROR] FAILED TO SEND");
+        logger.error("FAILED TO SEND");
         if ((e as { code: string }).code === "ECONNREFUSED") {
-          console.log(
-            "\u001b[31m[ERROR] Connection refused. Is the server running?"
-          );
+          logger.error("Connection refused. Is the server running?");
         } else {
-          console.log("\u001b[31m[ERROR] Unknown error", e);
+          logger.error("Unknown error", e);
         }
         throw new Error("Connection refused. Is the server running?");
       }
@@ -193,11 +210,11 @@ export const cliApiRouter = t.router({
     )
     .mutation(async ({ input }) => {
       const { name, body, config } = input;
-      console.log(`[INFO] Creating ${name}.json`);
+      logger.info(`Creating ${name}.json`);
 
       await fsPromises.writeFile(path.join(HOOK_PATH, `${name}.json`), body);
       if (config?.url || config?.query || config?.headers) {
-        console.log(`[INFO] Config specified, creating ${name}.config.json`);
+        logger.info(`Config specified, creating ${name}.config.json`);
         return await updateConfig({ name, config });
       }
     }),
@@ -216,7 +233,7 @@ export const cliApiRouter = t.router({
 
       if (!name) throw new Error("No name");
 
-      console.log(`[INFO] updating ${name}.json`);
+      logger.info(`Updating ${name}.json`);
 
       const existingBody = await fsPromises.readFile(
         path.join(HOOK_PATH, `${name}.json`),
@@ -244,7 +261,7 @@ export const cliApiRouter = t.router({
         config?.headers ||
         fs.existsSync(path.join(HOOK_PATH, `${name}.config.json`))
       ) {
-        console.log(`[INFO] Config specified, updating ${name}.config.json`);
+        logger.info(`Config specified, updating ${name}.config.json`);
         return await updateConfig({ name, config });
       }
     }),

apps/cli/cli-web/package.json

@@ -13,6 +13,7 @@
     "format:check": "prettier --check --plugin-search-dir=. src/**/*.{cjs,mjs,ts,tsx,md,json} --ignore-path ../.gitignore"
   },
   "dependencies": {
+    "@captain/logger": "workspace:*",
     "@headlessui/react": "^1.7.8",
     "@heroicons/react": "^2.0.12",
     "@hookform/resolvers": "^2.9.10",

apps/cli/cli-web/src/App.tsx

@@ -4,6 +4,7 @@ import { Toaster } from "react-hot-toast";
 import { JsonBlobs } from "./components/jsonblobs";
 import { EndpointSetting } from "./components/endpointsetting";
 import { useConnectionStateToasts } from "./utils/useConnectionStateToasts";
+import { Logs } from "./components/logs";
 
 const SubscriptionsHelper = () => {
   useConnectionStateToasts();
@@ -52,6 +53,7 @@ export default function Example() {
               <div className="flex flex-col gap-4 divide-y divide-gray-200 rounded-lg border-gray-200">
                 <EndpointSetting />
                 <JsonBlobs />
+                <Logs />
               </div>
             </div>
           </div>

apps/cli/cli-web/src/components/logs.tsx

@@ -0,0 +1,47 @@
+import { ReactNode, useState } from "react";
+import { cliApi } from "../utils/api";
+
+import type { LogLevels } from "@captain/logger";
+
+const colorMap = {
+  trace: "text-gray-600", // gray
+  debug: `text-cyan-600`, // cyan
+  info: `text-white`, // white
+  warn: `text-yellow-600`, // yellow
+  error: `text-red-600`, // red
+} as const;
+
+const webFormat = (input: { level: LogLevels; message: string }) => {
+  const { level, message } = input;
+  return (
+    <span className={colorMap[level]}>
+      <span className="font-semibold">{`[${level.toUpperCase()}]`}</span>{" "}
+      {message}
+    </span>
+  );
+};
+
+export const Logs = () => {
+  const [messages, setMessages] = useState<
+    { level: LogLevels; message: string }[]
+  >([]);
+  cliApi.onLog.useSubscription(undefined, {
+    onData: (data) => {
+      setMessages((messages) => {
+        return [...messages, data];
+      });
+    },
+  });
+
+  return (
+    <div className="flex h-96 flex-col overflow-y-auto rounded-md bg-gray-900 p-4">
+      {messages.map((message, index) => {
+        return (
+          <div key={index} className="text-sm">
+            {webFormat(message)}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

apps/cli/cli-web/src/utils/api-wrapper.tsx

@@ -1,8 +1,16 @@
-import { httpBatchLink } from "@trpc/client";
+import { createWSClient, httpBatchLink, splitLink, wsLink } from "@trpc/client";
 import superjson from "superjson";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { PropsWithChildren, useState } from "react";
+
+const WS_PORT = 2034;
+
+// create persistent WebSocket connection
+const wsClient = createWSClient({
+  url: `ws://localhost:${WS_PORT}`,
+});
+
 import { cliApi } from "./api";
 
 export const ApiTRPCProvider = (props: PropsWithChildren) => {
@@ -11,6 +19,18 @@ export const ApiTRPCProvider = (props: PropsWithChildren) => {
     cliApi.createClient({
       transformer: superjson,
       links: [
+        splitLink({
+          // subscriptions are handled by WebSocket, everything else is handled by HTTP
+          condition(op) {
+            return op.type === "subscription";
+          },
+          true: wsLink({
+            client: wsClient,
+          }),
+          false: httpBatchLink({
+            url: "http://localhost:2033/trpc",
+          }),
+        }),
         httpBatchLink({
           url: "http://localhost:2033/trpc",
         }),

apps/cli/cli/package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@captain/cli-core": "*",
+    "@captain/logger": "workspace:*",
     "@fastify/cors": "^8.2.0",
     "@fastify/http-proxy": "^8.4.0",
     "@fastify/static": "^6.6.0",
@@ -34,7 +35,8 @@
     "fs-extra": "^11.1.0",
     "graceful-fs": "^4.2.10",
     "gradient-string": "^2.0.2",
-    "open": "^8.4.0"
+    "open": "^8.4.0",
+    "ws": "^8.12.1"
   },
   "devDependencies": {
     "@captain/cli-web": "*",
@@ -43,6 +45,7 @@
     "@types/gradient-string": "^1.1.2",
     "@types/inquirer": "^9.0.2",
     "@types/node": "^18.8.0",
+    "@types/ws": "^8.5.4",
     "@vercel/ncc": "^0.36.0",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",

apps/cli/cli/src/index.ts

@@ -1,22 +1,22 @@
 #!/usr/bin/env node
-import { startServer } from "./server";
+import { startServer, startSocketServer } from "./server";
 import { renderTitle } from "./utils/renderTitle";
 
 const DOCS_LINK = "https://docs.webhookthing.com";
 
 const main = async () => {
   renderTitle();
 
-  // link to docs
-  console.log(
-    `\x1b[36m%s\x1b[0m`,
-    `Questions? Check out the docs: ${DOCS_LINK}`
-  );
+  // eslint-disable-next-line no-console
+  console.log(`\x1b[36mQuestions? Check out the docs: ${DOCS_LINK}\x1b[0m`);
+
+  startSocketServer();
 
   await startServer();
 };
 
 main().catch((err) => {
+  // eslint-disable-next-line no-console
   console.error(err);
   process.exit(1);
 });