React

Integration

BugSplat’s npm package supports the collection of errors in React applications. Source map files can be uploaded to BugSplat via @bugsplat/symbol-upload. Additionally, BugSplat’s backend leverages @bugsplat/stack-converter to convert stack traces in JavaScript back to their original JSX or TSX file names and line number. BugSplat provides you with invaluable insight into the issues tripping up your users so that you can fix bugs and deliver a better user experience.
To configure your app with BugSplat add the bugsplat package via npm.
1
npm i bugsplat
Copied!
Import BugSplat at the entry point of your application.
1
import { BugSplat } from 'bugsplat';
Copied!
Add a database property to your package.json.
1
{
2
"name": "my-react-crasher",
3
"version": "1.0.0",
4
"database": "{{ your database here}}",
5
...
6
}
Copied!
In index.js, create a new instance of BugSplat and pass the constructor values for database, application, and version from your package.json.
1
const packageJson = require('../package.json');
2
const bugsplat = new BugSplat(packageJson.database, packageJson.name, packageJson.version);
Copied!
Add event handlers to window.onunhandledrejection and window.onerror so that errors are posted to BugSplat.
1
window.onunhandledrejection = async (rejection) => {
2
await bugsplat.post(rejection.reason);
3
}
4
5
window.onerror = async (event, source, lineno, colno, error) => {
6
await bugsplat.post(error);
7
}
Copied!
You can inject BugSplat into your child components or create a new instance and also use BugSplat to capture errors in catch blocks.
1
<button onClick={catchError}>
2
Try Catch!
3
</button>
Copied!
1
async function catchError(e) {
2
e.preventDefault();
3
try {
4
throw new Error('BugSplat rocks!');
5
} catch (error) {
6
await bugsplat.post(error);
7
}
8
}
Copied!
After posting an error, navigate to the Crashes page in BugSplat and you should see a new error report for the application you just configured. Click the link in the ID column to see details about your crash on the Crash page.
Crashes page filtered by application my-react-crasher
my-react-crasher example crash
That’s it! Your application is now configured to post crash reports to BugSplat.

API

In addition to the configuration demonstrated above, there are a few public methods that can be used to customize your BugSplat integration.
1
bugsplat.setDefaultAppKey(appKey); // Additional metadata that can be queried via BugSplat's web application
2
bugsplat.setDefaultUser(user); // The name or id of your user
3
bugsplat.setDefaultEmail(email); // The email of your user
4
bugsplat.setDefaultDescription(description); // Additional info about your crash that gets reset after every post
5
async bugsplat.post(error, options); // Posts an arbitrary Error object to BugSplat
6
// If the values options.appKey, options.user, options.email, options.description are set the corresponding default values will be overwritten
7
// Returns a promise that resolves with properties: error (if there was an error posting to BugSplat), response (the response from the BugSplat crash post API), and original (the error passed by bugsplat.post)
Copied!

Contributing

BugSplat ❤️s open source! If you feel that this integration can be improved, please open an Issue. If you have an awesome new feature you'd like to implement, we'd love to merge your Pull Request. You can also reach out to us via an email to [email protected] or the in-app chat on bugsplat.com.
Last modified 4mo ago