<p data-line="0" class="code-line">Remixのプロジェクトを作成した直後に、開発環境で404になるページにアクセスすると以下のログが出力されます。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="2">Error: No route matches URL "/foo" &lt;-- (1)
    at getInternalRouterError (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+router@1.15.1/node_modules/@remix-run/router/dist/router.cjs.js:4501:59)
    at Object.query (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+router@1.15.1/node_modules/@remix-run/router/dist/router.cjs.js:3331:19)
    at handleDocumentRequestRR (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+server-runtime@2.7.0_typescript@5.5.4/node_modules/@remix-run/server-runtime/dist/server.js:184:35)
    at requestHandler (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+server-runtime@2.7.0_typescript@5.5.4/node_modules/@remix-run/server-runtime/dist/server.js:108:24)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async nodeHandler (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+dev@2.7.0_@remix-run+serve@2.7.0_typescript@5.5.4_vite@5.4.2/node_modules/@remix-run/dev/dist/vite/plugin.js:736:27)
    at async /home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+dev@2.7.0_@remix-run+serve@2.7.0_typescript@5.5.4_vite@5.4.2/node_modules/@remix-run/dev/dist/vite/plugin.js:739:15
No routes matched location "/foo"  &lt;-- (2)
ErrorResponseImpl { &lt;-- (3)
  status: 404,
  statusText: 'Not Found',
  internal: true,
  data: 'Error: No route matches URL "/foo"',
  error: Error: No route matches URL "/foo"
      at getInternalRouterError (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+router@1.15.1/node_modules/@remix-run/router/dist/router.cjs.js:4501:59)
      at Object.query (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+router@1.15.1/node_modules/@remix-run/router/dist/router.cjs.js:3331:19)
      at handleDocumentRequestRR (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+server-runtime@2.7.0_typescript@5.5.4/node_modules/@remix-run/server-runtime/dist/server.js:184:35)
      at requestHandler (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+server-runtime@2.7.0_typescript@5.5.4/node_modules/@remix-run/server-runtime/dist/server.js:108:24)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async nodeHandler (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+dev@2.7.0_@remix-run+serve@2.7.0_typescript@5.5.4_vite@5.4.2/node_modules/@remix-run/dev/dist/vite/plugin.js:736:27)
      at async /home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+dev@2.7.0_@remix-run+serve@2.7.0_typescript@5.5.4_vite@5.4.2/node_modules/@remix-run/dev/dist/vite/plugin.js:739:15
}
</code></pre></div><aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="29" class="code-line">この記事はRemixのバージョン2.11.2で動作確認しています。</p>
</div></aside>
<p data-line="33" class="code-line">だいぶ長いエラーのように見えますが、<code>&lt;--</code>で示している通り別々の3つのログが連続して表示されています。今回はそれぞれが出力される要因について調べました。</p>
<p data-line="35" class="code-line">なお、この記事に書いている内容はここにほぼ同じことが書いています。</p>
<p data-line="37" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fb99c1748e6bb" src="https://embed.zenn.studio/card#zenn-embedded__fb99c1748e6bb" data-content="https%3A%2F%2Fgithub.com%2Fremix-run%2Fremix%2Fissues%2F9473%23issuecomment-2127211524" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/remix-run/remix/issues/9473#issuecomment-2127211524" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/remix-run/remix/issues/9473#issuecomment-2127211524</a></p>
<h2 id="(1)-error%3A-no-route-matches-url-%22%2Ffoo%22" data-line="39" class="code-line">
<a class="header-anchor-link" href="#(1)-error%3A-no-route-matches-url-%22%2Ffoo%22" aria-hidden="true"></a> (1) Error: No route matches URL "/foo"</h2>
<div class="code-block-container"><pre><code class="code-line" data-line="40">Error: No route matches URL "/foo"
    at getInternalRouterError (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+router@1.15.1/node_modules/@remix-run/router/dist/router.cjs.js:4501:59)
    at Object.query (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+router@1.15.1/node_modules/@remix-run/router/dist/router.cjs.js:3331:19)
    at handleDocumentRequestRR (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+server-runtime@2.7.0_typescript@5.5.4/node_modules/@remix-run/server-runtime/dist/server.js:184:35)
    at requestHandler (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+server-runtime@2.7.0_typescript@5.5.4/node_modules/@remix-run/server-runtime/dist/server.js:108:24)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async nodeHandler (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+dev@2.7.0_@remix-run+serve@2.7.0_typescript@5.5.4_vite@5.4.2/node_modules/@remix-run/dev/dist/vite/plugin.js:736:27)
    at async /home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+dev@2.7.0_@remix-run+serve@2.7.0_typescript@5.5.4_vite@5.4.2/node_modules/@remix-run/dev/dist/vite/plugin.js:739:15
