# JavaScript

## 🧩 SPA Integrations

{% hint style="info" %}
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](/introduction/development/working-with-symbol-files/source-maps.md).
{% endhint %}

BugSplat supports JavaScript and TypeScript error reporting in a variety of environments. We offer platform-specific integrations for [Angular](https://angular.dev/), [React](https://react.dev/), and [Node.js](https://nodejs.org/en) for your convenience.

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

{% content-ref url="/pages/-MeQxcg-zqaGITt11RPi" %}
[Angular](/introduction/getting-started/integrations/web/angular.md)
{% endcontent-ref %}

{% content-ref url="/pages/-Mg293QjQow3zAIW7VHg" %}
[React](/introduction/getting-started/integrations/web/react.md)
{% endcontent-ref %}

{% content-ref url="/pages/-Mg296jB18ShFc9aUbC9" %}
[Vue](/introduction/getting-started/integrations/web/vue.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MeRTrBwNQFMT8JiWLql" %}
[Electron](/introduction/getting-started/integrations/cross-platform/electron.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MeRXRpKp3KQxkGy3IUU" %}
[Node.js](/introduction/getting-started/integrations/cross-platform/node.js.md)
{% endcontent-ref %}

If a platform or framework your team is leveraging is not listed above, never fear! You can leverage our bugsplat [npm package](https://www.npmjs.com/package/bugsplat) to add error reporting to any browser-based app or [bugsplat-node](https://www.npmjs.com/package/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](https://github.com/BugSplat-Git/bugsplat-js) from [esm.sh](https://esm.sh/)

```html
<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

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

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

```javascript
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

```javascript
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.

```javascript
await bugsplat.postFeedback('Login button broken', {
    description: 'Nothing happens when I tap it',
    email: 'jane@example.com',
});
```

You can also attach files such as screenshots:

```javascript
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](https://github.com/BugSplat-Git/my-javascript-crasher) repository

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

Install the dependencies

```sh
cd my-javascript-crasher
npm i
```

Start the server

```shell
npm start
```

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

### 📈 Viewing Reports

Navigate to the BugSplat [Crashes](https://app.bugsplat.com/v2/crashes?database=Fred\&c0=appName\&f0=CONTAINS\&v0=my-javascript-crasher) page to view your report

<figure><img src="/files/HkbXlkXOclst8pfntUYV" alt=""><figcaption><p>BugSplat Crashes Page</p></figcaption></figure>

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

<figure><img src="/files/0wLO8y8sUAskoViCLv5r" alt=""><figcaption><p>BugSplat Crash Page</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bugsplat.com/introduction/getting-started/integrations/web/javascript.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.