As a person develops a new project and especially if it is going to be presented to customers, they definitely realize that something is missing or wrong. These realizations require you to either talk about your old experiences and come up with an idea or, if you are like me, to learn new things to meet these needs and implement them successfully.
Therefore, if you are NEW to software, you should definitely do a project. Because the projects you do increase your personal development more efficiently. In fact, you do this well on your own. Because I have experienced those parts and the development is up to a certain level. It is good to throw yourself into a team as soon as possible. Because you see different minds and you can learn a solution that needs to be and work accordingly.
Today, let's think that you are making a mobile application. You have prepared your application and moved on to the testing phase. You entered your application from your phone and it does not open (it stays on a white page). You check it immediately and get an error when you run it locally. Don't worry, it is a very possible situation :) It would be a good choice not to encounter this problem you are experiencing when meeting your users in the future, and even to put it correctly, to inform your users. "Please try again", "Please contact the app maker", "Report the bug"
import React, { Component } from "react";
export default class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { error: null, errorInfo: null };
}
componentDidCatch(error, errorInfo) {
console.log({
error: error,
errorInfo: errorInfo,
});
this.setState({
error: error,
errorInfo: errorInfo,
});
}
render() {
if (this.state.errorInfo) {
return <h1> BE CAREFULL, DUDE! </h1>;
}
return this.props.children;
}
}
As it is clear in the code above, we are using the componentDidCatch lifecycle method in React. In this way, we can catch all the errors that come to the screen from here and process them as we want. As far as I know, you can do the following here:
When there is an error, it can be in constant communication with the endpoint prepared for it.
If you are using a service like Sentry, you can trigger operations.
If we think it is a mobile application, you can give an Alert message.
Actually, it is easy to understand, but it is important to be aware of its existence.
Now, let's see how we will apply this code to the application. First, let's open the src/index.js file and write it to cover <App />.
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
import ErrorBoundary from "./ErrorBoundary";
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<ErrorBoundary>
<App />
</ErrorBoundary>
</StrictMode>,
rootElement
);
Now you can start writing an application that has a better user experience and allows you to easily find where the error is :)