</code></pre></div><h3 id="%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E5%8E%9F%E5%9B%A0" data-line="50" class="code-line">
<a class="header-anchor-link" href="#%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E5%8E%9F%E5%9B%A0" aria-hidden="true"></a> 表示される原因</h3>
<p data-line="51" class="code-line">サーバー側でエラーが発生した際にremixがログを出力するためです。実装はこのあたりでした。</p>
<p data-line="53" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__d3bcb5647b904" src="https://embed.zenn.studio/github#zenn-embedded__d3bcb5647b904" data-content="https%3A%2F%2Fgithub.com%2Fremix-run%2Fremix%2Fblob%2F8f38118e44298d609224c6074ae6519d385196f1%2Fpackages%2Fremix-server-runtime%2Fserver.ts%23L459-L467" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/remix-run/remix/blob/8f38118e44298d609224c6074ae6519d385196f1/packages/remix-server-runtime/server.ts#L459-L467" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/remix-run/remix/blob/8f38118e44298d609224c6074ae6519d385196f1/packages/remix-server-runtime/server.ts#L459-L467</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__4f48c6cedb4df" src="https://embed.zenn.studio/github#zenn-embedded__4f48c6cedb4df" data-content="https%3A%2F%2Fgithub.com%2Fremix-run%2Fremix%2Fblob%2F8f38118e44298d609224c6074ae6519d385196f1%2Fpackages%2Fremix-server-runtime%2Fserver.ts%23L69-L78" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/remix-run/remix/blob/8f38118e44298d609224c6074ae6519d385196f1/packages/remix-server-runtime/server.ts#L69-L78" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/remix-run/remix/blob/8f38118e44298d609224c6074ae6519d385196f1/packages/remix-server-runtime/server.ts#L69-L78</a></p>
<h3 id="%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%81%AA%E3%81%84%E6%96%B9%E6%B3%95" data-line="56" class="code-line">
<a class="header-anchor-link" href="#%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%81%AA%E3%81%84%E6%96%B9%E6%B3%95" aria-hidden="true"></a> 表示させない方法</h3>
<p data-line="57" class="code-line">この関数はentry.server.tsxで<code>handleError</code>という関数を定義すると動作を上書きできます。公式ドキュメントはこちら。</p>
<p data-line="59" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__11f17b1a0a8db" src="https://embed.zenn.studio/card#zenn-embedded__11f17b1a0a8db" data-content="https%3A%2F%2Fremix.run%2Fdocs%2Fen%2Fmain%2Ffile-conventions%2Fentry.server%23handleerror" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://remix.run/docs/en/main/file-conventions/entry.server#handleerror" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://remix.run/docs/en/main/file-conventions/entry.server#handleerror</a></p>
<p data-line="61" class="code-line">以下のような感じで実装すると良さそうです。</p>
<div class="code-block-container"><pre class="language-ts"><code class="language-ts code-line" data-line="63"><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">handleError</span><span class="token punctuation">(</span>
  error<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> request <span class="token punctuation">}</span><span class="token operator">:</span> LoaderFunctionArgs <span class="token operator">|</span> ActionFunctionArgs<span class="token punctuation">,</span>
