Add DEBUG mode (#46)

Author: fwang

README.md

@@ -294,9 +294,27 @@ Here's a link deployed using SST's [`NextjsSite`](https://docs.sst.dev/construct
 
 ## Debugging
 
-To find the **server and image optimization** log, go to the AWS CloudWatch console in the **region you deployed to**.
+To find the **server and image optimization log**, go to the AWS CloudWatch console in the **region you deployed to**.
 
-To find the **middleware** log, go to the AWS CloudWatch console in the **region you are physically close to**. For example, if you deployed your app to `us-east-1` and you are visiting the app from in London, the logs are likely to be in `eu-west-2`.
+To find the **middleware log**, go to the AWS CloudWatch console in the **region you are physically close to**. For example, if you deployed your app to `us-east-1` and you are visiting the app from in London, the logs are likely to be in `eu-west-2`.
+
+#### Debug mode
+
+You can run OpenNext in debug mode by setting the `OPEN_NEXT_DEBUG` environment variable:
+
+```bash
+OPEN_NEXT_DEBUG=true npx open-next@latest build
+```
+
+This does two things:
+
+1. Lambda handler functions in the build output will not be minified.
+1. Lambda handler functions will automatically `console.log` the request event object along with other debugging information.
+
+It is recommended to **turn off debug mode when building for production** because:
+
+1. Un-minified function code is 2-3X larger than minified code. This will result in longer Lambda cold start times.
+1. Logging the event object on each request can result in a lot of logs being written to AWS CloudWatch. This will result in increated AWS costs.
 
 ## Opening an issue
 

src/adapters/image-optimization-adapter.ts

@@ -18,8 +18,8 @@ import {
   ImageOptimizerCache,
   // @ts-ignore
 } from "next/dist/server/image-optimizer";
-
 import { loadConfig } from "./util.js";
+import { debug } from "./logger.js";
 
 const bucketName = process.env.BUCKET_NAME;
 const nextDir = path.join(__dirname, ".next");
@@ -31,7 +31,7 @@ const nextConfig = {
     ...config.images,
   },
 };
-console.log("Init config", {
+debug("Init config", {
   nextDir,
   bucketName,
   nextConfig,
@@ -45,7 +45,7 @@ export async function handler(
   event: APIGatewayProxyEventV2
 ): Promise<APIGatewayProxyResultV2> {
   // Images are handled via header and query param information.
-  console.log("handler event", event);
+  debug("handler event", event);
   const { headers: rawHeaders, queryStringParameters: queryString } = event;
 
   try {
@@ -90,7 +90,7 @@ function validateImageParams(
     nextConfig,
     false
   );
-  console.log("image params", imageParams);
+  debug("image params", imageParams);
   if ("errorMessage" in imageParams) {
     throw new Error(imageParams.errorMessage);
   }
@@ -109,7 +109,7 @@ async function optimizeImage(
     false, // not in dev mode
     downloadHandler
   );
-  console.log("optimized result", result);
+  debug("optimized result", result);
   return result;
 }
 
@@ -127,7 +127,7 @@ function buildSuccessResponse(result: any) {
 }
 
 function buildFailureResponse(e: any) {
-  console.error(e);
+  debug(e);
   return {
     statusCode: 500,
     headers: {
@@ -147,7 +147,7 @@ async function downloadHandler(
 ) {
   // downloadHandler is called by Next.js. We don't call this function
   // directly.
-  console.log("downloadHandler url", url);
+  debug("downloadHandler url", url);
 
   // Reads the output from the Writable and writes to the response
   const pipeRes = (w: Writable, res: ServerResponse) => {

src/adapters/logger.ts

@@ -0,0 +1,5 @@
+export function debug(...args: any[]) {
+  if (process.env.OPEN_NEXT_DEBUG) {
+    console.log(...args);
+  }
+}

src/adapters/middleware-adapter.ts

@@ -3,6 +3,7 @@ import type {
   CloudFrontRequestResult,
   CloudFrontHeaders,
 } from "aws-lambda";
+import { debug } from "./logger.js";
 
 // @ts-ignore
 const index = await (() => import("./middleware.js"))();
@@ -12,9 +13,9 @@ export async function handler(
 ): Promise<CloudFrontRequestResult> {
   const request = event.Records[0].cf.request;
   const { uri, method, headers, querystring, body } = request;
-  console.log(uri);
-  console.log(request);
-  console.log(request.headers);
+  debug(uri);
+  debug(request);
+  debug(request.headers);
 
   // Convert CloudFront request to Node request
   // @ts-ignore Types has not been added for Node 18 native fetch API
@@ -44,7 +45,7 @@ export async function handler(
   const response = await index.default(nodeRequest, {
     waitUntil: () => {},
   });
-  console.log("middleware response header", response.headers);
+  debug("middleware response header", response.headers);
 
   // WORKAROUND: Pass headers from middleware function to server function (AWS specific) — https://github.com/serverless-stack/open-next#workaround-pass-headers-from-middleware-function-to-server-function-aws-specific
   if (response.headers.get("x-middleware-next") === "1") {
@@ -78,7 +79,7 @@ function getMiddlewareRequestHeaders(response: any) {
     .forEach((key: string) => {
       headers[key] = response.headers.get(`x-middleware-request-${key}`);
     });
-  console.log("getMiddlewareRequestHeaders", headers);
+  debug("getMiddlewareRequestHeaders", headers);
   return JSON.stringify(headers);
 }
 
@@ -89,7 +90,7 @@ function getMiddlewareResponseHeaders(response: any) {
       headers[key] = value;
     }
   });
-  console.log("getMiddlewareResponseHeaders", headers);
+  debug("getMiddlewareResponseHeaders", headers);
   return JSON.stringify(headers);
 }
 
@@ -98,6 +99,6 @@ function httpHeadersToCfHeaders(httpHeaders: any) {
   httpHeaders.forEach((value: string, key: string) => {
     headers[key] = [{ key, value }];
   });
-  console.log("httpHeadersToCfHeaders", headers);
+  debug("httpHeadersToCfHeaders", headers);
   return headers;
 }

src/adapters/server-adapter.ts

@@ -10,12 +10,13 @@ import type {
 // @ts-ignore
 import NextServer from "next/dist/server/next-server.js";
 import { loadConfig } from "./util.js";
+import { debug } from "./logger.js";
 
 setNextjsServerWorkingDirectory();
 const nextDir = path.join(__dirname, ".next");
 const config = loadConfig(nextDir);
 const htmlPages = loadHtmlPages();
-console.log({ nextDir });
+debug({ nextDir });
 
 // Create a NextServer
 const requestHandler = new NextServer.default({
@@ -72,7 +73,7 @@ export async function handler(
   event: APIGatewayProxyEventV2,
   context: Context
 ): Promise<APIGatewayProxyResultV2> {
-  console.log(event);
+  debug(event);
 
   // WORKAROUND: Pass headers from middleware function to server function (AWS specific) — https://github.com/serverless-stack/open-next#workaround-pass-headers-from-middleware-function-to-server-function-aws-specific
   const middlewareRequestHeaders = JSON.parse(
@@ -98,7 +99,7 @@ export async function handler(
   );
   response.headers = { ...response.headers, ...middlewareResponseHeaders };
 
-  console.log("response headers", response.headers);
+  debug("response headers", response.headers);
 
   return response;
 }

src/build.ts

@@ -248,10 +248,12 @@ function createMiddlewareBundle(buildOutput: any) {
   // Save middleware code to file
   const src: string = buildOutput.output[middlewareName].files["index.js"].data;
   fs.writeFileSync(path.join(tempDir, "middleware.js"), src);
-  fs.copyFileSync(
-    path.join(__dirname, "adapters", "middleware-adapter.js"),
-    path.join(tempDir, "middleware-adapter.js")
-  );
+  ["middleware-adapter.js", "logger.js"].forEach((file) => {
+    fs.copyFileSync(
+      path.join(__dirname, "adapters", file),
+      path.join(tempDir, file)
+    );
+  });
 
   // Build Lambda code
   esbuildSync({
@@ -319,8 +321,15 @@ function esbuildSync(options: BuildOptions) {
     format: "esm",
     platform: "node",
     bundle: true,
-    minify: true,
+    minify: process.env.OPEN_NEXT_DEBUG ? false : true,
     ...options,
+    // "process.env.OPEN_NEXT_DEBUG" determins if the logger writes to console.log
+    define: {
+      ...options.define,
+      "process.env.OPEN_NEXT_DEBUG": process.env.OPEN_NEXT_DEBUG
+        ? "true"
+        : "false",
+    },
   });
 
   if (result.errors.length > 0) {