React SDK

Release candidate: @errordock/react is published on npm at 0.1.0-rc.2, with @errordock/core and @errordock/browser. Pin that version when you install, because npm's latest tag still points at the older rc.1.

The React SDK adds an error boundary component, component stack capture and feature usage hooks on top of the JavaScript SDK.

Install

npm install @errordock/core@0.1.0-rc.2 @errordock/browser@0.1.0-rc.2 @errordock/react@0.1.0-rc.2

Initialise it with init from @errordock/react, using your browser key (ed_pub_) and the endpoint, as described in the JavaScript guide:

import { init } from "@errordock/react";

init({
  apiKey: "ed_pub_...",
  endpoint: "https://api.errordock.com",
  environment: "production",
  release: "2.8.4",
});

Error boundary

import { ErrorBoundary } from "@errordock/react";

<ErrorBoundary fallback={(error, reset) => <SomethingWentWrong onRetry={reset} />}>
  <App />
</ErrorBoundary>

An error boundary catches errors thrown during rendering, in lifecycle methods, and in constructors below it. It does not catch errors in event handlers, in asynchronous code, during server rendering, or in the boundary itself. That is why a boundary alone is not error monitoring.

Component stacks

React provides a component stack separate from the JavaScript stack trace. The JavaScript trace says which function threw; the component stack says where in the tree it was rendering. For render failures the second is usually more useful, and the SDK captures both.

Feature usage

Wrap the part of the tree that belongs to a feature in FeatureBoundary, and use the useErrorDock() hook for the work inside it. The hook returns trackInteraction, withFeature, captureError and feature.

import { FeatureBoundary, useErrorDock } from "@errordock/react";

function ImportButton({ url }) {
  const { withFeature } = useErrorDock();
  const onImport = () => withFeature("recipe-import", () => importRecipe(url));

  return <button onClick={onImport}>Import recipe</button>;
}

<FeatureBoundary name="recipe-import">
  <ImportButton url={url} />
</FeatureBoundary>

For a button whose click is the interaction, TrackedButton records it for you:

<TrackedButton track="apply-coupon" component="CartSummary">Apply coupon</TrackedButton>

withFeature records the outcome as well as the use, which gives the feature an error rate next to its adoption on Feature health. A bug in a component can then be read against how many people actually reach it.