noibu-react-native 0.0.1

package/dist/pageVisit/pageVisit.js

@@ -0,0 +1,172 @@
+import uuid from 'react-native-uuid';
+import { TYPE_ATT_NAME, OCCURRED_AT_ATT_NAME, MAX_PAGEVISIT_EVENTS, MAX_PAGEVISIT_PARTS, PV_METROPLEX_TYPE, PV_EVENTS_ATT_NAME, PV_PART_COUNTER_ATT_NAME, PAGE_VISIT_PART_ATT_NAME } from '../constants.js';
+import ClientConfig from '../api/clientConfig.js';
+import MetroplexSocket from '../api/metroplexSocket.js';
+import StoredMetrics from '../api/storedMetrics.js';
+
+/** @module Pagevisit */
+
+/**
+ * Singleton class to hold all the information
+ * about the gathered errors throught the session
+ */
+class PageVisit {
+  /**
+   * Creates an instance of a PageVisit
+   */
+  constructor() {
+    this.partCounter = 0;
+    // TODO: Remove pvMap and related variables since we only send a single event at a time
+    this.pvMap = {};
+    this.partCounter = 0;
+    this.pvEventLength = 0;
+    // variables used for monitoring our posting frequency
+    this.visibilityChangedCounter = 0;
+    this.totalPvEventLength = 0;
+    this.inDebounceHandle = 0;
+    this.isInAcceleratedPvPostMode = false;
+  }
+
+  /**
+   * creates a PV object
+   */
+  static configureInstance() {
+    if (!this.instance) {
+      this.instance = new PageVisit();
+    }
+  }
+
+  /** gets the singleton instance */
+  static getInstance() {
+    if (!this.instance) {
+      throw new Error('Pagevisit was never configured');
+    }
+    return this.instance;
+  }
+
+  /** adds page visit events into the current page visit map and then sends a page visit message
+   * @param  {} eventObjects
+   * @param  {} type
+   */
+  addPageVisitEvents(eventObjects, type) {
+    eventObjects.forEach(eventObj => {
+      this._addPageVisitEvent(eventObj, type);
+    });
+    this._sendPageVisitMessage();
+  }
+
+  /**
+   * adds the page visit event into the current page visit map and then sends a page visit message
+   * returns the the key to access this event in the map
+   * @param  {} eventObj
+   * @param  {} type
+   */
+  addPageVisitEvent(eventObj, type) {
+    const id = this._addPageVisitEvent(eventObj, type);
+    this._sendPageVisitMessage();
+    return id;
+  }
+
+  /**
+   * adds a new page visit event into the current page visit map and returns the
+   * the key to access this event in the map
+   * @param  {} eventObj
+   * @param  {} type
+   */
+  _addPageVisitEvent(eventObj, type) {
+    if (!('occurredAt' in eventObj && 'event' in eventObj)) {
+      throw new Error('missing attributes in the eventObj');
+    }
+
+    // creating the pvEvent from the passed pv
+    const pvEvent = {
+      [TYPE_ATT_NAME]: type,
+      [OCCURRED_AT_ATT_NAME]: eventObj.occurredAt,
+      [type]: eventObj.event,
+    };
+
+    // if we are over the limit set by the Beacon API limit, we need to
+    // send what we currently have in the buffer to metroplex
+    if (this.pvEventLength >= MAX_PAGEVISIT_EVENTS) {
+      this._sendPageVisitMessage();
+    }
+
+    const pvEventId = uuid.v4();
+    // updating sizes
+    this.pvMap[pvEventId] = pvEvent;
+    this.pvEventLength += 1;
+    this.totalPvEventLength += 1;
+
+    return pvEventId;
+  }
+
+  /**
+   * Creates a page visit frag from an events array and part counter. Appends
+   * the end time field and returns the frag
+   * @param  {} pvEvents
+   * @param  {} partCounter
+   */
+  static makePageVisitFrag(pvEvents, partCounter) {
+    const pagevistFrag = {};
+    pagevistFrag[PV_EVENTS_ATT_NAME] = pvEvents;
+    pagevistFrag[PV_PART_COUNTER_ATT_NAME] = partCounter;
+    MetroplexSocket.getInstance().addEndTimeToPayload(pagevistFrag, true);
+    return pagevistFrag;
+  }
+
+  /**
+   * _sendPageVisitMessage will reset the buffer and post the current
+   * content to metroplex
+   */
+  _sendPageVisitMessage() {
+    // not using Object.values since we want to support as many browsers
+    // as possible
+    const pvEvents = Object.keys(this.pvMap).map(id => this.pvMap[id]);
+
+    if (pvEvents.length === 0) {
+      // don't send to metroplex if the event buffer is empty.
+      // A previous call to this function from visibilityChange
+      // would have sent it as a final post. Another reason it would be empty is
+      // if the user has not done anything on the page and switched tabs,
+      // or closed the browser etc
+      return;
+    }
+
+    if (this.partCounter >= MAX_PAGEVISIT_PARTS) {
+      // if we are attempting to send over the MAX_PAGEVISIT_PARTS
+      // number of parts then we block any subsequent part post to not
+      // inondate our back end. We lock the client for 10 minute, something
+      // must be going bad.
+      ClientConfig.getInstance().lockClientUntilNextPage(
+        `NoibuJS will stop processing parts because we ` +
+          `reached max parts: ${MAX_PAGEVISIT_PARTS}. Variables: ` +
+          `
+      total Pv Event Length: ${this.totalPvEventLength}
+      visibility Changed Counter: ${this.visibilityChangedCounter}
+      `,
+      );
+      return;
+    }
+
+    const pagevistFrag = PageVisit.makePageVisitFrag(
+      pvEvents,
+      this.partCounter,
+    );
+
+    StoredMetrics.getInstance().setPvPart(this.partCounter);
+
+    const metroplexMsg = {
+      [PAGE_VISIT_PART_ATT_NAME]: pagevistFrag,
+    };
+
+    MetroplexSocket.getInstance().sendMessage(PV_METROPLEX_TYPE, metroplexMsg);
+
+    // since we sent the content of the buffer to metroplex, we reset
+    // all variables that contained information about the past buffer.
+    this.pvMap = {};
+    this.pvEventLength = 0;
+    this.partCounter += 1;
+  }
+}
+
+export { PageVisit };

