test(plugin-sentry): add test components (#4042)

package.json

@@ -112,5 +112,8 @@
     "*.{js,jsx,ts,tsx}": [
       "prettier --write"
     ]
+  },
+  "dependencies": {
+    "@sentry/react": "^7.77.0"
   }
 }

packages/plugin-sentry/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/plugin-sentry",
-  "version": "0.0.4",
+  "version": "0.0.6-beta.0",
   "homepage:": "https://payloadcms.com",
   "repository": "git@github.com:payloadcms/plugin-sentry.git",
   "description": "Sentry plugin for Payload",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@sentry/react':
+        specifier: ^7.77.0
+        version: 7.77.0(react@18.2.0)
       react:
         specifier: 18.2.0
         version: 18.2.0
@@ -4531,6 +4534,17 @@ packages:
       '@sentry/utils': 7.77.0
     dev: false
 
+  /@sentry/browser@7.77.0:
+    resolution: {integrity: sha512-nJ2KDZD90H8jcPx9BysQLiQW+w7k7kISCWeRjrEMJzjtge32dmHA8G4stlUTRIQugy5F+73cOayWShceFP7QJQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@sentry-internal/tracing': 7.77.0
+      '@sentry/core': 7.77.0
+      '@sentry/replay': 7.77.0
+      '@sentry/types': 7.77.0
+      '@sentry/utils': 7.77.0
+    dev: false
+
   /@sentry/core@7.77.0:
     resolution: {integrity: sha512-Tj8oTYFZ/ZD+xW8IGIsU6gcFXD/gfE+FUxUaeSosd9KHwBQNOLhZSsYo/tTVf/rnQI/dQnsd4onPZLiL+27aTg==}
     engines: {node: '>=8'}
@@ -4552,6 +4566,29 @@ packages:
       - supports-color
     dev: false
 
+  /@sentry/react@7.77.0(react@18.2.0):
+    resolution: {integrity: sha512-Q+htKzib5em0MdaQZMmPomaswaU3xhcVqmLi2CxqQypSjbYgBPPd+DuhrXKoWYLDDkkbY2uyfe4Lp3yLRWeXYw==}
+    engines: {node: '>=8'}
+    peerDependencies:
+      react: 15.x || 16.x || 17.x || 18.x
+    dependencies:
+      '@sentry/browser': 7.77.0
+      '@sentry/types': 7.77.0
+      '@sentry/utils': 7.77.0
+      hoist-non-react-statics: 3.3.2
+      react: 18.2.0
+    dev: false
+
+  /@sentry/replay@7.77.0:
+    resolution: {integrity: sha512-M9Ik2J5ekl+C1Och3wzLRZVaRGK33BlnBwfwf3qKjgLDwfKW+1YkwDfTHbc2b74RowkJbOVNcp4m8ptlehlSaQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@sentry-internal/tracing': 7.77.0
+      '@sentry/core': 7.77.0
+      '@sentry/types': 7.77.0
+      '@sentry/utils': 7.77.0
+    dev: false
+
   /@sentry/types@7.77.0:
     resolution: {integrity: sha512-nfb00XRJVi0QpDHg+JkqrmEBHsqBnxJu191Ded+Cs1OJ5oPXEW6F59LVcBScGvMqe+WEk1a73eH8XezwfgrTsA==}
     engines: {node: '>=8'}

test/plugin-sentry/components.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import * as Sentry from '@sentry/react'
+export const testErrors = () => {
+  const notFound = async () => {
+    const req = await fetch('http://localhost:3000/api/users/notFound', {
+      method: 'GET',
+    })
+  }
+
+  const cannotCreate = async () => {
+    const req = await fetch('http://localhost:3000/api/posts', {
+      method: 'POST',
+      body: JSON.stringify({
+        text: 'New post',
+      }),
+    })
+  }
+
+  const badLogin = async () => {
+    const req = await fetch('http://localhost:3000/api/users/login', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: 'sorry@whoareyou.com',
+        password: '123456',
+      }),
+    })
+  }
+
+  const badReq = async () => {
+    const req = await fetch('http://localhost:3000/api/users/forgot-password', {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+  }
+
+  const badReset = async () => {
+    const req = await fetch('http://localhost:3000/api/users/reset-password', {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        token: '7eac3830ffcfc7f9f66c00315dabeb11575dba91',
+        password: 'newPassword',
+      }),
+    })
+  }
+
+  const badVerify = async () => {
+    const req = await fetch('http://localhost:3000/api/users/unlock', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+  }
+
+  return (
+    <Sentry.ErrorBoundary>
+      <h4>Test Errors</h4>
+      <div style={{ display: 'flex', gap: '10px' }}>
+        <button style={{ marginBottom: '20px' }} onClick={() => notFound()} type="button">
+          Not Found
+        </button>
+
+        <button style={{ marginBottom: '20px' }} onClick={() => cannotCreate()} type="button">
+          Forbidden
+        </button>
+
+        <button style={{ marginBottom: '20px' }} onClick={() => badLogin()} type="button">
+          Bad login
+        </button>
+
+        <button style={{ marginBottom: '20px' }} onClick={() => badReq()} type="button">
+          TypeError
+        </button>
+
+        <button style={{ marginBottom: '20px' }} onClick={() => badReset()} type="button">
+          Bad Reset
+        </button>
+
+        <button style={{ marginBottom: '20px' }} onClick={() => badVerify()} type="button">
+          Bad Verify
+        </button>
+      </div>
+    </Sentry.ErrorBoundary>
+  )
+}

