error-tracker-node

Error tracking for node, web and app environments.

Prerequisites (for Sentry)

• Add a project at https://sentry.io/askeladden-co/
• Note down the DSN

You want to install the Sentry package that fits your project. Typically one of

• @sentry/node
• @sentry/browser
• @sentry/react-native
• @sentry/react

Error tracking with AWS Lambda/serverles

This package does not support AWS Lambda yet. Follow docs for @sentry/serverless instead of using this package.

Install

yarn add @sentry/[react/react-native/node/browser]
yarn add @askeladden/error-tracker-node

Usage

// errorTracker.ts
import * as Sentry from '@sentry/[react/react-native/node/browser]';
import Tracker, { providers } from '@askeladden/error-tracker-node';

const environment = process.env.NODE_ENV || 'development';

const ErrorTracker = (() =>
  new Tracker(
    new providers.Sentry(Sentry, {
      dsn: process.env.SENTRY_DSN,
      environment,
      isActive: environment !== 'development',
    })
  ))();

export default ErrorTracker;

Remember to replace the Sentry import above, depending on what type of project you have.

// Somewhere in your own code
import errorTracker from './errorTracker';

try {
  // your-code
} catch (error) {
  errorTracker.error(error);

  // Extra context can also be added to simplify debugging
  errorTracker.error(error, {
    user: { id: 1234 },
    tags: ['auth'],
    myOwnKey: ['cake', 'pastry', 'banana'],
  });
}

If you do not have access to errorTracker where the error occurs, you can raise a ContextError. This context will be forwarded to Sentry.

import { ContextError } from '@askeladden/error-tracker-node';

throw new ContextError('Something bad happened', {
  user: { id: 1234 },
  tags: ['auth'],
  myOwnKey: ['cake', 'pastry', 'banana'],
});

Usage with React apps

If you're using React, you can hook into the built-in React ErrorBoundary by adding a wrapping ErrorBoundary component:

// ErrorBoundary.tsx
import React, { ReactNode, ErrorInfo } from 'react';
import ErrorTracker from './errorTracker';

type Props = {
  children: ReactNode;
};

class ErrorBoundary extends React.Component<Props> {
  componentDidCatch(error: Error, info: ErrorInfo) {
    const extraInfo = { stack: info.componentStack };
    ErrorTracker.error(error, extraInfo);
  }

  render() {
    const { children } = this.props;
    return children;
  }
}

export default ErrorBoundary;

// In App.tsx or similar location (where ThemeProvider lies)
export const RootElement = ({ children }) => (
  <ReduxProvider>
    <ErrorBoundary>
      <ThemeProvider theme={theme}>{children}</ThemeProvider>
    </ErrorBoundary>
  </ReduxProvider>
);