JavaScript

🧩 SPA Integrations

BugSplat supports unwinding uglified and minified JavaScript stack traces via source maps. More information about configuring your application to upload source maps to BugSplat is available here.

BugSplat supports JavaScript and TypeScript error reporting in a variety of environments. We offer platform-specific integrations for Angular, React, and Node.js for your convenience.

Follow the links below for instructions on how to configure BugSplat in your application:

AngularReactVueElectronNode.js

If a platform or framework your team is leveraging is not listed above, never fear! You can leverage our bugsplat npm package to add error reporting to any browser-based app or bugsplat-node to add error reporting to any Node.js based app.

🌐 Browsers

Using the browser directly is awesome! BugSplat fully supports applications that don't use SPA frameworks. Follow the directions below to integrate with bugsplat in a browser-based JavaScript application.

⚙️ Integrating

Import bugsplat from esm.sh

<script type="module">
    import { BugSplat } from 'https://esm.sh/bugsplat@8.0.1';
</script>

Create a new instance of BugSplat with your database, application, and version

const bugsplat = new BugSplat('fred', 'my-javascript-crasher', '1.0.0');

Configure bugsplat to listen to window.onerror and window.onunhandledrejection events

window.onerror = function (message, source, lineno, colno, error) {
    bugsplat.post(error);
};

window.addEventListener('unhandledrejection', function (event) {
    bugsplat.post(event.reason);
});

Trigger an error to see it reported in BugSplat

throw new Error('todo bg');

💬 User Feedback

In addition to crash reporting, BugSplat supports collecting non-crashing user feedback such as bug reports and feature requests. Feedback reports appear in BugSplat with the "User Feedback" type, grouped by title.

await bugsplat.postFeedback('Login button broken', {
    description: 'Nothing happens when I tap it',
    email: '[e-mail]',
});

You can also attach files such as screenshots:

const screenshot = document.querySelector('input[type="file"]').files[0];

await bugsplat.postFeedback('UI rendering issue', {
    description: 'The sidebar overlaps the main content.',
    attachments: [
        { filename: 'screenshot.png', data: screenshot },
    ],
});

🧪 Sample

Clone the my-javascript-crasher repository

git clone https://github.com/BugSplat-Git/my-javascript-crasher

Install the dependencies

cd my-javascript-crasher
npm i

Start the server

npm start

Open your browser and navigate to http://localhost:8080, then click the button to trigger an error.

📈 Viewing Reports

Navigate to the BugSplat Crashes page to view your report

BugSplat Crashes Page

Click on the ID of the most recent error to view the details of your report

BugSplat Crash Page