feat(log-drains): Add Sentry Log Drain (supabase#39442)

* feat(log-drains): Add Sentry Log Drain

* fix icon

* fix type error

* flag

* fix dupped entry in schema

---------

Co-authored-by: Jordi Enric <[email protected]>

Author: AbhiPrasad

apps/docs/content/guides/telemetry/log-drains.mdx

@@ -17,6 +17,7 @@ The following table lists the supported destinations and the required setup conf
 | Generic HTTP endpoint | HTTP             | URL <br /> HTTP Version <br/> Gzip <br /> Headers |
 | DataDog               | HTTP             | API Key <br /> Region                             |
 | Loki                  | HTTP             | URL <br /> Headers                                |
+| Sentry                | HTTP             | DSN                                               |
 
 HTTP requests are batched with a max of 250 logs or 1 second intervals, whichever happens first. Logs are compressed via Gzip if the destination supports it.
 
@@ -196,6 +197,20 @@ The `event_message` and `timestamp` fields will be dropped from the events to av
 
 Loki must be configured to accept **structured metadata**, and it is advised to increase the default maximum number of structured metadata fields to at least 500 to accommodate large log event payloads of different products.
 
+## Sentry
+
+Logs are sent to Sentry as part of [Sentry's Logging Product](https://docs.sentry.io/product/explore/logs/). Ingesting Supabase logs as Sentry errors is currently not supported.
+
+To setup the Sentry log drain, you need to do the following:
+
+1. Grab your DSN from your [Sentry project settings](https://docs.sentry.io/concepts/key-terms/dsn-explainer/). It should be of the format `{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}{PATH}/{PROJECT_ID}`.
+2. Create log drain in [Supabase dashboard](/dashboard/project/_/settings/log-drains)
+3. Watch for events in the [Sentry Logs page](https://sentry.io/explore/logs/)
+
+All fields from the log event are attached as attributes to the Sentry log, which can be used for filtering and grouping in the Sentry UI. There are no limits to cardinality or the number of attributes that can be attached to a log.
+
+If you are self-hosting Sentry, Sentry Logs are only supported in self-hosted version [25.9.0](https://github.com/getsentry/self-hosted/releases/tag/25.9.0) and later.
+
 ## Pricing
 
 For a detailed breakdown of how charges are calculated, refer to [Manage Log Drain usage](/docs/guides/platform/manage-your-usage/log-drains).

apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx

@@ -5,7 +5,7 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { useParams } from 'common'
+import { useFlag, useParams } from 'common'
 import { DocsButton } from 'components/ui/DocsButton'
 import { LogDrainData, useLogDrainsQuery } from 'data/log-drains/log-drains-query'
 import { DOCS_URL } from 'lib/constants'
@@ -80,6 +80,7 @@ const formUnion = z.discriminatedUnion('type', [
   }),
   z.object({
     type: z.literal('sentry'),
+    dsn: z.string().min(1, { message: 'Sentry DSN is required' }),
   }),
 ])
 
@@ -156,6 +157,8 @@ export function LogDrainDestinationSheetForm({
   }
   const DEFAULT_HEADERS = mode === 'create' ? CREATE_DEFAULT_HEADERS : defaultConfig?.headers || {}
 
+  const sentryEnabled = useFlag('SentryLogDrain')
+
   const { ref } = useParams()
   const { data: logDrains } = useLogDrainsQuery({
     ref,
@@ -164,6 +167,11 @@ export function LogDrainDestinationSheetForm({
   const defaultType = defaultValues?.type || 'webhook'
   const [newCustomHeader, setNewCustomHeader] = useState({ name: '', value: '' })
 
+  const baseValues = {
+    name: defaultValues?.name || '',
+    description: defaultValues?.description || '',
+  }
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     values: {
@@ -178,6 +186,7 @@ export function LogDrainDestinationSheetForm({
       region: defaultConfig?.region || '',
       username: defaultConfig?.username || '',
       password: defaultConfig?.password || '',
+      dsn: defaultConfig?.dsn || '',
     },
   })
 
@@ -274,7 +283,7 @@ export function LogDrainDestinationSheetForm({
                 />
                 <LogDrainFormItem
                   value="description"
-                  placeholder="My Destination"
+                  placeholder="Optional description"
                   label="Description"
                   formControl={form.control}
                 />
@@ -293,16 +302,18 @@ export function LogDrainDestinationSheetForm({
                         {LOG_DRAIN_TYPES.find((t) => t.value === type)?.name}
                       </SelectTrigger_Shadcn_>
                       <SelectContent_Shadcn_>
-                        {LOG_DRAIN_TYPES.map((type) => (
-                          <SelectItem_Shadcn_
-                            value={type.value}
-                            key={type.value}
-                            id={type.value}
-                            className="text-left"
-                          >
-                            {type.name}
-                          </SelectItem_Shadcn_>
-                        ))}
+                        {LOG_DRAIN_TYPES.filter((t) => t.value !== 'sentry' || sentryEnabled).map(
+                          (type) => (
+                            <SelectItem_Shadcn_
+                              value={type.value}
+                              key={type.value}
+                              id={type.value}
+                              className="text-left"
+                            >
+                              {type.name}
+                            </SelectItem_Shadcn_>
+                          )
+                        )}
                       </SelectContent_Shadcn_>
                     </Select_Shadcn_>
                   </FormItemLayout>
@@ -456,6 +467,31 @@ export function LogDrainDestinationSheetForm({
                     />
                   </div>
                 )}
+                {type === 'sentry' && (
+                  <div className="grid gap-4 px-content">
+                    <LogDrainFormItem
+                      type="text"
+                      value="dsn"
+                      label="DSN"
+                      placeholder="https://<project_id>@o<organization_id>.ingest.sentry.io/<project_id>"
+                      formControl={form.control}
+                      description={
+                        <>
+                          The DSN obtained from the Sentry dashboard. Read more about DSNs{' '}
+                          <a
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-sm underline transition hover:text-foreground"
+                            href="https://docs.sentry.io/concepts/key-terms/dsn-explainer/"
+                          >
+                            here
+                          </a>
+                          .
+                        </>
+                      }
+                    />
+                  </div>
+                )}
                 <FormMessage_Shadcn_ />
               </div>
             </form>

apps/studio/components/interfaces/LogDrains/LogDrains.constants.tsx

@@ -1,5 +1,5 @@
+import { Datadog, Grafana, Sentry } from 'icons'
 import { components } from 'api-types'
-import { Datadog, Grafana } from 'icons'
 import { BracesIcon } from 'lucide-react'
 
 const iconProps = {
@@ -28,6 +28,13 @@ export const LOG_DRAIN_TYPES = [
       'Loki is an open-source log aggregation system designed to store and query logs from multiple sources',
     icon: <Grafana {...iconProps} fill="currentColor" strokeWidth={0} />,
   },
+  {
+    value: 'sentry',
+    name: 'Sentry',
+    description:
+      'Sentry is an application monitoring service that helps developers identify and debug performance issues and errors',
+    icon: <Sentry {...iconProps} fill="currentColor" strokeWidth={0} />,
+  },
 ] as const
 
 export const LOG_DRAIN_SOURCE_VALUES = LOG_DRAIN_TYPES.map((source) => source.value)

apps/studio/components/interfaces/LogDrains/LogDrains.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useState } from 'react'
 import { toast } from 'sonner'
 
-import { useParams } from 'common'
+import { useFlag, useParams } from 'common'
 import AlertError from 'components/ui/AlertError'
 import CardButton from 'components/ui/CardButton'
 import Panel from 'components/ui/Panel'
@@ -55,6 +55,8 @@ export function LogDrains({
       enabled: logDrainsEnabled,
     }
   )
+  const sentryEnabled = useFlag('SentryLogDrain')
+
   const { mutate: deleteLogDrain } = useDeleteLogDrainMutation({
     onSuccess: () => {
       setIsDeleteModalOpen(false)
@@ -91,7 +93,7 @@ export function LogDrains({
   if (!isLoading && logDrains?.length === 0) {
     return (
       <div className="grid lg:grid-cols-2 gap-3">
-        {LOG_DRAIN_TYPES.map((src) => (
+        {LOG_DRAIN_TYPES.filter((t) => t.value !== 'sentry' || sentryEnabled).map((src) => (
           <CardButton
             key={src.value}
             title={src.name}

packages/icons/src/icons/index.ts

@@ -17,6 +17,7 @@ export { default as Realtime } from './realtime';
 export { default as ReplaceCode } from './replace-code';
 export { default as Reports } from './reports';
 export { default as Settings } from './settings';
+export { default as Sentry } from './sentry';
 export { default as SqlEditor } from './sql-editor';
 export { default as Storage } from './storage';
 export { default as TableEditor } from './table-editor';

packages/icons/src/icons/sentry.ts

@@ -0,0 +1,23 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name Sentry
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAiIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDI0IDI0IiBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTMuOTEgMi41MDVjLS44NzMtMS40NDgtMi45NzItMS40NDgtMy44NDQgMEw2LjkwNCA3LjkyYTE1LjQ3OCAxNS40NzggMCAwIDEgOC41MyAxMi44MTFoLTIuMjIxQTEzLjMwMSAxMy4zMDEgMCAwIDAgNS43ODQgOS44MTRsLTIuOTI2IDUuMDZhNy42NSA3LjY1IDAgMCAxIDQuNDM1IDUuODQ4SDIuMTk0YS4zNjUuMzY1IDAgMCAxLS4yOTgtLjUzNGwxLjQxMy0yLjQwMmE1LjE2IDUuMTYgMCAwIDAtMS42MTQtLjkxM0wuMjk2IDE5LjI3NWEyLjE4MiAyLjE4MiAwIDAgMCAuODEyIDIuOTk5IDIuMjQgMi4yNCAwIDAgMCAxLjA4Ni4yODhoNi45ODNhOS4zMjIgOS4zMjIgMCAwIDAtMy44NDUtOC4zMThsMS4xMS0xLjkyMmExMS40NyAxMS40NyAwIDAgMSA0Ljk1IDEwLjI0aDUuOTE1YTE3LjI0MiAxNy4yNDIgMCAwIDAtNy44ODUtMTUuMjhsMi4yNDQtMy44NDVhLjM3LjM3IDAgMCAxIC41MDQtLjEzYy4yNTUuMTQgOS43NSAxNi43MDggOS45MjggMTYuOWEuMzY1LjM2NSAwIDAgMS0uMzI3LjU0M2gtMi4yODdjLjAyOS42MTIuMDI5IDEuMjIzIDAgMS44MzFoMi4yOTdhMi4yMDYgMi4yMDYgMCAwIDAgMS45MjItMy4zMXoiPjwvcGF0aD48L3N2Zz4=)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const Sentry = createSupabaseIcon('Sentry', [
+  [
+    'path',
+    {
+      d: 'M13.91 2.505c-.873-1.448-2.972-1.448-3.844 0L6.904 7.92a15.478 15.478 0 0 1 8.53 12.811h-2.221A13.301 13.301 0 0 0 5.784 9.814l-2.926 5.06a7.65 7.65 0 0 1 4.435 5.848H2.194a.365.365 0 0 1-.298-.534l1.413-2.402a5.16 5.16 0 0 0-1.614-.913L.296 19.275a2.182 2.182 0 0 0 .812 2.999 2.24 2.24 0 0 0 1.086.288h6.983a9.322 9.322 0 0 0-3.845-8.318l1.11-1.922a11.47 11.47 0 0 1 4.95 10.24h5.915a17.242 17.242 0 0 0-7.885-15.28l2.244-3.845a.37.37 0 0 1 .504-.13c.255.14 9.75 16.708 9.928 16.9a.365.365 0 0 1-.327.543h-2.287c.029.612.029 1.223 0 1.831h2.297a2.206 2.206 0 0 0 1.922-3.31z',
+      key: 'hopart',
+    },
+  ],
+]);
+
+export default Sentry;