Getting Started with PageMon

View the SDK on npm ↗

Integrating PageMon into your project is a straightforward process. Follow these steps to get up and running in minutes.

Step 1: Create Your Project

First, log in to your PageMon dashboard and create a new project. During creation, you can add webhook URLs for Discord, Slack, or provide an email address for notifications. Don't worry, you can always add or change these integrations later from your project's settings.

Step 2: Get Your App ID

Once your project is created, you will see your unique App ID on the dashboard. This ID is essential for connecting your application to PageMon. You can copy it now or come back for it later—it will always be available on your project's page.

Step 3: Install the SDK

Next, install the PageMon SDK into your JavaScript-based application using npm:

npm install pagemon-sdk

Step 4: Using the SDK

Our SDK provides two primary functions to monitor and report errors: monitor() for automatic error capturing and notify() for manual reporting.

Automatic Error Monitoring with monitor()

The monitor() function is the easiest way to get started. It automatically captures unhandled runtime errors, network issues, and more. Simply import and call it at the top of your main application file.

import { monitor } from 'pagemon-sdk';

// Place this at the top of your entry file (e.g., index.js, App.js)
monitor('YOUR_APP_ID');

// Your application code...

That's it! PageMon will now automatically listen for any errors in your application and send detailed reports to your configured integrations (Discord, Slack, Email, or Webhook).

Manual Error Reporting with notify()

The notify() function gives you fine-grained control over what you report. It's perfect for sending handled errors from within try...catch blocks, such as failed API calls or specific business logic exceptions. This is especially useful if you don't want to monitor the entire page but still want to be alerted about critical, handled errors.

Here's an example of how to use it inside a catch block:

import { notify } from 'pagemon-sdk';

async function fetchUserData() {
  try {
    const response = await fetch('https://api.example.com/user');
    if (!response.ok) {
      throw new Error('Failed to fetch user data');
    }
    return await response.json();
  } catch (error) {
    // Manually send the error to PageMon
    notify('YOUR_APP_ID', error);
    
    // You can still handle the error gracefully in your UI
    console.error('Could not fetch user data:', error);
    return null;
  }
}

By using notify(), you ensure that even handled exceptions are logged, giving you a complete picture of your application's health.