react-kalayo-logger

A react and react-native error logger reporting utility using kalayo service.

Usage no npm install needed!

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

README

Kalayo React/React Native Error Logger

This function connects to the easy-to-use Kalayo service for use with your React applications. Try it out for free today!

NPM JavaScript Style Guide

Documentation

Usage

Initialization

You'll need to initialize the url where you want the logs to be sent. This should be executed before making any logs. An ideal place to put this at the entry point of your React app. This is usually at the index.js found at the root of your project's src directory. You only need to do this once.

The Kalayo() function accepts a headers object as an optional second parameter. If you're using Kalayo's dashboard, make sure to pass an Authorization property with your API token as its value.

import Kalayo from 'kalayo';

new Kalayo('https://localhost:3000', {
  'Authorization': `Bearer ${token}`
});

React Component

This is useful when you want to display an error view when an error happens in render. This also sends a log.

import React, { Component } from "react";

import { ErrorBoundary } from "react-kalayo-logger";

class Example extends Component {
  render() {
    return (
      <ErrorBoundary>
        <div>Bounded App</div>
      </ErrorBoundary>
    );
  }
}
prop description default
errorDisplay React component to display when error occurs. null
logOptions Additional/optional data you can provide for log data. { logType: "default" }
logType Log type useful for dashboard filtering. Options are default, warning and error. default

React HOC

Same as the ErrorBoundary component this is useful for rendering errors.

import React, { Component } from "react";

import { withKalayo } from "react-kalayo-logger";

class Example extends Component {
  render() {
    return <div>Bounded App</div>;
  }
}

export default withKalayo(Example);
prop description default
errorDisplay React component to display when error occurs. null
logOptions Additional/optional data you can provide for log data. { logType: "default" }
logType Log type useful for dashboard filtering. Options are default, warning and error. default

Custom Logging

import { log, d, w, e } from "react-kalayo-logger"

/**
 * Function that call the kalayo logger service api endpoint
 *
 * @param {String} message Developer defined string or error info from componentDidCatch lifecycle
 * @param {Error} stackTrace Error instance from catch {} or from componentDidCatch lifecycle
 * @param {Object} logOptions An optional object containing additional details to be passed on logger
 *
 * @returns {Promise}
 */

 const response = await log("Error occured", Error("Error"), { device: "iPhone", os: "iOS", osVersion: "11.0.0" })

Aside from log function, the library contains other convenience functions:

  • d(message, stackTrace, logOptions) - provides a default log with logType as default
  • w(message, stackTrace, logOptions) - provides a warning log with logType as warning
  • e(message, stackTrace, logOptions) - provides an error log with logType as error

All of these have the same parameters. Log types are useful for dashboard filtering.

Parameter Description Required Type Default
message Text to display for the log. no string null
stackTrace Stack trace details no object or string ""
logOptions Other info you want to pass to the server. no object default

Examples of logOptions values

Property Type Values Default
logLevel string 'default','warning','error' undefined
os string 'Web', 'Android', 'iOS' undefined
osVersion string '12.0', '9.1.1' undefined
deviceType string 'iPhone', 'Google Pixel' undefined
deviceVersion string 'X', '3' undefined

License

MIT © amagitechnologies