We use cookies to ensure you get the best user experience on our website.Find Out More
React applications often hide complex component states, asynchronous fetch events, and runtime errors. Shakebug captures annotated visual screenshots and records console warnings and failed API endpoints automatically.
Shakebug for React and Next.js is an npm-distributed visual bug reporting and runtime diagnostic SDK (@softnoesis/shakebug-js) built to close the gap between visual QA tickets and JavaScript exception monitoring. By mounting a single <Shakebug /> component at the root of your React, Next.js, or Vite application, testers and end users can report UI defects using the floating action trigger or Ctrl+Alt+K / Cmd+Alt+K shortcuts while automatically attaching React Error Boundary traces, console.warn / console.error outputs, Axios/Fetch payloads, browser viewport details, and user identity metadata. Teams can log custom actions via addEventKey() and identify signed-in users with setcustomUser(), routing complete reproduction packages directly to Jira, GitHub, Linear, ClickUp, or Slack without paying per-seat telemetry fees.
Direct integration with React's core lifecycle APIs and hooks for front-end debugging.
Shakebug integrates with React's custom Error Boundary components to capture JS execution failures, protecting your application lifecycle while forwarding stack traces to developers.
Log all asynchronous API requests and server-side responses made from your React views. Quickly check latency, status headers, and request errors inside the reporting board.
Compile standard console.log inputs and custom Redux actions chronologically up to the point of failure, showing developers the exact path taken to hit the bug.
@softnoesis/shakebug-js to React or Next.jsInstall the official npm package, import the scoped CSS once at your entry point, and wrap your app root or React Error Boundary.
npm install @softnoesis/shakebug-js
// App.tsx / layout.tsx
import '@softnoesis/shakebug-js/dist/index.css';
import { Shakebug, setcustomUser, addEventKey } from '@softnoesis/shakebug-js';
export function AppRoot({ children }) {
setcustomUser({ id: 'usr_482', email: 'qa@company.com', country: 'US' });
addEventKey('Checkout Step', 'Clicked Pay Now');
return (
<>
<Shakebug
appKey="YOUR_APP_KEY"
bundleId="YOUR_WEBSITE_URL"
showFloatingButton={true}
/>
{children}
</>
);
}
Shakebug captures component-level crashes by hooking into React Error Boundaries and global window error events, providing clean stack traces with component path parameters.
Yes. You can pass custom logs or state snapshots programmatically, or register a custom Redux middleware to log actions chronologically alongside bug reports.
Yes. Shakebug automatically intercepts standard console.warn and console.error calls, attaching them to tickets so developers see runtime issues immediately.
You can configure your CI/CD pipeline to upload React Webpack or Vite build source maps, allowing Shakebug to translate minified javascript traces back to clean JSX lines.