package/dist/pageVisit/pageVisitEventError/pageVisitEventError.js

@@ -0,0 +1,313 @@
+import { isValidURL, getOnURL, getJSStack, stringifyJSON, getMaxSubstringAllowed } from '../../utils/function.js';
+import { EVENT_ERROR_TYPE, URL_ATT_NAME, ERROR_EVENT_TYPE, ERROR_EVENT_ERROR_TYPE, CUSTOM_ERROR_EVENT_TYPE, ERROR_EVENT_UNHANDLED_REJECTION_TYPE, ERROR_LOG_EVENT_ERROR_TYPE, FETCH_EXCEPTION_ERROR_TYPE, WRAPPED_EXCEPTION_ERROR_TYPE, GQL_ERROR_TYPE, RESPONSE_ERROR_TYPE, XML_HTTP_REQUEST_ERROR_TYPE, ERROR_SOURCE_ATT_NAME, TYPE_ATT_NAME, JS_EVENT_TYPE, JS_ERROR_ATT_NAME, JS_STACK_FRAMES_ATT_NAME, JS_STACK_FILE_ATT_NAME, JS_STACK_METHOD_ATT_NAME, SEVERITY_ERROR, JS_STACK_MESSAGE_ATT_NAME, HTTP_EVENT_TYPE, NOIBU_INPUT_URLS, HTTP_CODE_ATT_NAME, PV_SEQ_ATT_NAME, GQL_EVENT_TYPE, GQL_ERROR_ATT_NAME } from '../../constants.js';
+import ClientConfig from '../../api/clientConfig.js';
+import { InputMonitor } from '../../monitors/inputMonitor.js';
+import StoredMetrics from '../../api/storedMetrics.js';
+
+/** @module PageVisitEventError */
+
+/**
+ * getPVErrorFromResponse will create the error information from an
+ * http response error type.
+ * @param  {} errPayload
+ * @param  {} httpDataSeqNum
+ */
+function getPVErrorFromResponse(errPayload, httpDataSeqNum) {
+  const errorObject = {
+    [URL_ATT_NAME]: getOnURL(errPayload.url),
+    [TYPE_ATT_NAME]: HTTP_EVENT_TYPE,
+    [HTTP_CODE_ATT_NAME]: errPayload.status,
+  };
+  if (httpDataSeqNum || httpDataSeqNum === 0) {
+    errorObject[PV_SEQ_ATT_NAME] = httpDataSeqNum;
+  }
+  return errorObject;
+}
+
+/**
+ * getPVErrorFromGqlError will create the error information from an
+ * GraphQL error payload.
+ * @param  {} errPayload
+ * @param  {} httpDataSeqNum
+ */
+function getPVErrorFromGqlError(payload, httpDataSeqNum) {
+  const result = {
+    [URL_ATT_NAME]: getOnURL(payload.url),
+    [TYPE_ATT_NAME]: GQL_EVENT_TYPE,
+    [GQL_ERROR_ATT_NAME]: payload,
+  };
+
+  if (httpDataSeqNum || httpDataSeqNum === 0) {
+    result[PV_SEQ_ATT_NAME] = httpDataSeqNum;
+  }
+
+  return result;
+}
+
+/**
+ * getPVErrorFromXMLHttpRequest will create the error information from
+ * an HttpRequest error type
+ * @param  {} errPayload
+ * @param  {} httpDataSeqNum
+ */
+function getPVErrorFromXMLHttpRequest(errPayload, httpDataSeqNum) {
+  const errorObject = {
+    [URL_ATT_NAME]: getOnURL(errPayload.responseURL),
+    [TYPE_ATT_NAME]: HTTP_EVENT_TYPE,
+    [HTTP_CODE_ATT_NAME]: errPayload.status,
+  };
+  if (httpDataSeqNum || httpDataSeqNum === 0) {
+    errorObject[PV_SEQ_ATT_NAME] = httpDataSeqNum;
+  }
+  return errorObject;
+}
+/**
+ * getPVErrorFromErrorEvent will create the error information from an
+ * error event type
+ * @param  {} errPayload
+ */
+function getPVErrorFromErrorEvent(errPayload) {
+  return {
+    [URL_ATT_NAME]: getOnURL(errPayload.filename || 'http://localhost'),
+    [TYPE_ATT_NAME]: JS_EVENT_TYPE,
+    [JS_ERROR_ATT_NAME]: getJSStack(errPayload.error),
+  };
+}
+
+/** getPVErrorFromErrorLog extracts an error from an error log
+ * @param  {} errPayload
+ */
+function getPVErrorFromErrorLog(errPayload) {
+  return {
+    // default to window url
+    [URL_ATT_NAME]: getOnURL(
+      (window.location && window.location.href) || 'http://localhost',
+    ),
+    [TYPE_ATT_NAME]: JS_EVENT_TYPE,
+    [JS_ERROR_ATT_NAME]: getJSStack(errPayload),
+  };
+}
+
+/**
+ * Sets an error message to pvError by a given error event.
+ * @param {string} type
+ * @param {} pvError
+ * @param {} originalError
+ */
+function setErrorMessageForUnhandledEvent(type, pvError, originalError) {
+  let detail = null;
+  if (originalError.detail) {
+    try {
+      detail = stringifyJSON(originalError.detail);
+    } catch (e) {
+      detail = 'non-serializable';
+    }
+  }
+  let message = `Fire error event of type ${type}.`;
+  if (detail != null) {
+    message += ` Detail: ${detail}.`;
+  }
+  pvError.j_err.msg = getMaxSubstringAllowed(message); // eslint-disable-line no-param-reassign
+}
+
+/**
+ * createPageVisitEventError returns creates an error information
+ * object based on the type of error
+ * @param  {} type
+ * @param  {} errPayload
+ * @param  {} httpDataSeqNum
+ */
+function createPageVisitEventError(type, errPayload, httpDataSeqNum) {
+  // We have seen that errors from requireJS contain the originalError
+  // attribute which is the real error. If we do not extract the originalError we are
+  // not looking at the full error available.
+  // https://github.com/requirejs/requirejs/blob/master/require.js#L172
+  let originalError = errPayload;
+  if (errPayload.error && errPayload.error.originalError) {
+    originalError = errPayload.error.originalError;
+  }
+
+  let pvError = {};
+  switch (type) {
+    case XML_HTTP_REQUEST_ERROR_TYPE: {
+      pvError = getPVErrorFromXMLHttpRequest(originalError, httpDataSeqNum);
+      break;
+    }
+    case ERROR_EVENT_ERROR_TYPE: {
+      pvError = getPVErrorFromErrorEvent(originalError);
+      break;
+    }
+    case RESPONSE_ERROR_TYPE: {
+      pvError = getPVErrorFromResponse(originalError, httpDataSeqNum);
+      break;
+    }
+    case GQL_ERROR_TYPE: {
+      // The error is retrieved from the response of the server
+      // eslint-disable-next-line no-param-reassign
+      type = RESPONSE_ERROR_TYPE;
+      pvError = getPVErrorFromGqlError(originalError, httpDataSeqNum);
+      break;
+    }
+    case WRAPPED_EXCEPTION_ERROR_TYPE: {
+      pvError = getPVErrorFromErrorEvent(originalError);
+      break;
+    }
+    // the fetch handler makes sure that we create the appropriate
+    // error type before sending it for processing thus we do not
+    // need a specific error handler for fetch errors.
+    case FETCH_EXCEPTION_ERROR_TYPE: {
+      pvError = getPVErrorFromErrorEvent(originalError);
+      break;
+    }
+    case ERROR_LOG_EVENT_ERROR_TYPE: {
+      pvError = getPVErrorFromErrorLog(originalError);
+      break;
+    }
+    case ERROR_EVENT_UNHANDLED_REJECTION_TYPE: {
+      pvError = getPVErrorFromErrorEvent(originalError);
+      break;
+    }
+    case CUSTOM_ERROR_EVENT_TYPE: {
+      pvError = getPVErrorFromErrorEvent(originalError);
+      break;
+    }
+    default: {
+      // TODO: report to us that we sent an invalid type
+      // users have their own type that they will be passing, does not warrant
+      // a failure. We try to process it as an error.
+      try {
+        pvError = getPVErrorFromErrorEvent(originalError);
+        if (window.Event && originalError instanceof window.Event) {
+          // generate error message
+          setErrorMessageForUnhandledEvent(type, pvError, originalError);
+          // override type so metroplex can accept it
+          type = ERROR_EVENT_ERROR_TYPE; // eslint-disable-line no-param-reassign
+        }
+      } catch (e) {
+        // TODO: report to us that this failed
+        return null;
+      }
+    }
+  }
+
+  // setting the source of this error to be the type
+  pvError[ERROR_SOURCE_ATT_NAME] = type;
+  return pvError;
+}
+
+/**
+ * determines if an error is a collect error
+ * @param  {} pvError
+ */
+function isCollectError(pvError) {
+  // checking if this error originated from the Noibu script
+  if (pvError[TYPE_ATT_NAME] === JS_EVENT_TYPE) {
+    if (pvError[JS_ERROR_ATT_NAME]) {
+      const frames = pvError[JS_ERROR_ATT_NAME][JS_STACK_FRAMES_ATT_NAME];
+      if (frames && frames.length > 0) {
+        const lowerCapFile = frames[0][JS_STACK_FILE_ATT_NAME].toLowerCase();
+        const lowerCapMethod =
+          frames[0][JS_STACK_METHOD_ATT_NAME].toLowerCase();
+
+        if (
+          lowerCapFile.includes('noibu') &&
+          !lowerCapMethod.includes('nbuwrapper')
+        ) {
+          // if the first file in the stack is Noibu then we do not
+          // queue this error for analytics, we send it to another
+          // endpoint to alert us
+          ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
+            pvError,
+            false,
+            SEVERITY_ERROR,
+          );
+          return true;
+        }
+      }
+    }
+    // checking if the message contains noibu.
+    if (pvError[JS_STACK_MESSAGE_ATT_NAME]) {
+      const lowerCapMessage = pvError[JS_STACK_MESSAGE_ATT_NAME].toLowerCase();
+      // we do not want all errors that contain noibu in their messages to be ignored
+      // only the errors that we are confident are not impact the user.
+      if (
+        lowerCapMessage.includes('input.noibu') ||
+        lowerCapMessage.includes('input.b.noibu')
+      ) {
+        ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
+          pvError,
+          false,
+          SEVERITY_ERROR,
+        );
+        return true;
+      }
+    }
+  } else if (
+    pvError[TYPE_ATT_NAME] === HTTP_EVENT_TYPE &&
+    pvError[URL_ATT_NAME]
+  ) {
+    const currURL = pvError[URL_ATT_NAME];
+    if (typeof currURL === 'string') {
+      // this means that our endpoing has failed and we need to
+      // send an alert to stack driver
+      for (let i = 0; i < NOIBU_INPUT_URLS.length; i += 1) {
+        const inputURL = NOIBU_INPUT_URLS[i];
+        if (currURL.includes(inputURL)) {
+          ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
+            pvError,
+            false,
+            SEVERITY_ERROR,
+          );
+          return true;
+        }
+      }
+    }
+  }
+
+  return false;
+}
+
+/** Saves the error to the ErrorQueue
+ * @param  {} type
+ * @param  {} payload
+ * @param  {} httpDataSeqNum
+ */
+function saveErrorToPagevisit(type, payload, httpDataSeqNum) {
+  // We do not want to process errors events as errors (yet)
+  if (type === EVENT_ERROR_TYPE) {
+    return;
+  }
+  const pvError = createPageVisitEventError(type, payload, httpDataSeqNum);
+
+  // making sure we have the error object defined
+  if (!pvError || !pvError[URL_ATT_NAME]) {
+    return;
+  }
+
+  const currErrURL = pvError[URL_ATT_NAME];
+
+  // We need valid URLs in order to check their blacklist status
+  if (isValidURL(currErrURL)) {
+    new URL(currErrURL);
+
+    // if the domain is blacklisted or the protocol is not http(s)
+    // we drop the error
+    /* if ( // todo we don't support hostname on react native yet
+      urlOb.hostname in blacklisedDomains ||
+      !urlOb.protocol.startsWith('http')
+    ) {
+      return;
+    } */
+  }
+
+  if (isCollectError(pvError)) {
+    return;
+  }
+
+  // we register an error event
+  StoredMetrics.getInstance().addError();
+  // debounce event
+  InputMonitor.getInstance().addEvent(pvError, ERROR_EVENT_TYPE);
+}
+
+export { isCollectError, saveErrorToPagevisit };

