React Example

The React Client from Exceptionless includes all of the functionality from the brwoser client, but with some extra React-specific helpers.

The one thing you'll specifically notice in the React client is the addition of an ExceptionlessErrorBoundary class component. This is a wrapper component that can be used to ensure all errors in the presentational layer of your app are reported.

It works exactly as Error Boundaries in React work, but it's pre-wired to report to Exceptionless. Here's a very simple example:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
Exceptionless,
ExceptionlessErrorBoundary
} from "@exceptionless/react";
import ErrorBoundary from './ErrorBoundary';

const startExceptionless = async () => {
await Exceptionless.startup((c) => {
c.apiKey = "YOUR API KEY";
c.useDebugLogger();

c.defaultTags.push("Example", "React");
});
};

startExceptionless();

ReactDOM.render(
<React.StrictMode>
<ErrorBoundary>
<ExceptionlessErrorBoundary>
<App />
</ExceptionlessErrorBoundary>
</ErrorBoundary>
</React.StrictMode>,
document.getElementById('root')
);

reportWebVitals();

As you can see, we wrap the root App component first in the ExceptionlessErrorBoundary and then if you want to present your own fallback UI, you can create a custom ErrorBoundary component that will make sure that UI is served.

We have a detailed blog post about this here.

The full example / sample can be found here.


Next > Node.js Example