neat-react-logger

Polymorph logger with react bindings and Sentry

Usage no npm install needed!

<script type="module">
  import neatReactLogger from 'https://cdn.skypack.dev/neat-react-logger';
</script>

README

Neat-React-Logger

Implementation of logger interface used to log errors to different targets. Environment: mobile, frontend.

Installation

yarn add @neat-tech/react-logger

Usage

Wrap your components with LoggerProvider and get instance of Logger with useLogger hook

import { useLogger, Logger, LoggerProvider } from '@neat-tech/react-logger'

export const App = () => {
  return <LoggerProvider>{/* <YourYourChildren /> */}</LoggerProvider>
}

const YourChildren = () => {
  const logger: Logger = useLogger()
  logger.log('Hello from YourYourChildren')
  return <></>
}

You can provide your own custom implementation of logger

import { Logger } from '@neat-tech/react-logger'
import VendorLogger from 'vendor-package'

export class SuperPooperLogger implements Logger {
  log = (...args: unknown[]) => {
    VendorLogger.log(...args)
  }

  // ...rest implementation
}

and then use it in LoggerProvider

import { LoggerProvider, ConsoleLogger } from '@neat-tech/react-logger'

export const App = () => {
  return (
    <LoggerProvider logger={[new SuperPooperLogger(), new ConsoleLogger()]}>
      {/* <YourChildrens /> */}
    </LoggerProvider>
  )
}

Sentry

This library provides SentryLoggerMobile and SentryLoggerWeb for initializing of Sentry.

If you are running a project with react-native call:

yarn sentry-wizard -i reactNative -p ios android

cd ios
pod install