xiloryx-log-react

React error monitoring for Xiloryx Log — capture JS errors automatically and send them to your dashboard.

Installation

1. Install the package

npm install xiloryx-log-react

2. Get your public key

In your Xiloryx Log dashboard, open your project then go to Settings. Copy the Public Key (starts with xlx_pub_).

3. Add the key to your environment file

Add the key to your frontend .env.production (the Vite env file, not a Laravel/backend env):

# .env.production  (frontend / Vite)
VITE_XILORYX_PUBLIC_KEY=xlx_pub_your_key_here

Note: Variables prefixed with VITE_ are bundled into the client at build time. This key is write-only — it can only submit errors, it cannot read any data.

4. Initialize in your entry file

Add this at the very top of main.tsx / index.tsx, before anything else:

// main.tsx
import { init } from 'xiloryx-log-react';
init(import.meta.env.VITE_XILORYX_PUBLIC_KEY, { environment: 'production' });

That's it. Uncaught errors and unhandled promise rejections are captured automatically from this point on.

Optional: restrict to your domain

In Project Settings → Allowed Origins, add your production domain (e.g. https://myapp.com). Requests from any other origin will be rejected (403).

Optional: React Error Boundary

To also catch errors thrown during React component rendering, wrap your app with ErrorBoundary:

import { init, ErrorBoundary } from 'xiloryx-log-react';

init(import.meta.env.VITE_XILORYX_PUBLIC_KEY, { environment: 'production' });

function App() {
  return (
    <ErrorBoundary fallback={<p>Something went wrong.</p>}>
      <YourApp />
    </ErrorBoundary>
  );
}

Optional: manual capture

import { getClient } from 'xiloryx-log-react';

try {
  await riskyOperation();
} catch (err) {
  getClient()?.captureError(err, { action: 'riskyOperation' });
}

Or with the React hook (requires XiloryxProvider):

import { useXiloryx } from 'xiloryx-log-react';

const { captureError } = useXiloryx();
captureError(new Error('something went wrong'));

Options

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | publicKey | string | required | Your project's public key (xlx_pub_...) | | options.environment | string | undefined | e.g. 'production', 'staging' | | options.release | string | undefined | Your app version e.g. '1.2.3' | | options.endpoint | string | https://log.xiloryx.fr/api/js-errors | Custom API endpoint | | options.captureGlobalErrors | boolean | true | Capture window.onerror | | options.captureUnhandledRejections | boolean | true | Capture unhandled promise rejections | | options.beforeSend | (payload) => payload \| null | undefined | Filter/modify before sending. Return null to discard. |

Security

The public key (xlx_pub_...) is write-only — it can only submit errors, never read data. It is safe to include in your frontend bundle. Restrict allowed domains via Allowed Origins in Project Settings.

License

MIT