Integrate React Error Boundary with Slack

Integrate React Error Boundary with Slack

ยท

2 min read

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 integrate 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's see how to integrate with our React App.

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

npm install command

or

yarn install command

  • 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.

React Slack Notification

  • You can also override the Channel, User Name, and Bot icon, Which you defined when creating the WebHook using the below props.
  1. webhook: Generate using incoming WebHook

  2. message: Text to notify

  3. #channel/@username: Override the channel in WebHook or Direct message to a user in your workspace

  4. username: Message will be displayed using this name

  5. botIconURL: Message bot icon

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

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

Sample Image

Conclusion

React Slack Notification solves third-party integration for slack integration.

Reference

Repo Link: https://github.com/Nilanth/react-slack-notification

Need to learn more? Feel free to connect on Twitter :)

Did you find this article valuable?

Support Nilanth by becoming a sponsor. Any amount is appreciated!

ย