VTEX Logger React

Source code

⚠️ This app is no longer maintained by VTEX. This means support and maintenance are no longer provided.

The VTEX Logger React app helps make log entries in the VTEX IO Logging Service for React Apps.

Configuration

1. Add the vtex-logger-react app as a dependency in your theme's manifest.json file:

  "dependencies": {
+   "vtex.vtex-logger-react": "1.x"
  }

Now you can import any exported components or hooks from the app. Here's an example of a component that uses the useLog hook from the useLoggerVtex to log some relevant info:

// Notice that this is TypeScript, and this code should be in a .tsx file
import React, { FC } from 'react'
import { useLoggerVtex } from 'vtex.vtex-logger-react'
import { Button } from 'vtex.styleguide'

const MyComponent: FC = () => {
  const { useLog } = useLoggerVtex()
  const exampleDetail = {
    id: '1',
    name: 'Test Name',
    description: 'Test Description',
    price: '100',
    quantity: '1',
    brand: 'Test Brand',
    category: 'Test Category',
  }

  const handleClickLog = async () => {
    const appName = 'my-app'
    const message = 'Test log'
    await useLog({ app: appName, message: message, detail: exampleDetail })
  }

  return (
    <Fragment>
      <Button onClick={handleClickLog} />
    </Fragment>
  )
}

export default MyComponent

⚠️ Run vtex setup --typings in your project to install the correct TypeScript types exported by this app.

Hooks

useLog

This is the most useful export from this app. The useLog hook can be used to log messages to the VTEX IO Logging Service.

It needs to receive:

• app: The app name that wants to log the message.
• message: The message to be logged.
• detail: An object with the details of the log. It can be any JSON-serializable object.

interface VtexLoggerProps {
  app: string
  message: string
  detail: any
}

You should expect an object that looks like this:

{
  "logger": {
    "status": 200
  }
}

Always check the status property to know if the log was successful.

To have the full type definition in your development environment, be sure to run vtex setup in your project to install all TypeScript types exported by this app.

Contributors ✨

Thanks goes to these wonderful people:

Germán Bonacchi 💻

Tomás Alfredo Mehdi 💻

This project follows the all-contributors specification. Contributions of any kind welcome!