Merge branch 'main' of https://github.com/formbricks/formbricks into main

.devcontainer/Dockerfile

@@ -0,0 +1,16 @@
+# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
+ARG VARIANT=18-bullseye
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node modules
+# RUN su node -c "npm install -g <your-package-list-here>"
+
+RUN su node -c "npm install -g pnpm"

.devcontainer/devcontainer.json

@@ -0,0 +1,30 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node-postgres
+// Update the VARIANT arg in docker-compose.yml to pick a Node.js version
+{
+	"name": "Node.js & PostgreSQL",
+	"dockerComposeFile": "docker-compose.yml",
+	"service": "app",
+	"workspaceFolder": "/workspace",
+
+	// Configure tool-specific properties.
+	"customizations": {
+		// Configure properties specific to VS Code.
+		"vscode": {
+			// Add the IDs of extensions you want installed when the container is created.
+			"extensions": [
+				"dbaeumer.vscode-eslint"
+			]
+		}
+	},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// This can be used to network with other containers or with the host.
+	// "forwardPorts": [3000, 5432],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "pnpm install",
+
+	// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "node"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,41 @@
+version: '3.8'
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        # Update 'VARIANT' to pick an LTS version of Node.js: 18, 16, 14.
+        # Append -bullseye or -buster to pin to an OS version.
+        # Use -bullseye variants on local arm64/Apple Silicon.
+        VARIANT: "18"
+
+    volumes:
+      - ..:/workspace:cached
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: sleep infinity
+
+    # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
+    network_mode: service:db
+    # Uncomment the next line to use a non-root user for all processes.
+    # user: node
+
+    # Use "forwardPorts" in **devcontainer.json** to forward an app port locally. 
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+
+  db:
+    image: postgres:latest
+    restart: unless-stopped
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_USER: postgres
+      POSTGRES_DB: postgres
+    # Add "forwardPorts": ["5432"] to **devcontainer.json** to forward PostgreSQL locally.
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+
+volumes:
+  postgres-data: null

packages/feedback/src/errors.ts

@@ -0,0 +1,30 @@
+import { FormbricksConfig } from ".";
+
+export class FormbricksError extends Error {
+  constructor(message?: string) {
+    super(message);
+    this.name = "FormbricksError";
+  }
+}
+
+export class InvalidConfigError extends FormbricksError {
+  property: keyof FormbricksConfig;
+
+  constructor(property: keyof FormbricksConfig) {
+    super(`Missing/invalid property on config: ${property}`);
+    this.name = "InvalidConfigError";
+    this.property = property;
+  }
+}
+
+export class NetworkError extends FormbricksError {
+  statusCode: number;
+  url: string;
+
+  constructor(status: number, url: string, message?: string) {
+    super(`Network Error (${status}), ${url}: ${message}`);
+    this.name = "NetworkError";
+    this.statusCode = status;
+    this.url = url;
+  }
+}

packages/feedback/src/index.ts

@@ -1,5 +1,6 @@
 import { computePosition, flip, shift } from "@floating-ui/dom";
 import { createFocusTrap } from "focus-trap";
+import { FormbricksError, InvalidConfigError, NetworkError } from "./errors";
 
 import { formHTML } from "./form-html";
 import formCSS from "./form.css";
@@ -15,14 +16,23 @@ export interface FormbricksConfig {
   formId?: string;
   formbricksUrl?: string;
   customer?: Record<any, any>;
-  disableErrorAlert: boolean;
+  disableErrorHandler: boolean;
   closeOnOutsideClick: boolean;
+  errorHandler?: (err: FormbricksError) => void;
 }
 
 let config: FormbricksConfig = {
   customer: {},
-  disableErrorAlert: false,
+  disableErrorHandler: false,
   closeOnOutsideClick: true,
+  errorHandler(err) {
+    // If the user has disabled the error handler, do nothing
+    if (config.disableErrorHandler) return;
+
+    if (err instanceof InvalidConfigError && err.property === "formId")
+      alert("Unable to send feedback: No formId provided");
+    else alert("Unable to send feedback: " + err.message);
+  },
   // Merge with existing config
   ...(window as any).formbricks?.config,
 };
@@ -250,9 +260,9 @@ function submit(e: Event) {
   const target = e.target as HTMLFormElement;
 
   if (!config.formId) {
-    console.error("Formbricks: No formId provided");
-    if (!config.disableErrorAlert) alert("Unable to send feedback: No formId provided");
-    return;
+    const error = new InvalidConfigError("formId");
+    console.error(error);
+    return config.errorHandler?.(error);
   }
 
   const submitElement = document.getElementById("formbricks__submit")!;
@@ -282,9 +292,10 @@ function submit(e: Event) {
       body: JSON.stringify(body),
     }
   )
-    .then((res) => {
+    .then(async (res) => {
       if (!res.ok) {
-        throw new Error("Unable to send feedback");
+        const response = await res.json();
+        throw new NetworkError(res.status, res.url, response.error);
       }
       containerElement.setAttribute("data-success", "");
       const feedbackType = containerElement.getAttribute("data-feedback-type");
@@ -304,8 +315,8 @@ function submit(e: Event) {
       document.getElementById("formbricks__success-subtitle")!.innerText = successSubtitle;
     })
     .catch((e) => {
-      console.error("Formbricks:", e);
-      if (!config.disableErrorAlert) alert(`Could not send feedback: ${e.message}`);
+      console.error(e);
+      config.errorHandler?.(e);
     });
 
   return false;