React

Install the IUDEX browser package

npm i iudex-web

pnpm add iudex-web

yarn add iudex-web

bun add iudex-web

Create a write-only API key 🔑

Click settings in the top left corner of the IUDEX dashboard and create a write-only API key.

Add IUDEX to your code 🚀

At the top of your app’s entry point file, add the following code snippet:

import { instrument } from 'iudex';
instrument({
  serviceName: 'YOUR_SERVICE_NAME', // Highly encouraged
  publicWriteOnlyIudexApiKey: 'YOUR_PUBLIC_WRITE_ONLY_KEY', // Only ever commit your WRITE ONLY key
  githubUrl: 'GITHUB_URL_TO_YOUR_REPO', // Optional, this sets up code linking
  env: 'production', // Optional, development, local, etc
});
//  ^ place this as high as possible in your code

Set up Slack alerts 📣

Click the Slack logo in the top right of the dashboard and follow the prompts.

Note: you must have admin permissions to add apps to your workspace.

Create a log 🪵

Add code to emit a log in React.

For example:

export default function App() {
  // Add this, will log on mount.
  useEffect(() => console.log('Hello IUDEX!', { ctx: { 'iudex.slack_channel_id': 'YOUR_SLACK_CHANNEL_ID' } }), []);
 
  return <div>Welcome to React!</div>
}

Then run and open your React app to emit the log.

Verify 🧐

You should see the log in Slack and in your IUDEX dashboard log view.

Go in-depth 👉

Check out more in-depth guides on how to get the most out of IUDEX for your stack.