test/plugin-sentry/config.ts

@@ -3,9 +3,16 @@ import { buildConfigWithDefaults } from '../buildConfigWithDefaults'
 import { devUser } from '../credentials'
 import { Posts } from './collections/Posts'
 import { Users } from './collections/Users'
+import { testErrors } from './components'
 
 export default buildConfigWithDefaults({
   collections: [Posts, Users],
+  admin: {
+    user: Users.slug,
+    components: {
+      beforeDashboard: [testErrors],
+    },
+  },
   plugins: [
     sentry({
       dsn: 'https://61edebe5ee6d4d38a9d6459c7323d777@o4505289711681536.ingest.sentry.io/4505357688242176',

test/plugin-sentry/payload-types.ts

@@ -0,0 +1,66 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * This file was automatically generated by Payload.
+ * DO NOT MODIFY IT BY HAND. Instead, modify your source Payload config,
+ * and re-run `payload generate:types` to regenerate this file.
+ */
+
+export interface Config {
+  collections: {
+    posts: Post
+    users: User
+    'payload-preferences': PayloadPreference
+    'payload-migrations': PayloadMigration
+  }
+  globals: {}
+}
+export interface Post {
+  id: string
+  text?: string | null
+  updatedAt: string
+  createdAt: string
+}
+export interface User {
+  id: string
+  updatedAt: string
+  createdAt: string
+  email: string
+  resetPasswordToken?: string | null
+  resetPasswordExpiration?: string | null
+  salt?: string | null
+  hash?: string | null
+  loginAttempts?: number | null
+  lockUntil?: string | null
+  password: string | null
+}
+export interface PayloadPreference {
+  id: string
+  user: {
+    relationTo: 'users'
+    value: string | User
+  }
+  key?: string | null
+  value?:
+    | {
+        [k: string]: unknown
+      }
+    | unknown[]
+    | string
+    | number
+    | boolean
+    | null
+  updatedAt: string
+  createdAt: string
+}
+export interface PayloadMigration {
+  id: string
+  name?: string | null
+  batch?: number | null
+  updatedAt: string
+  createdAt: string
+}
+
+declare module 'payload' {
+  export interface GeneratedTypes extends Config {}
+}