feat: provide better error message for magicast, close #395

Author: antfu

packages/devtools/client/pages/modules/timeline.vue

@@ -13,10 +13,19 @@ const Dialog = createTemplatePromise<boolean, [string, string]>()
 const openInEditor = useOpenInEditor()
 
 async function showPopup() {
-  const [source, modified] = await rpc.enableTimeline(true)
-  if (!await Dialog.start(source, modified))
-    return
-  await rpc.enableTimeline(false)
+  try {
+    const [source, modified] = await rpc.enableTimeline(true)
+    if (!await Dialog.start(source, modified))
+      return
+    await rpc.enableTimeline(false)
+  }
+  catch {
+    showNotification({
+      message: 'Failed to enable timeline automatically. Check the terminal for more details.',
+      icon: 'i-carbon-warning',
+      classes: 'text-red',
+    })
+  }
 }
 </script>
 

packages/devtools/src/server-rpc/index.ts

@@ -4,7 +4,9 @@ import type { ChannelOptions } from 'birpc'
 
 import { parse, stringify } from 'flatted'
 import type { Nuxt } from 'nuxt/schema'
+import { colors } from 'consola/utils'
 import type { Plugin } from 'vite'
+import { logger } from '@nuxt/kit'
 import type { ClientFunctions, ModuleOptions, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
 import { WS_EVENT_NAME } from '../constant'
 import { getDevAuthToken } from '../dev-auth'
@@ -39,7 +41,10 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
         return extendedRpcMap.get(namespace)?.[fnName]
       },
       onError(error, name) {
-        console.error(`[nuxt-devtools] RPC error on executing "${name}":`, error)
+        logger.error(
+          colors.yellow(`[nuxt-devtools] RPC error on executing "${colors.bold(name)}":\n`)
+          + colors.red(error?.message || ''),
+        )
       },
       timeout: 120_000,
     },

packages/devtools/src/server-rpc/npm.ts

@@ -7,6 +7,7 @@ import { parseModule } from 'magicast'
 import { addNuxtModule, getDefaultExportOptions } from 'magicast/helpers'
 import { checkForUpdateOf } from '../npm'
 import type { NpmCommandOptions, NpmCommandType, NuxtDevtoolsServerContext, PackageUpdateInfo, ServerFunctions } from '../types'
+import { magicastGuard } from '../utils/magicast'
 
 export function setupNpmRPC({ nuxt, ensureDevAuthToken }: NuxtDevtoolsServerContext) {
   let detectPromise: Promise<PackageManager | undefined> | undefined
@@ -97,11 +98,13 @@ export function setupNpmRPC({ nuxt, ensureDevAuthToken }: NuxtDevtoolsServerCont
       let source = latestGenerated
       if (source == null)
         source = await fs.readFile(filepath, 'utf-8')
-      const mod = parseModule(source, { sourceFileName: filepath })
 
-      addNuxtModule(mod, name)
+      const generated = await magicastGuard(async () => {
+        const mod = parseModule(source!, { sourceFileName: filepath })
+        addNuxtModule(mod, name)
 
-      const generated = mod.generate().code
+        return mod.generate().code
+      })
       const processId = `nuxt:add-module:${name}`
 
       if (!dry) {
@@ -153,20 +156,22 @@ export function setupNpmRPC({ nuxt, ensureDevAuthToken }: NuxtDevtoolsServerCont
 
       const filepath = nuxt.options._nuxtConfigFile
       const source = await fs.readFile(filepath, 'utf-8')
-      const mod = parseModule(source, { sourceFileName: filepath })
-
-      // TODO: remove module from config
-      // removeNuxtModule(mod, name)
-      const config = getDefaultExportOptions(mod)
-      config.modules ||= []
-      if (config.modules.includes(name)) {
-        Object.values(config.modules).forEach((value, index) => {
-          if (value === name)
-            config.modules.splice(index - 1, 1)
-        })
-      }
+      const generated = await magicastGuard(async () => {
+        const mod = parseModule(source, { sourceFileName: filepath })
+
+        // TODO: remove module from config
+        // removeNuxtModule(mod, name)
+        const config = getDefaultExportOptions(mod)
+        config.modules ||= []
+        if (config.modules.includes(name)) {
+          Object.values(config.modules).forEach((value, index) => {
+            if (value === name)
+              config.modules.splice(index - 1, 1)
+          })
+        }
 
-      const generated = mod.generate().code
+        return mod.generate().code
+      })
 
       const processId = `nuxt:remove-module:${name}`
 

packages/devtools/src/server-rpc/timeline.ts

@@ -2,21 +2,24 @@ import fs from 'node:fs/promises'
 import { parseModule } from 'magicast'
 import { getDefaultExportOptions } from 'magicast/helpers'
 import type { NuxtDevtoolsServerContext, ServerFunctions } from '../types'
+import { magicastGuard } from '../utils/magicast'
 
 export function setupTimelineRPC({ nuxt }: NuxtDevtoolsServerContext) {
   return {
     async enableTimeline(dry: boolean) {
       const filepath = nuxt.options._nuxtConfigFile
       const source = await fs.readFile(filepath, 'utf-8')
-      const mod = await parseModule(source, { sourceFileName: filepath })
+      const generated = await magicastGuard(async () => {
+        const mod = parseModule(source, { sourceFileName: filepath })
 
-      const options = getDefaultExportOptions(mod)
+        const options = getDefaultExportOptions(mod)
 
-      options.devtools = options.devtools || {}
-      options.devtools.timeline = options.devtools.timeline || {}
-      options.devtools.timeline.enabled = true
+        options.devtools = options.devtools || {}
+        options.devtools.timeline = options.devtools.timeline || {}
+        options.devtools.timeline.enabled = true
 
-      const generated = mod.generate().code
+        return mod.generate().code
+      }, '\nYou can enable timeline manually by adding `devtools: { timeline: { enabled: true } }`')
 
       if (!dry) {
         await fs.writeFile(filepath, generated, 'utf-8')

packages/devtools/src/utils/magicast.ts

@@ -0,0 +1,15 @@
+import { logger } from '@nuxt/kit'
+
+export async function magicastGuard(fn: (() => Promise<string>), message = '') {
+  let generated: string | undefined
+
+  try {
+    generated = await fn()
+  }
+  catch (e) {
+    logger.error(e)
+    throw new Error(`Magicast failed to modify Nuxt config automatically. Maybe the config are composed too dynamically that we failed to statically analyze it. ${message}`)
+  }
+
+  return generated
+}