docs(observability): centralize catch-vs-on guidance

- Add catch-vs-on diagram to defense-in-depth recording section
- Replace duplicated errors-page block with a defense-in-depth link

Author: NeaByteLab

docs/error-handling/defense-in-depth.md

@@ -118,6 +118,8 @@ This is the safety net behind everything else. See [Process Protection](/getting
 
 Shaping a response and recording a failure are separate jobs. `router.catch()` controls what the client sees, while [`router.on()`](/middleware/observability/overview) records what happened for logs and metrics. Wire both for full coverage:
 
+![One failed request fans out to two independent hooks, where router.catch shapes the Response the client receives with a controlled status and body, and router.on records the same failure into logs and metrics without affecting the reply](/diagrams/obs-catch-vs-on.png)
+
 ```typescript twoslash
 import { Router } from '@neabyte/deserve'
 

docs/id/error-handling/defense-in-depth.md

@@ -118,6 +118,8 @@ Ini jaring pengaman di balik semua yang lain. Lihat [Proteksi Proses](/id/gettin
 
 Membentuk response dan mencatat kegagalan adalah tugas terpisah. `router.catch()` mengontrol apa yang dilihat klien, sementara [`router.on()`](/id/middleware/observability/overview) mencatat apa yang terjadi untuk log dan metrik. Pasang keduanya untuk cakupan penuh:
 
+![Satu request gagal menyebar ke dua hook independen, di mana router.catch membentuk Response yang diterima klien dengan status dan body terkontrol, dan router.on mencatat kegagalan yang sama ke log dan metrik tanpa memengaruhi balasan](/diagrams/obs-catch-vs-on.png)
+
 ```typescript twoslash
 import { Router } from '@neabyte/deserve'
 

docs/id/middleware/observability/errors.md

@@ -76,41 +76,4 @@ router.on((event) => {
 
 ## Memasangkan Dengan Penanganan Error
 
-Dua hook menangani tugas berbeda:
-
-- [`router.catch()`](/id/error-handling/object-details) membentuk response yang diterima klien.
-- `router.on()` mencatat apa yang terjadi untuk log dan metrik.
-
-Pakai `catch` untuk mengontrol balasan, dan `on` untuk mengamatinya. Pengaturan umum memasang keduanya:
-
-![Satu request gagal menyebar ke dua hook independen, di mana router.catch membentuk Response yang diterima klien dengan status dan body terkontrol, dan router.on mencatat kegagalan yang sama ke log dan metrik tanpa memengaruhi balasan](/diagrams/obs-catch-vs-on.png)
-
-```typescript twoslash
-import { Router } from '@neabyte/deserve'
-
-const router = new Router({
-  routesDir: './routes'
-})
-// ---cut---
-// Bentuk response klien
-router.catch((ctx, info) => {
-  return ctx.send.json(
-    {
-      error: 'Something went wrong'
-    },
-    {
-      status: info.statusCode
-    }
-  )
-})
-
-// Catat kegagalan untuk nanti
-router.on((event) => {
-  if (event.kind === 'request:error') {
-    const { url, error } = event.metadata as { url: string; error?: Error }
-    console.error(url, error?.message)
-  }
-})
-```
-
-Untuk response default ketika tidak ada handler diatur, lihat [Perilaku Default](/id/error-handling/default-behavior).
+Membentuk response dan mencatat kegagalan adalah dua tugas terpisah. [`router.catch()`](/id/error-handling/object-details) mengontrol apa yang dilihat klien, sementara `router.on()` mencatat apa yang terjadi untuk log dan metrik. Keduanya berjalan independen, dan cara memasang keduanya dibahas di [Pertahanan Berlapis](/id/error-handling/defense-in-depth#mencatat-di-seluruh-lapisan).

docs/middleware/observability/errors.md

@@ -76,41 +76,4 @@ router.on((event) => {
 
 ## Pairing With Error Handling
 
-Two hooks cover different jobs:
-
-- [`router.catch()`](/error-handling/object-details) shapes the response a client receives.
-- `router.on()` records what happened for logs and metrics.
-
-Use `catch` to control the reply, and `on` to observe it. A typical setup wires both:
-
-![One failed request fans out to two independent hooks, where router.catch shapes the Response the client receives with a controlled status and body, and router.on records the same failure into logs and metrics without affecting the reply](/diagrams/obs-catch-vs-on.png)
-
-```typescript twoslash
-import { Router } from '@neabyte/deserve'
-
-const router = new Router({
-  routesDir: './routes'
-})
-// ---cut---
-// Shape the client response
-router.catch((ctx, info) => {
-  return ctx.send.json(
-    {
-      error: 'Something went wrong'
-    },
-    {
-      status: info.statusCode
-    }
-  )
-})
-
-// Record the failure for later
-router.on((event) => {
-  if (event.kind === 'request:error') {
-    const { url, error } = event.metadata as { url: string; error?: Error }
-    console.error(url, error?.message)
-  }
-})
-```
-
-For the default response when no handler is set, see [Default Behavior](/error-handling/default-behavior).
+Shaping a response and recording a failure are separate jobs. [`router.catch()`](/error-handling/object-details) controls what the client sees, while `router.on()` records what happened for logs and metrics. The two run independently, and wiring both is covered in [Defense in Depth](/error-handling/defense-in-depth#recording-across-layers).