DebugMate

Appearance

ReactJS/NextJS Error Tracking ​

DebugMate tracks key errors in React/NextJS applications, covering component lifecycle and state management issues.

Tracked Errors ​

Async Error: Issues in asynchronous calls.

Click Event Error: Errors from click events.

Division by Zero: Division-related arithmetic errors.

Event Error: General event handling errors.

Lifecycle Error: Errors in component lifecycle stages.

Promise Rejection: Unhandled promise rejections.

Range Error: Errors due to out-of-range values.

Reference Error: Undefined variable/method reference.

State Mutation Error: Invalid state changes.

Syntax Error: Incorrect code syntax.

Type Error: Type mismatches.

Unhandled Rejection Error: Uncaught promises.

URI Error: Malformed URI issues.

Singleton Design Pattern ​

The DebugMate constructor follows the Singleton design pattern, ensuring that only one instance of DebugMate is created during the application lifecycle. This approach helps maintain consistent error reporting across the app.

If you need to reset or reinitialize DebugMate, you can do so manually:

js
// Reset the singleton instance
Debugmate.instance = null;

// Create a new instance
const newDebugmate = new Debugmate({
  domain: "https://your-new-domain.com",
  token: "new-api-token",
  enabled: true,
});

Installation Process ​

1. Install DebugMate ​

bash
npm i @debugmate/reactjs

Usage ​

Usage With NextJS ​

In Next.js, ensure "use client" is included at the top of the file where DebugmateProvider is used:

js
"use client"

import { DebugmateProvider } from '@debugmate/reactjs'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <DebugmateProvider
          domain="https://your-domain.com"
          token="your-api-token"
          enabled={true}
          user={{
            id: 1,
            name: "John Doe",
            email: "[email protected]",
          }}
          environment={{
            environment: "production",
            debug: false,
          }}
        >
          {children}
        </DebugmateProvider>
      </body>
    </html>
  )
}

Set User Context ​

User details can be passed directly via the DebugmateProvider. For manual updates:

js
import { useDebugmateContext } from '@debugmate/reactjs';

const debugmate = useDebugmateContext();

debugmate.setUser({
  id: 123,
  name: "Jane Doe",
  email: "[email protected]",
});

Set Environment Context ​

Add Environment metadata, such as app version or server info:

js
import { useDebugmateContext } from '@debugmate/reactjs';

const debugmate = useDebugmateContext();

debugmate.setEnvironment({
  environment: "staging",
  debug: true,
  timezone: "PST",
  server: "apache",
});

Set Request Context ​

Request details such as HTTP method, headers, query strings, and body can be set using the setRequest method. This helps in tracking requests tied to specific errors.

js
import { useDebugmateContext } from '@debugmate/reactjs';

const debugmate = useDebugmateContext();

debugmate.setRequest({
  request: {
    url: "https://api.example.com/resource",
    method: "POST",
    params: { key: "value" },
  },
  headers: {
    Authorization: "Bearer token",
    "Content-Type": "application/json",
  },
  query_string: { search: "query" },
  body: JSON.stringify({ data: "payload" }),
});

Publish Errors ​

You can publish errors manually using the publish method. Pass optional user, environment and request contexts for better insights:

js
import { useDebugmateContext } from '@debugmate/reactjs';

const debugmate = useDebugmateContext();

try {
  throw new Error("Test error");
} catch (error) {
  debugmate.publish(error, user, environment, request);
}