React

Use Logged in a React application with Vite or Create React App.

Initialize Logged

tsx

import { Logged } from "@logged/sdk";

const logger = new Logged({
  apiKey: import.meta.env.VITE_LOGGED_API_KEY,
});

Environment variables

In Vite, expose the API key to the browser by prefixing it with VITE_. Never commit real keys to source control.

Send logs

tsx

function App() {
  useEffect(() => {
    logger.info("Application loaded");
    logger.auto();
    logger.interceptConsole();
  }, []);

  return <div>Hello world</div>;
}

You can call logger methods from event handlers, effects, or anywhere else in your application.

Capture errors

tsx

async function submitForm(data: FormData) {
  try {
    await fetch("/api/submit", {
      method: "POST",
      body: JSON.stringify(data),
    });
    logger.success("Form submitted");
  } catch (error) {
    logger.capture(error, {
      form: "contact",
    });
  }
}