1.0.5 • Published 4 years ago

react-kalayo-logger v1.0.5

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

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>
    );
  }
}
propdescriptiondefault
errorDisplayReact component to display when error occurs.null
logOptionsAdditional/optional data you can provide for log data.{ logType: "default" }
logTypeLog 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);
propdescriptiondefault
errorDisplayReact component to display when error occurs.null
logOptionsAdditional/optional data you can provide for log data.{ logType: "default" }
logTypeLog 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.

ParameterDescriptionRequiredTypeDefault
messageText to display for the log.nostringnull
stackTraceStack trace detailsnoobject or string""
logOptionsOther info you want to pass to the server.noobjectdefault

Examples of logOptions values

PropertyTypeValuesDefault
logLevelstring'default','warning','error'undefined
osstring'Web', 'Android', 'iOS'undefined
osVersionstring'12.0', '9.1.1'undefined
deviceTypestring'iPhone', 'Google Pixel'undefined
deviceVersionstring'X', '3'undefined

License

MIT © amagitechnologies