feat: RedwoodJS Studio & OpenTelemetry (Dev)

.eslintrc.js

@@ -27,6 +27,7 @@ module.exports = {
     'packages/core/**/__fixtures__/**/*',
     'packages/codemods/**/__testfixtures__/**/*',
     'packages/core/config/storybook/**/*',
+    'packages/studio/dist-*/**/*',
   ],
   rules: {
     '@typescript-eslint/no-explicit-any': 'off',

packages/api-server/src/watch.ts

@@ -2,6 +2,7 @@
 
 import { fork } from 'child_process'
 import type { ChildProcess } from 'child_process'
+import fs from 'fs'
 import path from 'path'
 
 import c from 'ansi-colors'
@@ -74,6 +75,27 @@ const rebuildApiServer = async () => {
     const forkOpts = {
       execArgv: process.execArgv,
     }
+
+    // OpenTelemetry SDK Setup
+    if (getConfig().experimental.opentelemetry.enabled) {
+      const opentelemetrySDKScriptPath =
+        getConfig().experimental.opentelemetry.apiSdk
+      if (opentelemetrySDKScriptPath) {
+        console.log(
+          `Setting up OpenTelemetry using the setup file: ${opentelemetrySDKScriptPath}`
+        )
+        if (fs.existsSync(opentelemetrySDKScriptPath)) {
+          forkOpts.execArgv = forkOpts.execArgv.concat([
+            `--require=${opentelemetrySDKScriptPath}`,
+          ])
+        } else {
+          console.error(
+            `OpenTelemetry setup file does not exist at ${opentelemetrySDKScriptPath}`
+          )
+        }
+      }
+    }
+
     const debugPort = argv['debug-port']
     if (debugPort) {
       forkOpts.execArgv = forkOpts.execArgv.concat([`--inspect=${debugPort}`])

packages/auth-providers/dbAuth/api/src/decoder.ts

@@ -17,6 +17,7 @@ export const authDecoder: Decoder = async (
   const authHeaderUserId = authHeaderValue
 
   if (session.id.toString() !== authHeaderUserId) {
+    console.error('Authorization header does not match decrypted user ID')
     throw new Error('Authorization header does not match decrypted user ID')
   }
 

packages/cli/src/commands/experimental.js

@@ -0,0 +1,29 @@
+import terminalLink from 'terminal-link'
+
+import detectRwVersion from '../middleware/detectProjectRwVersion'
+
+export const command = 'experimental <command>'
+export const aliases = ['exp']
+export const description = 'Run or setup experimental features'
+
+export const builder = (yargs) =>
+  yargs
+    .commandDir('./experimental', {
+      recurse: true,
+      // @NOTE This regex will ignore all commands nested more than two
+      // levels deep.
+      // e.g. /setup/hi.js & setup/hi/hi.js are picked up, but
+      // setup/hi/hello/bazinga.js will be ignored
+      // The [/\\] bit is for supporting both windows and unix style paths
+      // Also take care to not trip up on paths that have "setup" earlier
+      // in the path by eagerly matching in the start of the regexp
+      exclude: /.*[/\\]experimental[/\\].*[/\\].*[/\\]/,
+    })
+    .demandCommand()
+    .middleware(detectRwVersion)
+    .epilogue(
+      `Also see the ${terminalLink(
+        'Redwood CLI Reference',
+        'https://redwoodjs.com/docs/cli-commands#experimental'
+      )}`
+    )

packages/cli/src/commands/experimental/setup.js

@@ -0,0 +1,28 @@
+import terminalLink from 'terminal-link'
+
+import detectRwVersion from '../../middleware/detectProjectRwVersion'
+
+export const command = 'setup <command>'
+export const description = 'Setup experimental features'
+
+export const builder = (yargs) =>
+  yargs
+    .commandDir('./setup', {
+      recurse: true,
+      // @NOTE This regex will ignore all commands nested more than two
+      // levels deep.
+      // e.g. /setup/hi.js & setup/hi/hi.js are picked up, but
+      // setup/hi/hello/bazinga.js will be ignored
+      // The [/\\] bit is for supporting both windows and unix style paths
+      // Also take care to not trip up on paths that have "setup" earlier
+      // in the path by eagerly matching in the start of the regexp
+      exclude: /.*[/\\]setup[/\\].*[/\\].*[/\\]/,
+    })
+    .demandCommand()
+    .middleware(detectRwVersion)
+    .epilogue(
+      `Also see the ${terminalLink(
+        'Redwood CLI Reference',
+        'https://redwoodjs.com/docs/cli-commands#experimental'
+      )}`
+    )

packages/cli/src/commands/experimental/setup/opentelemetry/opentelemetry.js

@@ -0,0 +1,23 @@
+export const command = 'opentelemetry'
+
+export const description = 'Setup OpenTelemetry within the api side'
+
+export const builder = (yargs) => {
+  yargs.option('force', {
+    alias: 'f',
+    default: false,
+    description: 'Overwrite existing configuration',
+    type: 'boolean',
+  })
+  yargs.option('verbose', {
+    alias: 'v',
+    default: false,
+    description: 'Print more logs',
+    type: 'boolean',
+  })
+}
+
+export const handler = async (options) => {
+  const { handler } = await import('./opentelemetryHandler')
+  return handler(options)
+}

packages/cli/src/commands/experimental/setup/opentelemetry/opentelemetryHandler.js

@@ -0,0 +1,200 @@
+import fs from 'fs'
+import path from 'path'
+
+import chalk from 'chalk'
+import execa from 'execa'
+import { Listr } from 'listr2'
+
+import { addApiPackages } from '@redwoodjs/cli-helpers'
+import { getConfigPath } from '@redwoodjs/project-config'
+import { errorTelemetry } from '@redwoodjs/telemetry'
+
+import { getPaths, transformTSToJS, writeFile } from '../../../../lib'
+import c from '../../../../lib/colors'
+import { isTypeScriptProject } from '../../../../lib/project'
+
+export const handler = async ({ force, verbose }) => {
+  const ts = isTypeScriptProject()
+
+  // Used in multiple tasks
+  const opentelemetryScriptPath = `${getPaths().api.src}/opentelemetry.${
+    ts ? 'ts' : 'js'
+  }`
+
+  // TODO: Consider extracting these from the templates? Consider version pinning?
+  const opentelemetryPackages = [
+    '@opentelemetry/api',
+    '@opentelemetry/instrumentation',
+    '@opentelemetry/exporter-trace-otlp-http',
+    '@opentelemetry/resources',
+    '@opentelemetry/sdk-node',
+    '@opentelemetry/semantic-conventions',
+    '@opentelemetry/instrumentation-http',
+    '@opentelemetry/instrumentation-fastify',
+    '@prisma/instrumentation',
+  ]
+
+  const opentelemetryTasks = [
+    {
+      title: `Adding OpenTelemetry setup files...`,
+      task: () => {
+        const setupTemplateContent = fs.readFileSync(
+          path.resolve(__dirname, 'templates', 'opentelemetry.ts.template'),
+          'utf-8'
+        )
+        const setupScriptContent = ts
+          ? setupTemplateContent
+          : transformTSToJS(opentelemetryScriptPath, setupTemplateContent)
+
+        return [
+          writeFile(opentelemetryScriptPath, setupScriptContent, {
+            overwriteExisting: force,
+          }),
+        ]
+      },
+    },
+    {
+      title: 'Adding config to redwood.toml...',
+      task: (_ctx, task) => {
+        const redwoodTomlPath = getConfigPath()
+        const configContent = fs.readFileSync(redwoodTomlPath, 'utf-8')
+        if (!configContent.includes('[experimental.opentelemetry]')) {
+          // Use string replace to preserve comments and formatting
+          writeFile(
+            redwoodTomlPath,
+            configContent.concat(
+              `\n[experimental.opentelemetry]\n\tenabled = true\n\tapiSdk = "${opentelemetryScriptPath}"`
+            ),
+            {
+              overwriteExisting: true, // redwood.toml always exists
+            }
+          )
+        } else {
+          task.skip(
+            `The [experimental.opentelemetry] config block already exists in your 'redwood.toml' file.`
+          )
+        }
+      },
+    },
+    addApiPackages(opentelemetryPackages),
+  ]
+
+  const prismaTasks = [
+    {
+      title: 'Setup Prisma OpenTelemetry...',
+      task: (_ctx, task) => {
+        const schemaPath = path.join(getPaths().api.db, 'schema.prisma') // TODO: schema file is already in getPaths()?
+        const schemaContent = fs.readFileSync(schemaPath, {
+          encoding: 'utf-8',
+          flag: 'r',
+        })
+
+        const clientConfig = schemaContent
+          .slice(
+            schemaContent.indexOf('generator client') +
+              'generator client'.length,
+            schemaContent.indexOf(
+              '}',
+              schemaContent.indexOf('generator client')
+            ) + 1
+          )
+          .trim()
+
+        const previewLineExists = clientConfig.includes('previewFeatures')
+        let newSchemaContents = schemaContent
+        if (previewLineExists) {
+          task.skip(
+            'Please add "tracing" to your previewFeatures in prisma.schema'
+          )
+        } else {
+          const newClientConfig = clientConfig.trim().split('\n')
+          newClientConfig.splice(
+            newClientConfig.length - 1,
+            0,
+            'previewFeatures = ["tracing"]'
+          )
+          newSchemaContents = newSchemaContents.replace(
+            clientConfig,
+            newClientConfig.join('\n')
+          )
+        }
+
+        return writeFile(schemaPath, newSchemaContents, {
+          overwriteExisting: true, // We'll likely always already have this file in the project
+        })
+      },
+    },
+    {
+      title: 'Regenerate the Prisma client...',
+      task: (_ctx, _task) => {
+        return execa(`yarn rw prisma generate`, {
+          stdio: 'inherit',
+          shell: true,
+          cwd: getPaths().web.base,
+        })
+      },
+    },
+  ]
+
+  const tasks = new Listr(
+    [
+      {
+        title: 'Confirmation',
+        task: async (_ctx, task) => {
+          const confirmation = await task.prompt({
+            type: 'Confirm',
+            message: 'OpenTelemetry support is experimental. Continue?',
+          })
+
+          if (!confirmation) {
+            throw new Error('User aborted')
+          }
+        },
+      },
+      ...opentelemetryTasks,
+      ...prismaTasks,
+      {
+        title: 'One more thing...',
+        task: (_ctx, task) => {
+          console.log(
+            `${chalk.hex('#ff845e')(
+              `------------------------------------------------------------------\n 🧪 ${chalk.green(
+                'Experimental Feature'
+              )} 🧪\n------------------------------------------------------------------`
+            )}`
+          )
+          console.log(
+            `Studio is an experimental feature, please find documentation and links to provide feedback at:\n -> https://community.redwoodjs.com/t/redwood-studio-experimental/4771`
+          )
+          console.log(
+            `${chalk.hex('#ff845e')(
+              '------------------------------------------------------------------'
+            )}\n`
+          )
+
+          task.title = `One more thing...\n
+          ${c.green('OpenTelemetry Support is still experimental!')}
+          ${c.green(
+            'Please let us know if you find bugs or quirks or if you have any feedback!'
+          )}
+          ${chalk.hex('#e8e8e8')(
+            'https://community.redwoodjs.com/t/opentelemetry-support-experimental/4772'
+          )}
+        `
+        },
+      },
+    ],
+    {
+      rendererOptions: { collapse: false, persistentOutput: true },
+      renderer: verbose ? 'verbose' : 'default',
+    }
+  )
+
+  try {
+    await tasks.run()
+  } catch (e) {
+    errorTelemetry(process.argv, e.message)
+    console.error(c.error(e.message))
+    process.exit(e?.exitCode || 1)
+  }
+}

packages/cli/src/commands/experimental/setup/opentelemetry/templates/opentelemetry.ts.template

@@ -0,0 +1,54 @@
+const { diag, DiagConsoleLogger, DiagLogLevel } = require('@opentelemetry/api')
+const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http')
+const { registerInstrumentations } = require('@opentelemetry/instrumentation')
+const {
+  FastifyInstrumentation,
+} = require('@opentelemetry/instrumentation-fastify')
+const { HttpInstrumentation } = require('@opentelemetry/instrumentation-http')
+const { Resource } = require('@opentelemetry/resources')
+const {
+  NodeTracerProvider,
+  SimpleSpanProcessor,
+} = require('@opentelemetry/sdk-trace-node')
+const {
+  SemanticResourceAttributes,
+} = require('@opentelemetry/semantic-conventions')
+const { PrismaInstrumentation } = require ('@prisma/instrumentation')
+
+// You may wish to set this to DiagLogLevel.DEBUG when you need to debug opentelemetry itself
+diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.INFO)
+
+const resource = Resource.default().merge(
+  new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'redwood-app',
+    [SemanticResourceAttributes.SERVICE_VERSION]: '0.0.0',
+  })
+)
+
+const exporter = new OTLPTraceExporter({
+  // Update this URL to point to where your OTLP compatible collector is listening
+  // The redwood development studio (`yarn rw exp studio`) can collect your telemetry at `http://127.0.0.1:4318/v1/traces`
+  url: 'http://127.0.0.1:4318/v1/traces',
+})
+
+// You may wish to switch to BatchSpanProcessor in production as it is the recommended choice for performance reasons
+const processor = new SimpleSpanProcessor(exporter)
+
+const provider = new NodeTracerProvider({
+  resource: resource,
+})
+provider.addSpanProcessor(processor)
+
+// Optionally register instrumentation libraries here
+registerInstrumentations({
+  tracerProvider: provider,
+  instrumentations: [
+    new HttpInstrumentation(),
+    new FastifyInstrumentation(),
+    new PrismaInstrumentation({
+      middleware: true,
+    })
+  ],
+})
+
+provider.register()