Add ability to get bug report context in one click.

.eslintrc.json

@@ -39,7 +39,8 @@
       "plugins": ["@typescript-eslint"],
       "extends": ["eslint:recommended"],
       "globals": {
-        "NodeJS": true
+        "NodeJS": true,
+        "BufferEncoding": "readonly"
       },
       "rules": {
         "no-unused-vars": "off",

packages/backend-core/src/logging/index.ts

@@ -1,4 +1,4 @@
 export * as correlation from "./correlation/correlation"
-export { logger } from "./pino/logger"
+export { logger, tail } from "./pino/logger"
 export * from "./alerts"
 export * as system from "./system"

packages/backend-core/src/logging/pino/logger.ts

@@ -1,4 +1,4 @@
-import pino, { LoggerOptions } from "pino"
+import pino, { LoggerOptions, DestinationStream } from "pino"
 import pinoPretty from "pino-pretty"
 
 import { IdentityType } from "@budibase/types"
@@ -22,11 +22,41 @@ function isMessage(obj: any) {
   return typeof obj === "string"
 }
 
-// LOGGER
+class CircularByteBuffer implements DestinationStream {
+  private buffer: Buffer
+  private head: number = 0
+  private tail: number = 0
+  private capacity: number
 
+  constructor(capacity: number) {
+    this.capacity = capacity
+    this.buffer = Buffer.alloc(capacity)
+  }
+
+  write(data: string): void {
+    const buffer = Buffer.from(data)
+    for (let i = 0; i < buffer.length; i++) {
+      this.buffer[this.tail] = buffer[i]
+      this.tail = (this.tail + 1) % this.capacity
+    }
+  }
+
+  readAll(encoding: BufferEncoding = "utf8"): string {
+    const data = Buffer.alloc(this.buffer.length)
+    let index = 0
+    while (index < this.buffer.length) {
+      data[index] = this.buffer[this.head]
+      this.head = (this.head + 1) % this.capacity
+      index++
+    }
+    return data.toString(encoding)
+  }
+}
+
+let logTail: CircularByteBuffer | undefined
 let pinoInstance: pino.Logger | undefined
 if (!env.DISABLE_PINO_LOGGER) {
-  const level = env.LOG_LEVEL
+  const level = env.LOG_LEVEL as pino.Level
   const pinoOptions: LoggerOptions = {
     level,
     formatters: {
@@ -49,21 +79,16 @@ if (!env.DISABLE_PINO_LOGGER) {
   }
 
   const destinations: pino.StreamEntry[] = []
-
   destinations.push(
     env.isDev()
-      ? {
-          stream: pinoPretty({ singleLine: true }),
-          level: level as pino.Level,
-        }
-      : { stream: process.stdout, level: level as pino.Level }
+      ? { stream: pinoPretty({ singleLine: true }), level }
+      : { stream: process.stdout, level }
   )
 
   if (env.SELF_HOSTED) {
-    destinations.push({
-      stream: localFileDestination(),
-      level: level as pino.Level,
-    })
+    logTail = new CircularByteBuffer(1024 * 1024)
+    destinations.push({ stream: logTail, level })
+    destinations.push({ stream: localFileDestination(), level })
   }
 
   pinoInstance = destinations.length
@@ -237,3 +262,4 @@ if (!env.DISABLE_PINO_LOGGER) {
 }
 
 export const logger = pinoInstance
+export const tail = logTail

packages/builder/src/components/common/FontAwesomeIcon.svelte

@@ -24,6 +24,7 @@
     faCircleCheck,
     faGear,
     faRectangleList,
+    faBug,
   } from "@fortawesome/free-solid-svg-icons"
   import { faGithub, faDiscord } from "@fortawesome/free-brands-svg-icons"
 
@@ -39,6 +40,7 @@
     faChevronLeft,
     faCircleInfo,
     faRectangleList,
+    faBug,
 
     // -- Required for easyMDE use in the builder.
     faBold,

packages/builder/src/components/common/HelpMenu.svelte

@@ -4,12 +4,25 @@
   import { licensing } from "stores/portal"
   import { isPremiumOrAbove } from "helpers/planTitle"
   import { ChangelogURL } from "constants"
+  import { API } from "api"
 
   $: premiumOrAboveLicense = isPremiumOrAbove($licensing?.license?.plan?.type)
 
   let show
   let hide
   let popoverAnchor
+
+  async function downloadBugReport() {
+    const resp = await API.fetchBugReportFile()
+    const url = window.URL.createObjectURL(resp)
+    const a = document.createElement("a")
+    a.style.display = "none"
+    a.href = url
+    a.download = "bug-report.zip"
+    document.body.appendChild(a)
+    a.click()
+    window.URL.revokeObjectURL(url)
+  }
 </script>
 
 <div bind:this={popoverAnchor} class="help">
@@ -61,6 +74,13 @@
         <Body size="S">Budibase University</Body>
       </a>
       <div class="divider" />
+      <a role="button" on:click={downloadBugReport}>
+        <div class="icon">
+          <FontAwesomeIcon name="fa-solid fa-bug" />
+        </div>
+        <Body size="S">Download bug report</Body>
+      </a>
+      <div class="divider" />
       <a
         href={premiumOrAboveLicense
           ? "mailto:[email protected]"

packages/frontend-core/src/api/app.js

@@ -162,6 +162,24 @@ export const buildAppEndpoints = API => ({
     })
   },
 
+  /**
+   *  Gets the bug report file.
+   */
+  fetchBugReportFile: async body => {
+    if (!body) {
+      body = {}
+    }
+    return await API.post({
+      url: `/api/debug/bug-report`,
+      parseResponse: response => response.blob(),
+      body: {
+        clientApiCalls: API.getLogs(),
+        browserUrl: window.location.href,
+        ...body,
+      },
+    })
+  },
+
   /**
    * Syncs an app with the production database.
    * @param appId the ID of the app to sync

packages/frontend-core/src/api/index.js

@@ -82,6 +82,14 @@ export const createAPIClient = config => {
     ...config,
   }
   let cache = {}
+  let logs = []
+
+  const addLogEntry = entry => {
+    logs.push(entry)
+    while (logs.length > 20) {
+      logs.shift()
+    }
+  }
 
   // Generates an error object from an API response
   const makeErrorFromResponse = async (
@@ -161,6 +169,17 @@ export const createAPIClient = config => {
       }
     }
 
+    let logEntry = {
+      time: new Date().toISOString(),
+      request: {
+        method,
+        url,
+        body: requestBody,
+      },
+      response: null,
+      error: null,
+    }
+
     // Make request
     let response
     try {
@@ -171,24 +190,41 @@ export const createAPIClient = config => {
         credentials: "same-origin",
       })
     } catch (error) {
+      logEntry.error = {
+        message: error.message,
+      }
+      addLogEntry(logEntry)
       delete cache[url]
       throw makeError("Failed to send request", { url, method })
     }
 
+    logEntry.response = {
+      status: response.status,
+      headers: response.headers,
+    }
+
     // Handle response
     if (response.status >= 200 && response.status < 400) {
       handleMigrations(response)
       try {
         if (parseResponse) {
           return await parseResponse(response)
         } else {
-          return await response.json()
+          const json = await response.json()
+          logEntry.response.body = json
+          return json
         }
       } catch (error) {
+        logEntry.error = {
+          message: error.message,
+        }
         delete cache[url]
         return null
+      } finally {
+        addLogEntry(logEntry)
       }
     } else {
+      addLogEntry(logEntry)
       delete cache[url]
       throw await makeErrorFromResponse(response, method, suppressErrors)
     }
@@ -263,6 +299,9 @@ export const createAPIClient = config => {
       config?.attachHeaders(headers)
       return headers?.[Header.APP_ID]
     },
+    getLogs() {
+      return logs
+    },
   }
 
   // Attach all endpoints

packages/server/src/api/controllers/debug.ts

@@ -1,15 +1,28 @@
 import os from "os"
 import process from "process"
-import { env } from "@budibase/backend-core"
-import { GetDiagnosticsResponse, UserCtx } from "@budibase/types"
+import { env, logging } from "@budibase/backend-core"
+import {
+  BugReportRequest,
+  GetDiagnosticsResponse,
+  UserCtx,
+} from "@budibase/types"
+import { createTempFolder } from "src/utilities/fileSystem"
+import fs from "fs"
+import { basename, join } from "path"
+import archiver from "archiver"
+import { csvToJson } from "./table"
 
 export async function systemDebugInfo(
   ctx: UserCtx<void, GetDiagnosticsResponse>
 ) {
+  ctx.body = getDiagnostics()
+}
+
+function getDiagnostics(): GetDiagnosticsResponse {
   const { days, hours, minutes } = secondsToHMS(os.uptime())
   const totalMemory = convertBytes(os.totalmem())
 
-  ctx.body = {
+  return {
     budibaseVersion: env.VERSION,
     hosting: env.DEPLOYMENT_ENVIRONMENT,
     nodeVersion: process.version,
@@ -46,3 +59,69 @@
 
   return { gb, mb, kb }
 }
+
+class ZipBuilder {
+  static inTmpDir(name: string): ZipBuilder {
+    return new ZipBuilder(join(createTempFolder(), name))
+  }
+
+  private constructor(private dir: string) {
+    fs.mkdirSync(dir, { recursive: true })
+  }
+
+  binary(path: string, content: Buffer) {
+    const fd = fs.openSync(join(this.dir, path), "w")
+    try {
+      fs.writeFileSync(fd, content)
+    } finally {
+      fs.closeSync(fd)
+    }
+  }
+
+  text(path: string, content: string) {
+    this.binary(path, Buffer.from(content))
+  }
+
+  json(path: string, content: Record<string, any>) {
+    this.text(path, JSON.stringify(content, null, 2))
+  }
+
+  async build(): Promise<string> {
+    const archive = archiver("zip", { zlib: { level: 9 } })
+    const stream = fs.createWriteStream(`${this.dir}.zip`)
+
+    return new Promise((resolve, reject) => {
+      archive
+        .directory(this.dir, basename(this.dir))
+        .on("error", err => reject(err))
+        .pipe(stream)
+
+      stream.on("close", () => resolve(`${this.dir}.zip`))
+      archive.finalize()
+    })
+  }
+}
+
+export async function bugReport(ctx: UserCtx<BugReportRequest>) {
+  const { browserUrl, clientApiCalls } = ctx.request.body
+
+  const zip = ZipBuilder.inTmpDir("bug-report")
+
+  if (logging.tail !== undefined) {
+    zip.text("server.log", logging.tail!.readAll())
+  }
+
+  zip.json("user.json", ctx.user)
+  zip.json("diagnostics.json", getDiagnostics())
+
+  if (clientApiCalls) {
+    zip.json("client-api-calls.json", clientApiCalls)
+  }
+
+  zip.json("meta.json", { browserUrl })
+
+  const path = await zip.build()
+
+  ctx.attachment("bug-report.zip")
+  ctx.body = fs.createReadStream(path)
+}

packages/server/src/api/routes/debug.ts

@@ -11,4 +11,10 @@ router.get(
   controller.systemDebugInfo
 )
 
+router.post(
+  "/api/debug/bug-report",
+  authorized(permissions.BUILDER),
+  controller.bugReport
+)
+
 export default router