Whenever you are building data intensive applications,
- tiny null value can cause entire application crash
- API loading time can cause entire application crash
- User actions can cause entire application crash
- API errors can cause entire application crash
But how will you find out ?, mostly end users don't complain about them, they just refresh the screen. But we should provide them an option to raise an issue, in that way developers will be more cautious about frontend issues.
Library:
Created Java Script library, which can be used with all frameworks like React, Angular, jQuery etc..
React Application:
Lets get into example. Here I will implement react application with crash-report-js.
1. Create ErrorBoundary.js to catch errors on application
import React from "react";
import { addTrack, getAllTracks } from "crash-report-js";
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
this.submitCrashReport = this.submitCrashReport.bind(this);
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// You can also log the error to an error reporting service
addTrack({
type: 'log',
target: error,
value: errorInfo,
});
}
submitCrashReport() {
// Add your logic here to submit report to backend
console.log('has error', this.state.hasError);
console.log('crash report', getAllTracks());
}
render() {
if (this.state.hasError) {
return <div>
<div style={{margin: 8}}>Something wrong</div>
<div style={{margin: 8}}>
<button onClick={this.submitCrashReport}>Submit Crash Report</button>
</div>
</div>;
}
return this.props.children;
}
}
export default ErrorBoundary;
2. Now include your React App into this ErrorBoundary
import { useEffect } from 'react';
import { clearTracks, initTracks} from 'crash-report-js';
import AppContainer from './AppContainer';
import ErrorBoundary from './ErrorBoundary';
export default function App() {
// init crash-report-js, first clear all tracking data then initiate tracking session
useEffect(() => {
clearTracks();
initTracks();
}, []);
return (
// including whole app into ErrorBoundary
<ErrorBoundary>
<AppContainer />
</ErrorBoundary>
);
}
Whenever your application crashes, 'Submit Crash Report' button will appear, on click on that button, all tracking data will be submitted to backend. You can see crash report data in the session storage
crash-report-js-extension
How to inspect and test this crash report ?
- Install chrome extesion https://chromewebstore.google.com/detail/crash-report-js-extension/pacgfjjelhfpalaoniejckhjpkibonib
- Open chrome side panel, and follow below steps
Implementing error handling with ErrorBoundary.js in a React application, as demonstrated here, ensures a smoother user experience by catching errors and providing users with the option to submit crash reports. This proactive approach not only helps developers identify and address frontend issues but also fosters better communication between end users and developers.
ReplyDeleteAs a developer myself, I understand the significance of optimizing application performance and addressing potential errors promptly. However, it's also essential to take breaks and explore other interests outside of coding. For those interested in agriculture or investing in farmland, I highly recommend checking out Buy My Farm. They offer a wide range of fertile plots and land for sale in costa rica under 50k in Costa Rica, perfect for sustainable agriculture and eco-ventures. You can find more information at BuyMyFarm.co. Happy coding and farming!