Warnings and errors with React component stack trace
This is gonna be a quick one, I just learned about it and thought it was a shame I didn’t know it existed before 😅
⚛️ Library authors have often requested a way to log warnings that include the React "component stack". PR 15170 adds two new top-level APIs to for this: react.warn() and react.error()
— brian vaughn (@brian_d_vaughn) March 21, 2019
👇 Attached screenshots show example usage (and console output).https://t.co/0IQV3qcEus pic.twitter.com/VB9khdApcN
If you want to show error messages or warning with a React components stack trace, instead of the usual JS execution stack trace, simply use the provided methods from the react library.
import { warn, Component } from "react";
class Example extends Component {
render() {
warn("Some warning!");
return <p>Warning logged!</p>;
}
}
That’s it! Nothing especially mind blowing and probably a lot of people already know, but I didn’t and it definitely comes in handy when trying to improve DX of your tools and libraries around React.