Browser
Server
Native OpenTelemetry
Fullstack Frameworks
Overview
Self Host & Local Dev
Menu
Hono Quick Start
Learn how to set up highlight.io in your Hono application.
1
Configure client-side Highlight. (optional)
If you're using Highlight on the frontend for your application, make sure you've initialized it correctly and followed the fullstack mapping guide.
2
Install the relevant Highlight SDK(s).
Install @highlight-run/hono with your package manager.
npm install --save @highlight-run/hono
3
Add the Hono Highlight middleware
Use the Hono SDK in your response handler. The middleware automatically traces all requests, reports exceptions, and captures console logs to Highlight. It integrates seamlessly with Hono's middleware system for minimal configuration.
import { Hono } from 'hono'
import { highlightMiddleware } from '@highlight-run/hono'
const app = new Hono()
// Initialize the Highlight middleware
app.use(highlightMiddleware({
projectID: '<YOUR_PROJECT_ID>'
}))
// Your routes
app.get('/', (c) => c.text('Hello Hono!'))
// Errors will be automatically caught and reported
app.get('/error', (c) => {
throw new Error('Example error!')
return c.text('This will not be reached')
})
export default app
4
Verify that your SDK is reporting errors.
You'll want to throw an exception in one of your hono handlers. Access the API handler and make sure the error shows up in Highlight.
const app = new Hono()
app.use(highlightMiddleware({ projectID: '<YOUR_PROJECT_ID>' }))
app.get('/error', (c) => {
throw new Error('example error!')
return c.text('Error route')
})
5
Verify your backend logs are being recorded.
Visit the highlight logs portal and check that backend logs are coming in.
6
Verify your backend traces are being recorded.
Visit the highlight traces portal and check that backend traces are coming in.