Integrate React Error Boundary with Slack
Tags: react, javascript, webdev, beginners
Published: 2022-12-31 07:26:54

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](https://github.com/Nilanth/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.

![npm install command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz1s6mxprrv7hr8z59cf.png)

or

![yarn install command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxhxqkcnerwsa5z19sw8.png)

* Follow this [Slack Docs link](https://slack.com/apps/A0F7XDUAZ-incoming-webhooks) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gh8lqvvob7b103mfympk.png)
 
* 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 slack channel without any third party services.


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

![Sample Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c11a4tod4mmdfz664ank.png)

## 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](https://twitter.com/Nilanth) :)

**You can support me [by buying me a coffee](https://buymeacoffee.com/nilanth) ☕**

## eBook

[ReactJS Optimization Techniques and Development Resources](https://nilanth.gumroad.com/l/NYkdN)

## More Blogs
1. [Use Vite for React Apps instead of CRA]
(https://dev.to/nilanth/use-vite-for-react-apps-instead-of-cra-3pkg)
2. [Twitter Followers Tracker using Next.js, NextAuth and TailwindCSS](https://dev.to/nilanth/twitter-followers-tracker-using-nextjs-nextauth-and-tailwindcss-1em7)
3. [Don't Optimize Your React App, Use Preact Instead
](https://dev.to/nilanth/dont-optimize-your-react-app-use-preact-instead-30og)
4. [How to Reduce React App Loading Time By 70%](https://dev.to/nilanth/how-to-reduce-react-app-loading-time-by-70-1kmm)
5. [Build a Portfolio Using Next.js, Tailwind, and Vercel with Dark Mode Support](https://dev.to/nilanth/build-a-portfolio-using-next-js-tailwind-and-vercel-4dd8)
6. [No More ../../../ Import in React](https://dev.to/nilanth/no-more-import-in-react-2mbo)
7. [10 React Packages with 1K UI Components
](https://dev.to/nilanth/10-react-packages-with-1k-ui-components-2bf3)
8. [5 Packages to Optimize and Speed Up Your React App During Development](https://dev.to/nilanth/5-packages-to-optimize-and-speed-up-your-react-app-during-development-4h5f)
9. [How To Use Axios in an Optimized and Scalable Way With React](https://dev.to/nilanth/how-to-use-axios-in-an-optimized-and-scalable-way-with-react-518n)
10. [15 Custom Hooks to Make your React Component Lightweight](https://dev.to/nilanth/15-custom-hooks-to-make-your-react-component-lightweight-17cd)
11. [10 Ways to Host Your React App For Free](https://dev.to/nilanth/10-ways-to-host-your-react-app-for-free-27ga)
12. [How to Secure JWT in a Single-Page Application](https://dev.to/nilanth/how-to-secure-jwt-in-a-single-page-application-cko)