apperiodocs

Quick start

Install the SDK, send your first error, and get notified about it.

Before you start

You need an Apperio account and a project. If you don’t have one yet, see Getting access. Then, in the dashboard, create a project for the site or app you want to watch.

This guide sets up the SDK in browser code, where it captures errors on its own. For a server, follow these steps and then read the Node.js guide.

1. Find your API key and project ID

  • API key: open the project, then Settings › API Key. Use Reveal Key or the copy button.
  • Project ID: the long string after /projects/ in the dashboard address. It also appears in the code preview on Settings › SDK Config.

2. Install the SDK

Terminal
npm install apperio

Yarn and pnpm work too (yarn add apperio, pnpm add apperio). The package ships ES module and CommonJS builds with TypeScript types.

3. Create the logger

Create one logger, as early as possible in your app’s startup code, so errors that happen early are caught too:

src/apperio.ts
import { Apperio } from 'apperio';

export const logger = new Apperio({
  apiKey: 'your-api-key',
  projectId: 'your-project-id',
  environment: 'production',
  serviceName: 'web',
});

Creating the logger starts it: it begins capturing errors, page views and slow requests straight away. There is no separate init() call.

Set environment in production

If you leave environment out, every log is tagged development. New-error notifications only go out for production unless you change that in Settings › Notifications, so without it you won’t hear about new errors.

A common pattern is to pass your build’s environment variable, for example process.env.NODE_ENV.

The API key ends up in your site’s JavaScript, where anyone can read it. That is expected for browser SDKs; see Projects and API keys for what that means.

4. Send a test error

Throw an error nobody catches. In the browser, the SDK reports it on its own:

TypeScript
setTimeout(() => {
  throw new Error('Apperio test error');
}, 0);

Or report one yourself, with extra detail attached:

TypeScript
logger.error('Checkout failed', new Error('Card declined'), {
  orderId: 'order-123',
});

Logs are sent in batches: when 10 are waiting, every 5 seconds, and when the visitor leaves or hides the page. Expect your test error within about 5 seconds.

5. See it in Apperio

  1. Issues shows a new issue titled Error: Apperio test error. Open it to see the stack trace, how many times it happened and how many sessions it reached.
  2. Logs shows the raw entry, along with the page view the SDK sent when the page loaded.
  3. As the project owner, you get a notification in the app and an email saying there is a new error, as long as the error’s environment is one you are notified about.

Nothing showing up? See Troubleshooting.

Next steps

  • Connect GitHub so Apperio can show which commit probably caused each error.
  • Add a release to every log, so you can tell which version of your code an error came from.
  • Record your deploys to get a verdict on each one.
  • Using React or Next.js? Follow the React or Next.js guide, which also report the errors those frameworks catch for you.