Name: Integrate React Error Boundary with Slack
Rating: 1.3 (3065 reviews)
Author: nilanth

We might use some third-party services to catch the production errors from React App. Mostly they are paid. Those services provide to integrate with Slack for real-time notification. Production errors need to fix as soon as possible.

To avoid the use of third-party services for slack integration. I have developed a small package to integrated our React App with Slack.

React Slack Notification

React Slack Notification is a lightweight package, Used to send messages to a Slack channel directly from your react app.

Let see how to integrate with our React App.

Use any one of the below commands to install the package.

Follow this Slack Docs link to create a WebHook for the channel to which the errors need to send.
Once you get the WebHook from the above step, Add it to your React App ErrorBoundary component as below.

You can also override the Channel, User Name and Bot icon, Which you defined when creating the WebHook using the below props.

webhook: Generate using incoming WebHook
message: Text to notify
#channel/@username: Override the channel in WebHook or Direct message to a user in your workspace
username: Message will be displayed using this name
botIconURL: Message bot icon

Once the above configuration is completed, Your React App is now ready to notify the error logs directly to slack channel without any third party services.

Error logs will be logged in the slack channel, As the below image.