Ashkar for React
See browser errors and React render failures in one place.
Ready in: About 6 minutes1. Install the packages
Install the browser SDK and the React integration together.
npm install @ashkarhq/browser @ashkarhq/react2. Connect Ashkar to React
Create one client and wrap your app with the Error Boundary to capture render failures.
import { init } from "@ashkarhq/browser";
import { ErrorBoundary } from "@ashkarhq/react";
export const ashkar = init({
dsn: "https://app.ashkarhq.ir/api/v1/events",
projectKey: "YOUR_PUBLIC_KEY",
environment: "production",
release: "web@1.0.0",
});
root.render(
<ErrorBoundary client={ashkar} fallback={<p>Something went wrong.</p>}>
<App />
</ErrorBoundary>,
);3. Send a test error
To verify the connection, run this temporarily from a button or an effect.
await ashkar.captureException(
new Error("Ashkar React test"),
);
await ashkar.flush();4. Check the result in Issues
Open the project and find “Ashkar React test”. Browser failures and Error Boundary errors will now be captured automatically.
Your project should be connected now.
Open Issues and confirm the test error arrived. You can add the rest when you need it.