Zenn
😂

React/Next.jsに触れてみる Vol.6

2025/01/22に公開
Next.js
React
Liveblocks
tech

Googleドキュメントクローン制作

  • 参考教材：Code With Antonio（Youtube）

https://www.youtube.com/watch?v=gq2bbDmSokU

進捗

  • googleドキュメントを複製する中でReactとNext.jsを学ぶ　6回目
  • 本日の進捗(Timestamps)
    07:47:12 Room permissions

思ったこと

  • 今日はひたすらこのエラーに悩まされた
Console Error

[Liveblocks "Authentication failed: Failed to authenticate: reason not provided in auth response (500 returned by POST /api/liveblocks-auth)"
  • 該当箇所は、liveblocksの認証を「publicApiKey」から「authEndpoint」に変更する際に起きていた
    (変更前)
    export function Room({ children }: { children:   ReactNode }) {
  const params = useParams();

  return (
    <LiveblocksProvider publicApiKey={"hogehoge"}>
    (変更後)
    export function Room({ children }: { children:   ReactNode }) {
  const params = useParams();

  return (
    <LiveblocksProvider
    throttle={16}
    authEndpoint="/api/liveblocks-auth"
    >

エラーが解消した修正

  • convex/documents.tsのgetByIdクエリの変更で解消

    (変更前)

      export const getById = query({
  args: { id: v.id("documents") },
  handler: async (ctx, { id }) => {
    return await ctx.db.get(id);
  },
});

    (変更後)

      export const getById = query({
  args: { id: v.id("documents") },
  handler: async (ctx, { id }) => {
    const document = await ctx.db.get(id);

    if (!document) {
      throw new ConvexError("Document not found");
    }

    return document;
  },
});

エラーが解消された理由

  1. 明示的なエラーハンドリング:
    • 変更前は、ドキュメントが見つからない場合にnullを返していた
    • 変更後は、ドキュメントが見つからない場合にConvexErrorをスローする
  2. エラーの伝播:
    • Liveblocksの認証エンドポイントは、Convexからの明確なエラーメッセージを受け取れるようになった
    • nullの代わりに具体的なエラーが返されることで、適切なエラーハンドリングが可能に
  3. 型の安全性:
    • documentがnullでないことが保証される
    • これにより、後続の処理（Liveblocksの認証など）でより安全な型チェックが可能に

エラー解消のメカニズム

  1. リクエストの流れ:
    Client -> Liveblocks認証 -> Convex getById -> 結果
  2. エラーハンドリングの改善:
    • 変更前：ドキュメントが見つからない場合、nullが返され、それが適切に処理されていなかった
    • 変更後：明示的なConvexErrorがスローされ、適切なエラーメッセージとともに処理される
  3. 型の保証:
    • documentが存在することが保証されるため、後続の処理で型エラーが発生しにくくなる
    • これにより、Liveblocksの認証処理がより安定して動作する

この修正により、エラーハンドリングがより堅牢になり、型の安全性が向上し、結果としてLiveblocksの認証エラーが解消されたと考えられる

  • エラー解消方法に気づいたきっかけは、サンプルコードとひたすら比較したら違う箇所があったという点
  • 自分でここが怪しいと思ってすぐに解決できるようにもっとデバッグの精度を上げていきたいと切に思った

Discussion