package/dist/pageVisit/pageVisitEventHTTP/pageVisitEventHTTP.js

@@ -0,0 +1,115 @@
+import { getMaxSubstringAllowed, asString, getProperGlobalUrl } from '../../utils/function.js';
+import { timestampWrapper } from '../../utils/date.js';
+import { InputMonitor } from '../../monitors/inputMonitor.js';
+import { HTTP_METHOD_ATT_NAME, MAX_HTTP_DATA_EVENT_COUNT, PV_SEQ_ATT_NAME, HTTP_DATA_METROPLEX_TYPE, NOIBUJS_CONFIG, HTTP_DATA_PAYLOAD_URL_REGEXES_FLAG_NAME, SEVERITY_ERROR, HTTP_EVENT_TYPE, PAGE_VISIT_HTTP_DATA_ATT_NAME } from '../../constants.js';
+import { PageVisit } from '../pageVisit.js';
+import StoredMetrics from '../../api/storedMetrics.js';
+import MetroplexSocket from '../../api/metroplexSocket.js';
+import ClientConfig from '../../api/clientConfig.js';
+
+/** @module PageVisitEventHTTP */
+
+/**
+ * Determines if a response is a failure
+ * @param  {number} code
+ */
+function isHttpCodeFailure(code) {
+  if (typeof code !== 'number') {
+    return true;
+  }
+
+  return code >= 400 || code <= 0;
+}
+
+/** Class representing a PageVisitEventHTTP */
+class PageVisitEventHTTP {
+  /**
+   * Creates an instance of the http event for the pv
+   * @param  {} httpEvent
+   * @param  {} httpData
+   */
+  constructor(httpEvent, httpData) {
+    const mutatedHttpEvent = httpEvent;
+    // TODO: implement attribute checking in this function
+    // we force the response time to at least be 0 if it is negative or if its not present
+    if (!mutatedHttpEvent.resp_time || mutatedHttpEvent.resp_time < 0) {
+      mutatedHttpEvent.resp_time = 0;
+    }
+
+    // setting the method to be upper case
+    mutatedHttpEvent[HTTP_METHOD_ATT_NAME] =
+      httpEvent[HTTP_METHOD_ATT_NAME].toUpperCase();
+
+    mutatedHttpEvent.url = getMaxSubstringAllowed(
+      asString(mutatedHttpEvent.url),
+    );
+
+    this.httpEvent = mutatedHttpEvent;
+    this.httpData = httpData;
+  }
+
+  /** Saves the HTTP event to the pageVisit Queue */
+  saveHTTPEvent() {
+    // we do not store http events that have empty urls
+    if (
+      !this.httpEvent ||
+      !this.httpEvent.url ||
+      this.httpEvent.url.trim() === ''
+    ) {
+      return;
+    }
+    // we register an http event
+    StoredMetrics.getInstance().addHttpEvent();
+
+    // send http data down to metroplex
+    if (this.httpData) {
+      // add the sequence number to both events
+      const sequenceNumber = StoredMetrics.getInstance().httpSequenceNumber;
+      // restrict total number of events collected per page visit to ensure we don't
+      // blow up memory and storage usage
+      if (sequenceNumber < MAX_HTTP_DATA_EVENT_COUNT) {
+        this.httpData[PV_SEQ_ATT_NAME] = sequenceNumber;
+        this.httpEvent[PV_SEQ_ATT_NAME] = sequenceNumber;
+        // increment the count
+        StoredMetrics.getInstance().addHttpData();
+
+        const metroplexMsg = {};
+        metroplexMsg[PAGE_VISIT_HTTP_DATA_ATT_NAME] = this.httpData;
+        MetroplexSocket.getInstance().sendMessage(
+          HTTP_DATA_METROPLEX_TYPE,
+          metroplexMsg,
+        );
+
+        if (getProperGlobalUrl().includes('checkout.mec.ca')) {
+          ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
+            `Sending PVH to Metro: ${JSON.stringify(this.httpData)}
+
+Whitelisted URLs: ${NOIBUJS_CONFIG()[HTTP_DATA_PAYLOAD_URL_REGEXES_FLAG_NAME]}`,
+            false,
+            SEVERITY_ERROR,
+          );
+        }
+      } else {
+        // have collected more than the max number of http requests for this
+        // page visit, so increment the over request limit count
+        StoredMetrics.getInstance().addHttpDataOverLimit();
+      }
+    }
+    // if this was an error, send immediately so we don't lose it
+    if (isHttpCodeFailure(this.status)) {
+      PageVisit.getInstance().addPageVisitEvent(
+        {
+          event: this.httpEvent,
+          occurredAt: new Date(timestampWrapper(Date.now())).toISOString(),
+        },
+        HTTP_EVENT_TYPE,
+      );
+      return;
+    }
+
+    // debounce event
+    InputMonitor.getInstance().addEvent(this.httpEvent, HTTP_EVENT_TYPE);
+  }
+}
+
+export { PageVisitEventHTTP, isHttpCodeFailure };

