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.
or
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 WebHookmessage
: Text to notify#channel/@username
: Override the channel in WebHook or Direct message to a user in your workspaceusername
: Message will be displayed using this namebotIconURL
: 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.
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 :)
You can support me by buying me a coffee ☕
eBook
ReactJS Optimization Techniques and Development Resources
More Blogs
- Use Vite for React Apps instead of CRA
- Twitter Followers Tracker using Next.js, NextAuth and TailwindCSS
- Don't Optimize Your React App, Use Preact Instead
- How to Reduce React App Loading Time By 70%
- Build a Portfolio Using Next.js, Tailwind, and Vercel with Dark Mode Support
- No More ../../../ Import in React
- 10 React Packages with 1K UI Components
- 5 Packages to Optimize and Speed Up Your React App During Development
- How To Use Axios in an Optimized and Scalable Way With React
- 15 Custom Hooks to Make your React Component Lightweight
- 10 Ways to Host Your React App For Free
- How to Secure JWT in a Single-Page Application
Top comments (0)