{"id":17657,"library":"fundebug-javascript","title":"Fundebug JavaScript Error Monitoring","description":"Fundebug-javascript is a client-side library designed for real-time error monitoring of JavaScript applications, enabling developers to quickly detect and diagnose issues impacting user experience. The current stable version is 2.8.8, last published in March 2023. While its core functionality has been stable, updates have historically addressed browser compatibility, added new features like performance metrics, and improved TypeScript support. Key differentiators include automatic capture of various frontend errors (JavaScript execution, resource loading, HTTP requests), support for Source Map restoration, recording of user behavior (clicks, HTTP requests, page navigation, console logs), and a 'screen recording' feature to visually re-create error scenarios, aiding rapid debugging and issue reproduction. It's primarily used for web and frontend applications, with companion libraries for specific frameworks like Vue.js and environments like WeChat Mini Programs.","status":"active","version":"2.8.8","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","fundebug","typescript"],"install":[{"cmd":"npm install fundebug-javascript","lang":"bash","label":"npm"},{"cmd":"yarn add fundebug-javascript","lang":"bash","label":"yarn"},{"cmd":"pnpm add fundebug-javascript","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"While CommonJS `require` works, ESM `import * as` is the recommended pattern, especially since v2.0.0 which added comprehensive TypeScript support. The library exports a default object containing its methods.","wrong":"const fundebug = require('fundebug-javascript');","symbol":"fundebug","correct":"import * as fundebug from 'fundebug-javascript';"},{"note":"Since v2.0.0, `fundebug.init()` is the recommended and TypeScript-friendly method for configuration, including setting the API key. Direct assignment to `fundebug.apikey` might still work but is less robust and not type-safe.","wrong":"fundebug.apikey = 'YOUR_APIKEY';","symbol":"fundebug.init","correct":"fundebug.init({ apikey: 'YOUR_APIKEY' });"},{"note":"The package ships with TypeScript types. For type-only imports, use `import type` to avoid bundling unnecessary runtime code, adhering to modern TypeScript practices. This is useful for defining custom error event structures or handlers.","symbol":"FundebugEvent","correct":"import type { FundebugEvent } from 'fundebug-javascript';"}],"quickstart":{"code":"import * as fundebug from 'fundebug-javascript';\n\nconst FUNDEBUG_API_KEY = process.env.FUNDEBUG_API_KEY ?? '';\n\n// Initialize Fundebug with your API key and other optional configurations\nfundebug.init({\n  apikey: FUNDEBUG_API_KEY,\n  metaData: {  // Example of custom metadata\n    user: { id: 'user-123', name: 'John Doe' },\n    appVersion: '1.0.0'\n  },\n  // Opt-in to monitor HTTP request bodies for detailed debugging\n  monitorHttpBody: true, // Introduced in v2.8.4\n  // To silently ignore performance data on errors\n  silentPerformance: false // Introduced in v1.5.0\n});\n\nconsole.log('Fundebug initialized. Try triggering an error...');\n\n// Simulate a JavaScript error\ndocument.addEventListener('DOMContentLoaded', () => {\n  const btn = document.createElement('button');\n  btn.textContent = 'Trigger Error';\n  document.body.appendChild(btn);\n  btn.onclick = () => {\n    throw new Error('This is a simulated error from Fundebug quickstart!');\n  };\n});\n\n// Manually report an error\ntry {\n  // Some risky operation\n  const data: any = null;\n  data.property.doSomething();\n} catch (error: any) {\n  fundebug.notifyError(error, { customInfo: 'Caught error in try-catch block' });\n}","lang":"typescript","description":"This quickstart demonstrates how to initialize Fundebug with an API key and custom metadata, simulate both uncaught and caught errors, and highlight optional data collection settings."},"warnings":[{"fix":"Replace direct property assignments with calls to `fundebug.init({ apikey: 'YOUR_APIKEY', ...otherOptions })`.","message":"Version 2.0.0 introduced `fundebug.init()` as the primary configuration method, providing better type safety and extensibility. While direct property assignments (e.g., `fundebug.apikey = '...'`) might still function in CommonJS environments, migrating to `fundebug.init()` is crucial for full TypeScript compatibility and recommended for all new projects and upgrades.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use environment variables for the API key (e.g., `process.env.FUNDEBUG_API_KEY`) and ensure they are securely managed by your build process or server configuration.","message":"Fundebug-javascript is designed for browser-side error monitoring. Embedding your API key directly in client-side code exposes it publicly. Consider using environment variables during build time or a backend proxy to securely manage and inject the API key, especially in production environments.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Carefully review Fundebug's configuration options and data collection policies. Ensure that options collecting sensitive data (e.g., `monitorHttpBody`) are only enabled when necessary and in compliance with privacy regulations (GDPR, CCPA) and your organization's policies.","message":"Error monitoring tools, including Fundebug, can collect sensitive user data from error contexts. Features like `setHttpBody` (v1.3.0) and `monitorHttpBody`/`monitorHttpResponse` (v2.8.4) can capture HTTP request/response bodies, which may contain personally identifiable information (PII) or other sensitive data. These options are typically opt-in.","severity":"gotcha","affected_versions":">=1.3.0"},{"fix":"Ensure consistent module usage (either all ESM or all CJS) across your project. If you must mix, use dynamic `import()` in CJS for ESM modules, or use `import * as` for CJS modules in an ESM context, and ensure your bundler (Webpack, Rollup, Vite) is configured for dual-mode support if applicable.","message":"Mixing CommonJS `require()` and ES Modules `import` in the same project, especially for packages that primarily target one module system, can lead to interoperability issues (e.g., `ERR_REQUIRE_ESM`). Although `fundebug-javascript` has types and can be imported as ESM, its original README shows `require`, suggesting a CommonJS primary export.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Ensure you are using the correct import statement for your module system (e.g., `import * as fundebug from 'fundebug-javascript';` for ESM) and that the script is loaded before any calls to `fundebug` functions. For older browsers, ensure the CDN script tag is placed appropriately.","cause":"The Fundebug library was not imported or initialized correctly before being used, often due to incorrect module syntax (e.g., `require` in an ESM context or vice-versa) or script loading order.","error":"ReferenceError: fundebug is not defined"},{"fix":"Upgrade `fundebug-javascript` to version 2.0.0 or higher. Verify your import statement: `import * as fundebug from 'fundebug-javascript';` is recommended. If using a CDN, ensure you're referencing a modern version of the script.","cause":"You are attempting to use the `fundebug.init()` method, but either an older version of the library (pre-2.0.0) is loaded, or the `fundebug` object you're accessing doesn't have the `init` method due to incorrect import or bundling.","error":"TypeError: fundebug.init is not a function"},{"fix":"Call `fundebug.init({ apikey: 'YOUR_APIKEY' })` with a valid API key obtained from your Fundebug account. Ensure the key is a string and that there are no typos.","cause":"The Fundebug API key was not provided or was provided incorrectly during initialization, preventing the library from sending error reports to your Fundebug project.","error":"Fundebug: api key is not configured."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}