<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>
    <span class="token punctuation">(</span><span class="token function">isRouteErrorResponse</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> error<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token number">404</span><span class="token punctuation">)</span> <span class="token operator">||</span>
    request<span class="token punctuation">.</span>signal<span class="token punctuation">.</span>aborted
  <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p data-line="78" class="code-line">リクエストが中止された時はログを出さない方が良いとのことなので、<code>request.signal.aborted</code>も見ています。</p>
<blockquote data-line="80" class="code-line">
<p data-line="80" class="code-line">Note that you generally want to avoid logging when the request was aborted, since Remix's cancellation and race-condition handling can cause a lot of requests to be aborted.<br>
<a href="https://remix.run/docs/en/main/file-conventions/entry.server#handleerror" target="_blank" rel="nofollow noopener noreferrer">https://remix.run/docs/en/main/file-conventions/entry.server#handleerror</a></p>
</blockquote>
<h2 id="(2)-no-routes-matched-location-%22%2Ffoo%22" data-line="83" class="code-line">
<a class="header-anchor-link" href="#(2)-no-routes-matched-location-%22%2Ffoo%22" aria-hidden="true"></a> (2) No routes matched location "/foo"</h2>
<div class="code-block-container"><pre><code class="code-line" data-line="84">No routes matched location "/foo" 
</code></pre></div><h3 id="%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E5%8E%9F%E5%9B%A0-1" data-line="87" class="code-line">
<a class="header-anchor-link" href="#%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E5%8E%9F%E5%9B%A0-1" aria-hidden="true"></a> 表示される原因</h3>
<p data-line="88" class="code-line">react-routerが一致しないルートに対してログを出力しているためです。実装はこれ。</p>
<p data-line="90" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__353bfed704d8b" src="https://embed.zenn.studio/github#zenn-embedded__353bfed704d8b" data-content="https%3A%2F%2Fgithub.com%2Fremix-run%2Freact-router%2Fblob%2F9afac15d8cbe30b37d0f9e8b89c9f1e430dfe35a%2Fpackages%2Freact-router%2Flib%2Fhooks.tsx%23L450-L454" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/remix-run/react-router/blob/9afac15d8cbe30b37d0f9e8b89c9f1e430dfe35a/packages/react-router/lib/hooks.tsx#L450-L454" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/remix-run/react-router/blob/9afac15d8cbe30b37d0f9e8b89c9f1e430dfe35a/packages/react-router/lib/hooks.tsx#L450-L454</a></p>
<h3 id="%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%81%AA%E3%81%84%E6%96%B9%E6%B3%95-1" data-line="92" class="code-line">
<a class="header-anchor-link" href="#%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%81%AA%E3%81%84%E6%96%B9%E6%B3%95-1" aria-hidden="true"></a> 表示させない方法</h3>
<p data-line="93" class="code-line">開発環境でのみ出るログのようなので、本番環境では出ません。設定不要。</p>
<h2 id="(3)-errorresponseimpl" data-line="95" class="code-line">
<a class="header-anchor-link" href="#(3)-errorresponseimpl" aria-hidden="true"></a> (3) ErrorResponseImpl</h2>
<div class="code-block-container"><pre><code class="code-line" data-line="96">ErrorResponseImpl {
  status: 404,
  statusText: 'Not Found',
  internal: true,
  data: 'Error: No route matches URL "/foo"',
  error: Error: No route matches URL "/foo"
      at getInternalRouterError (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+router@1.15.1/node_modules/@remix-run/router/dist/router.cjs.js:4501:59)
      at Object.query (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+router@1.15.1/node_modules/@remix-run/router/dist/router.cjs.js:3331:19)
      at handleDocumentRequestRR (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+server-runtime@2.7.0_typescript@5.5.4/node_modules/@remix-run/server-runtime/dist/server.js:184:35)
      at requestHandler (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+server-runtime@2.7.0_typescript@5.5.4/node_modules/@remix-run/server-runtime/dist/server.js:108:24)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async nodeHandler (/home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+dev@2.7.0_@remix-run+serve@2.7.0_typescript@5.5.4_vite@5.4.2/node_modules/@remix-run/dev/dist/vite/plugin.js:736:27)
      at async /home/ubuntu/playground/remix-404-error/node_modules/.pnpm/@remix-run+dev@2.7.0_@remix-run+serve@2.7.0_typescript@5.5.4_vite@5.4.2/node_modules/@remix-run/dev/dist/vite/plugin.js:739:15
}
</code></pre></div><h3 id="%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E5%8E%9F%E5%9B%A0-2" data-line="112" class="code-line">
<a class="header-anchor-link" href="#%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E5%8E%9F%E5%9B%A0-2" aria-hidden="true"></a> 表示される原因</h3>
<p data-line="113" class="code-line">RemixがReactでのエラーに対してErrorBoundaryを表示する時にログを表示するためです。実装は多分これです。</p>
<p data-line="115" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__fb532bbf33783" src="https://embed.zenn.studio/github#zenn-embedded__fb532bbf33783" data-content="https%3A%2F%2Fgithub.com%2Fremix-run%2Fremix%2Fblob%2F8f38118e44298d609224c6074ae6519d385196f1%2Fpackages%2Fremix-react%2FerrorBoundaries.tsx%23L72-L79" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/remix-run/remix/blob/8f38118e44298d609224c6074ae6519d385196f1/packages/remix-react/errorBoundaries.tsx#L72-L79" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/remix-run/remix/blob/8f38118e44298d609224c6074ae6519d385196f1/packages/remix-react/errorBoundaries.tsx#L72-L79</a></p>
<h3 id="%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%81%AA%E3%81%84%E6%96%B9%E6%B3%95-2" data-line="117" class="code-line">
<a class="header-anchor-link" href="#%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%81%AA%E3%81%84%E6%96%B9%E6%B3%95-2" aria-hidden="true"></a> 表示させない方法</h3>
<p data-line="118" class="code-line"><code>ErrorBoundary</code>という名前でルートファイルからコンポーネントをexportするとデフォルトの挙動を上書きできます。<a href="https://remix.run/docs/en/main/file-conventions/root" target="_blank" rel="nofollow noopener noreferrer">root.tsx</a>などに適当な内容で作成しましょう。</p>
<p data-line="120" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__3321dffa92db3" src="https://embed.zenn.studio/card#zenn-embedded__3321dffa92db3" data-content="https%3A%2F%2Fremix.run%2Fdocs%2Fen%2Fmain%2Froute%2Ferror-boundary" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://remix.run/docs/en/main/route/error-boundary" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://remix.run/docs/en/main/route/error-boundary</a></p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="122" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<ul data-line="123" class="code-line">
<li data-line="123" class="code-line">entry.server.tsxに<code>handleError</code>を書く</li>
<li data-line="124" class="code-line">root.tsxに<code>ErrorBoundary</code>を書く</li>
<li data-line="125" class="code-line">本番環境にする</li>
</ul>
<p data-line="127" class="code-line">以上でログを抑えられます。<a href="https://github.com/remix-run/remix/issues/9473#issuecomment-2127211524" target="_blank" rel="nofollow noopener noreferrer">Issueへのメンテナからのコメント</a>を見る限り意図した挙動のようですが、ちょっと分かりにくいと思いました。</p>
<p data-line="129" class="code-line">404ページでのエラーログが煩わしくなってきた時は参考にしてみてください。</p>


Remixは404ページで最大3つもログを出す

Discussion