Small React package to create a facade that communicates with WebLogger service. Provides useLogger hook that allow user to send diagnostic data and map them to GELF format.
npm --save @nivalit/web-logger-reactAdd Provider to your app root component:
function App() {
return (
<LoggerProvider
type="EXTERNAL"
options={{ host: "https://logger.acme.com:9000", logLevel: "WARNING" }}
>
<h1>Web Logger</h1>
</LoggerProvider>
);
}Use in any your component by context hook:
function Children() {
logger = useLogger()
const createPost = (id: string) => {
try {
logger.debug(`Post - Create new with id=${id}`)
...
} catch(e) {
logger.error(`Post - Failed to create post with id=${id}`, e.stack)
}
}
}You can open the Index.tsx file to see how it can be implemented
Use src directory to test how LoggerContext works. Finally the lib directory is compiled and packed to es and umd formats.
LoggerProvider
| Property | Value Type | Description |
|---|---|---|
| type |
CONSOLE | EXTERNAL
|
Define which logger service use (default value: "CONSOLE") |
| disable | boolean |
If true disable all logs in within provider |
| options | LoggerOptions |
Configuration of GELF host and log level threshold |
| children |
ReactNode (required) |
Provider child component |
useLogger
| Method | Arguments |
|---|---|
| debug | message: string |
| info | message: string |
| notice | message: string |
| warn | message: string |
| error | message: string, stackTrace?: string |
| critical | message: string |
| alert | message: string |