Framework Integration Overview

​

Introduction

Bugster SDK is designed to seamlessly integrate with a variety of JavaScript frameworks, allowing you to add automated testing capabilities to your web applications regardless of the technology stack you’re using. This overview will introduce you to the general concepts of integrating Bugster SDK with different frameworks and provide links to detailed guides for specific frameworks.

​

Supported Frameworks

Bugster SDK currently provides dedicated integration support for the following frameworks:

• Angular
• Next.js (both Pages and App Router)
• Svelte
• React
• Vue.js

While these frameworks have dedicated guides, Bugster SDK can work with any JavaScript-based web application.

​

General Integration Steps

Regardless of the framework you’re using, the general steps for integrating Bugster SDK remain similar:

1. Installation: Install the Bugster SDK package using your preferred package manager.
2. Initialization: Initialize the SDK as early as possible in your application’s lifecycle.
3. Configuration: Set up any necessary configuration options.
4. Event Capturing: Ensure the SDK can capture user interactions and relevant events.
5. Test Generation: Use the captured events to generate and run tests.

​

Code Snippet: Basic Integration

Here’s a basic example of how to integrate Bugster SDK into a JavaScript application:

import BugsterTracker from '@bugster/bugster-js';

BugsterTracker.init({
  apiKey: 'YOUR_BUGSTER_API_KEY',
  // Additional configuration options
});

​

Best Practices for Framework Integration

1. Early Initialization: Initialize Bugster SDK as early as possible in your application’s lifecycle.
2. Consistent Configuration: Maintain consistent SDK configuration across different environments.
3. Performance: Monitor the performance impact of Bugster SDK and adjust settings if needed.

​

Troubleshooting Common Issues

• SDK Not Capturing Events: Ensure the SDK is initialized before any user interactions occur.
• Framework-Specific Events Not Recorded: Check if you need to use any framework-specific event capturing methods.
• Conflicts with Other Tools: Be aware of potential conflicts with other development or testing tools.

​

Next Steps

To get started with integrating Bugster SDK into your specific framework, choose from the following guides:

• Angular Integration Guide
• Next.js Integration Guide
• Svelte Integration Guide
• React Integration Guide
• Vue.js Integration Guide

Each guide provides detailed, framework-specific instructions to help you successfully integrate and use Bugster SDK in your web application.

If you’re using a framework not listed here, you can still use the general integration steps and adapt them to your specific needs. If you need further assistance, don’t hesitate to contact our support team.