DebugMate is an error tracking and monitoring tool designed for React and Next.js applications. This package captures and sends error reports along with environment, user, and request context information to a remote API.
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:
// 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,
});npm i @debugmate/reactjsInitialize DebugMate by wrapping your application with the DebugmateProvider. Provide your API domain, token, and any additional context like user and environment.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { DebugmateProvider } from '@debugmate/reactjs';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<DebugmateProvider
domain="https://your-domain.com"
token="your-api-token"
enabled={true}
user={{
id: 1,
name: "John Doe",
email: "john.doe@example.com",
}}
environment={{
environment: "production",
debug: false,
timezone: "UTC",
server: "nginx",
database: "PostgreSQL",
}}
>
<App />
</DebugmateProvider>
</React.StrictMode>
);In Next.js, ensure "use client" is included at the top of the file where DebugmateProvider is used:
"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: "john.doe@example.com",
}}
environment={{
environment: "production",
debug: false,
}}
>
{children}
</DebugmateProvider>
</body>
</html>
)
}User details can be passed directly via the DebugmateProvider. For manual updates:
import { useDebugmateContext } from '@debugmate/reactjs';
const debugmate = useDebugmateContext();
debugmate.setUser({
id: 123,
name: "Jane Doe",
email: "jane.doe@example.com",
});Add Environment metadata, such as app version or server info:
import { useDebugmateContext } from '@debugmate/reactjs';
const debugmate = useDebugmateContext();
debugmate.setEnvironment({
environment: "staging",
debug: true,
timezone: "PST",
server: "apache",
});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.
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" }),
});You can publish errors manually using the publish method. Pass optional user, environment and request contexts for better insights:
import { useDebugmateContext } from '@debugmate/reactjs';
const debugmate = useDebugmateContext();
try {
throw new Error("Test error");
} catch (error) {
debugmate.publish(error, user, environment, request);
}