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!

Documentation

• Usage and Features
• Props
• Development/Installation Guide
• License

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