Nuxt 3 + Supabase：Chrome控制台刷新过快无法查看登录错误

安全阿岳

2026-7-3

Nuxt 3 + Supabase 登录错误日志被刷新覆盖的问题解决思路

问题场景

在Nuxt 3项目中用Supabase实现邮箱密码登录，代码如下：

const signIn = async () => {
    const { data, error } = await client.auth.signInWithPassword({ email: email.value, password: password.value })
    //emits('submit')
    console.log(data)
 
    if (error) {
        console.error(error);
        return;
    }     
}

登录出错时，Chrome控制台的错误信息仅短暂显示，页面随即刷新，控制台被Suspense和Nuxt DevTools相关内容覆盖，无法查看错误详情。

解决思路

阻断页面自动刷新触发源：检查是否存在隐性刷新逻辑，比如注释掉的emits('submit')，若父组件监听submit事件后执行了页面刷新（比如表单默认提交行为），需手动阻止。可在登录按钮的点击事件中添加@click.prevent，或确保signIn函数不会触发表单默认提交动作。

把错误信息渲染到页面：别只依赖控制台输出，定义响应式变量存储错误信息，直接在页面展示：

const errorMessage = ref('')
const signIn = async () => {
  errorMessage.value = ''
  const { data, error } = await client.auth.signInWithPassword({ email: email.value, password: password.value })
  if (error) {
      errorMessage.value = error.message
      console.error(error)
      return;
  }     
}

模板中添加展示代码：

<p v-if="errorMessage" class="text-red-500">{{ errorMessage }}</p>

开启Chrome控制台日志保留：在Chrome开发者工具的控制台面板，勾选「Preserve log」（保留日志）选项，页面刷新后之前的日志不会被清空，可回溯查看错误信息。
排查Suspense组件影响：若页面使用了Suspense组件，登录错误可能触发其状态更新导致页面重渲染。可暂时移除Suspense组件测试，或检查其包裹的内容是否存在异常触发刷新的逻辑。
利用Nuxt内置错误处理：使用Nuxt 3的useError()钩子捕获错误，或在app.vue中配置全局错误页面，让错误被捕获并展示，避免页面直接刷新。