package/dist/pageVisit/userStep/userStep.js

@@ -0,0 +1,20 @@
+import { asString } from '../../utils/function.js';
+import { CSS_CLASS_ATT_NAME } from '../../constants.js';
+
+/** @module UserStep */
+/**
+ * updates the payload of a user step in order to stringify the css class
+ * @param  {} payload
+ */
+function updatePayload(payload) {
+  // In certain cases the class returned by the attribute will be an
+  // object. This will break the metroplex validation and thus needs to be
+  // stringified
+  const updatedPayload = payload;
+  updatedPayload[CSS_CLASS_ATT_NAME] = asString(
+    updatedPayload[CSS_CLASS_ATT_NAME],
+  );
+  return updatedPayload;
+}
+
+export { updatePayload };

package/dist/react/ErrorBoundary.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+export declare const UNKNOWN_COMPONENT = "unknown";
+export type FallbackRender = (errorData: {
+    error: Error;
+    componentStack: string | null;
+    eventId: string | null;
+    resetError(): void;
+}) => React.ReactElement;
+export type ErrorBoundaryProps = {
+    children?: React.ReactNode | (() => React.ReactNode);
+    /**
+     * A fallback component that gets rendered when the error boundary encounters an error.
+     *
+     * Can either provide a React Component, or a function that returns React Component as
+     * a valid fallback prop. If a function is provided, the function will be called with
+     * the error, the component stack, and a function that resets the error boundary on error.
+     *
+     */
+    fallback?: React.ReactElement | FallbackRender;
+    /** Called when the error boundary encounters an error */
+    onError?(error: Error, componentStack: string, eventId: string): void;
+    /** Called on componentDidMount() */
+    onMount?(): void;
+    /** Called if resetError() is called from the fallback render props function  */
+    onReset?(error: Error | null, componentStack: string | null, eventId: string | null): void;
+    /** Called on componentWillUnmount() */
+    onUnmount?(error: Error | null, componentStack: string | null, eventId: string | null): void;
+};
+export type ErrorBoundaryState = {
+    componentStack: React.ErrorInfo['componentStack'] | null;
+    error: Error | null;
+    eventId: string | null;
+};
+/**
+ * @description A ErrorBoundary component that logs errors to Noibu. Requires React >= 16.
+ * @extends {Component<ErrorBoundaryProps, ErrorBoundaryState>}
+ */
+declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    /**
+     * Lifecycle hook on mount
+     * @returns void
+     */
+    componentDidMount(): void;
+    /**
+     *
+     * Handler for all errors that happen in a wrapped component
+     * @param  {Error&{cause?:Error}} error
+     * @param  {React.ErrorInfo} {componentStack}
+     * @returns void
+     */
+    componentDidCatch(error: Error & {
+        cause?: Error;
+    }, { componentStack }: React.ErrorInfo): void;
+    /**
+     *  * Lifecycle hook on unmount
+     * @returns void
+     */
+    componentWillUnmount(): void;
+    /**
+     * Callback from fallback to reset the error boundary
+     * @param  {} =>void=(
+     */
+    resetErrorBoundary: () => void;
+    /**
+     *
+     * Renders the fallback ui
+     * @returns {React.ReactNode}
+     */
+    render(): React.ReactNode;
+}
+export { ErrorBoundary };