Sentry
Admin UI

Description

This package provides a set of components to have a Sentry dashboard right within your admin interface, allowing you to get an overview of what is happening without needing to leave your admin panel.

It also provides JavaScript error and performance monitoring, helping you resolve JavaScript errors with maximum efficiency rather than maximum effort. You can obtain actionable insights to resolve JavaScript performance issues and track, debug, and fix JavaScript errors across different platforms.

Getting started

Requirements

To use this library, the medusa-plugin-sentry needs to be installed on your server as it is responsible for providing the necessary data.

First of all, you need to install the plugin as follows:

npm install medusa-plugin-sentry-ui

To set up the Sentry dashboard in your Medusa admin interface, follow these steps:

1

Open the src/pages/a.js file and add the following component above the Routes:

import { medusaUrl } from "../services/config"
import { Sentry } from "medusa-plugin-sentry-ui"
 
const SentryRoute = () => {
  const location = useLocation()
  const organisation = "YOUR_ORGA_ON_SENTRY"
  const project = "YOUR_PROJECt_ON_SENTRY"
  
  return (
    <Router>
        <Sentry path="/" baseUrl={medusaUrl} organisation={organisation} project={project} location={location} />
    </Router>
  )
}
ℹ️

Be sure to replace YOUR_ORGA_ON_SENTRY and YOUR_PROJECT_ON_SENTRY with the corresponding values for your Sentry account and project

2

Next, add the following code to the Routes component, below the other routes:

<SentryRoute path="sentry/*"/>
3

Finally, to add a link to the Sentry dashboard in the sidebar menu, go to src/components/organisms/sidebar/index.tsx and add the following menu item:

<SidebarMenuItem
    pageLink={"/a/sentry"}
    icon={<ClockIcon size={ICON_SIZE} />}
    triggerHandler={triggerHandler}
    text={"Sentry"}
/>

You can now launch your admin and navigate to the page to view your Sentry dashboard in action! 🚀

Custom api end points