Feeling stuck with Segment? Say 👋 to RudderStack.

Log in
JavaScript SDK
Bugsnag

Integrate your JavaScript website with Bugsnag

Don’t go through the pain of direct integration. RudderStack’s JavaScript SDK makes it easy to send data from your JavaScript website to Bugsnag and all of your other cloud tools.

Easy JavaScript SDK to Bugsnag Integration with RudderStack

RudderStack’s open source JavaScript SDK allows you to integrate RudderStack with your JavaScript website to track event data and automatically send it to Bugsnag. With the RudderStack JavaScript SDK, you do not have to worry about having to learn, test, implement or deal with changes in a new API and multiple endpoints every time someone asks for a new integration.

Popular ways to use Bugsnag and RudderStack

Simplify implementation

Add Bugsnag to your app without any custom code.

Track users

Automatically send user and account data and user actions to Bugsnag.

Integrate multiple sources

Easily send data from multiple sources to Bugsnag to give your product and engineering team better context.

Frequently Asked Questions

Bugsnag is a powerful tool when it comes to error reporting. It enables developers to diagnose and fix issues in their applications swiftly. Its in-depth diagnostic data includes stack traces, which are essential for identifying where an error occurred. It also provides breadcrumbs, which are logs of user actions leading up to an error, providing a clearer picture of the problem. This makes Bugsnag an invaluable tool for developers seeking to enhance their applications' stability. Bugsnag has a number of plugins (e.g. plugin-react, plugin-vue, plugin-express, plugin-koa, plugin-restify, etc.) for various platforms and languages to make error tracking easier.

With RudderStack, integration between JavaScript SDK and Bugsnag is simple. Set up a JavaScript SDK source, Bugsnag destination and start sending data. It is a simple two step process.

First, create the connection from Javascript to Bugsnag in your RudderStack control plane. You’ll need a Bugsnag API key for this, which you can get from your Bugsnag dashboard.

Then, to start sending events from your web app to Bugsnag, add this code snippet to your web app’s head section

```<script>

rudderanalytics = window.rudderanalytics = [];

var methods = [

"load",

"page",

"track",

"identify",

"alias",

"group",

"ready",

"reset",

"getAnonymousId",

"setAnonymousId",

"getUserId",

"getUserTraits",

"getGroupId",

"getGroupTraits",

"startSession",

"endSession",

"getSessionId"

];

for (var i = 0; i < methods.length; i++) {

var method = methods[i];

rudderanalytics[method] = (function (methodName) {

return function () {

rudderanalytics.push(

[methodName].concat(Array.prototype.slice.call(arguments))

);

};

})(method);

}

rudderanalytics.load(WRITE_KEY,DATA_PLANE_URL); // WRITE_KEY and DATA_PLANE_URL needs to be updated to match your RudderStack setup

rudderanalytics.page();

</script>

<script src="https://cdn.rudderlabs.com/v1.1/rudder-analytics.min.js"></script>

```


There are many more configuration options to make the integration work as you expect.

In order to associate errors with respective users, you will need to use identify call, here’s an example of the same

```

rudderanalytics.identify("identifiedUserId", {

name: "Alex Keener",

email: "alex@example.com",

});

```

This is equivalent to the event.setUser function of Bugsnag SDK.

Note that RudderStack also allows you to associate events with anonymous visitors as well. The anonymous visitors are automatically assigned an `anonymousId`, which is automatically set as a parameter for `identify` events when `identifiedUserId` is missing. You can also use the similar code for typescript using the `npm` package `rudder-sdk-js`.

Choosing to use RudderStack's Javascript SDK can greatly improve your customer engagement by enabling a more holistics view of a customer journey, boosting your website's performance and offering easy integration with a multitude of other products, marketing, and analytics tools. While @bugsnag/js lets you dispatch events solely to Bugsnag, rudder-sdk-js expands this functionality, allowing events to be sent to numerous other destinations and enabling more use cases.

Moreover, it reduces development time as it eliminates the need to navigate and stay updated with the API documentation of Bugsnag and other tools. These tools can be smoothly integrated with the help of RudderStack's SDKs.

However, if you would rather integrate directly using the Bugsnag client-side SDK, the necessary guidelines can be found at https://docs.bugsnag.com. Regardless of your chosen integration method, error monitoring can still be done via the Bugsnag dashboard.

Irrespective of how you integrate Bugsnag for website javascript source, you can still keep sending the error reports from your backend systems (via plugins in their respective languages e.g. node.js, koa, Restify, etc.) You can also use the Bugsnag dashboard for customizing error reports according to your preference.

Timing can vary based on your tech stack and the complexity of your data needs for JavaScript SDK and Bugsnag.

Pricing JavaScript SDK and Bugsnag can vary based on the way they charge. Check out our pricing page for more info. Or give us a try for FREE.

Yes, it is open source. You can check out the code on GitHub.


Timing can vary based on your tech stack and the complexity of your data needs for JavaScript SDK and Bugsnag.

Bugsnag is a robust error monitoring and stability tool that is designed to track a wide range of errors across many different languages and platforms. Here are some examples of the types of errors that can be tracked with Bugsnag:

1. Unhandled Exceptions: These are exceptions that are thrown during the execution of a program and aren't caught or handled by the application's code. Bugsnag automatically captures and reports these errors.

2. Handled Exceptions: These are exceptions that are caught and handled by your code. You can manually notify Bugsnag of these exceptions if you choose.

3. Runtime Errors: Bugsnag can track errors that occur during the execution of your application, such as type errors, reference errors, and syntax errors.

4. Network Errors: If your application encounters errors while making network requests, Bugsnag can capture and report these errors.

5. Resource Errors: These are errors related to loading resources, such as scripts, CSS, and images. Bugsnag's JavaScript notifier can track these errors.

6. Promise Rejections: Bugsnag can track unhandled Promise rejections, which are common JavaScript errors in web applications.

7. Crashes and Panics: In compiled languages like Go or Rust, Bugsnag can capture crashes and panics that occur in your application.

8. Native Crashes: In mobile apps, Bugsnag can capture native crashes that occur on iOS or Android platforms, such as out of memory errors or null pointer exceptions.

9. Error Anomalies: Bugsnag's stability score and error spike detection can help identify unusual increases in the error rate, which could indicate a larger problem.

Remember, Bugsnag captures a wealth of diagnostic data along with each error, including stack traces, device information, user data, and a timeline of events leading up to the error. This data can provide valuable context to help your team understand and resolve the issue.

Yes, RudderStack streamlines the integration and management of your connection between JavaScript SDK & Bugsnag, but you check out our guide on How to Event Stream Data from Your Eleventy Site to Google Analytics Using RudderStack to learn how to connect the tools manually.

Use the Bugsnag integration with other popular sources
About Bugsnag

Bugsnag is an app monitoring and stability tool that helps teams build better software. It can help you debug issues that impact user experience. Installing and managing Bugsnag directly, in addition to all of your other instrumentation, can create extra work (i.e., import bugsnag, nuxt-bugsnag, bugsnagvue, bugsnagclient, bugsnag.start, webpack modules, npm, node_env, setuser, bugsnag.notify, etc.).

With RudderStack, you simply need your_api_key from Bugsnag to start sending events with rich metadata directly from your app to Bugsnag, where you can see rich information (including things like appversion or even HTML from the DOM) in your Bugsnag dashboard.

About JavaScript SDK

RudderStack’s open-source JavaScript SDK lets you send event data from your website to a wide range of common, popular marketing, sales, and product tools such as Amplitude, Google Analytics, and more, without having to test or implement a new API every time.