@xenonhq/ghost

What is Ghost?

Ghost is an error monitoring SDK that automatically captures errors from your application and sends them to your Ghost dashboard in real time. It covers Node.js, browser, React, Vue, Angular, Express, NestJS, and Next.js.

Installation

npm install @xenonhq/ghost

Quick Start

import ghost from "@xenonhq/ghost";

ghost.init({
  apiKey: "your-api-key",
  host: "https://api.your-ghost-domain.com",
  environment: "production",
});

Node.js

The SDK automatically captures uncaught exceptions and unhandled rejections in Node.js environments.

import ghost from "@xenonhq/ghost";

ghost.init({
  apiKey: "your-api-key",
  host: "https://api.your-ghost-domain.com",
});

// Manual capture example
try {
  throw new Error("Something went wrong");
} catch (error) {
  ghost.capture(error);
}

Express

The Express adapter provides middleware for handling errors. It must be added last, after all other routes and middleware.

import express from "express";
import ghost from "@xenonhq/ghost";
import { expressHandler } from "@xenonhq/ghost/adapters/express";

ghost.init({
  apiKey: "your-api-key",
  host: "https://api.your-ghost-domain.com",
});

const app = express();

app.get("/", (req, res) => {
  throw new Error("Broken route");
});

// Must be added last
app.use(expressHandler());

NestJS

Use the GhostExceptionFilter to catch and report errors in your NestJS application.

import { UseFilters, Controller, Get } from "@nestjs/common";
import { GhostExceptionFilter } from "@xenonhq/ghost/adapters/nestjs";

@Controller()
@UseFilters(new GhostExceptionFilter())
export class AppController {
  @Get()
  getHello(): string {
    throw new Error("NestJS error");
  }
}

Next.js

Wrap your Pages Router API routes with nextJsHandler.

import { nextJsHandler } from "@xenonhq/ghost/adapters/nextjs";

async function handler(req, res) {
  throw new Error("Next.js API error");
  res.status(200).json({ name: "John Doe" });
}

export default nextJsHandler(handler);

React

Wrap your component tree with GhostErrorBoundary.

import React from "react";
import { GhostErrorBoundary } from "@xenonhq/ghost/adapters/react";

function App() {
  return (
    <GhostErrorBoundary fallback={<div>Something went wrong.</div>}>
      <MyComponent />
    </GhostErrorBoundary>
  );
}

Vue

Register the Ghost plugin in your Vue application.

import { createApp } from "vue";
import { GhostVuePlugin } from "@xenonhq/ghost/adapters/vue";
import App from "./App.vue";

const app = createApp(App);
app.use(GhostVuePlugin);
app.mount("#app");

Angular

Register the Angular error handler in your application providers.

import { NgModule, ErrorHandler } from "@angular/core";
import { GhostAngularErrorHandler } from "@xenonhq/ghost/adapters/angular";

@NgModule({
  providers: [{ provide: ErrorHandler, useClass: GhostAngularErrorHandler }],
})
export class AppModule {}

Browser (Vanilla JS)

Initialize Ghost directly in your browser.

<script type="module">
  import ghost from "https://unpkg.com/@xenonhq/ghost";

  ghost.init({
    apiKey: "your-api-key",
    host: "https://api.your-ghost-domain.com",
    environment: "production",
  });
</script>

Configuration Options

| Option | Type | Required | Default | Description | | :---------- | :--------------------- | :------- | :----------- | :------------------------------------------------------------ | | apiKey | string | Yes | undefined | Your Ghost project API key. | | host | string | Yes | undefined | The base URL of your Ghost server instance. | | environment | string | No | 'production' | The deployment environment (e.g., production, staging). | | debug | boolean | No | false | Enables console logging for transport layer debugging. | | tags | Record<string, string> | No | {} | Custom key-value pairs added to all error payloads' metadata. |