Star us on GitHub
Star
Company
Open Source
Mission & Values
Getting Started
Overview
Fullstack Mapping
Backend / Server
Frontend / Client
Fullstack Frameworks
Session Replay
Console Messages
HTML iframe Recording
Identifying Users
Live Mode
Network DevTools
Privacy
Rage Clicks
Recording Network Requests and Responses
Session Sharing
Session Shortcut
Tracking Events
Versioning Sessions
Error Monitoring
Error Sharing
Grouping Errors
Sourcemaps
Versioning Errors
Product Features
Alerts
Analytics
Canvas
Comments
Cross Origin Iframe Recording
Digests
Environments
Frontend Observability
Keyboard Shortcuts
Performance Data
Segments
Session Search
Team Management
User Feedback
Web Vitals
WebGL
Integrations
Amplitude Integration
Clearbit Integration
ClickUp Integration
Discord Integration
Electron Support
Front Plugin
Height Integration
Intercom Integration
Linear Integration
Mixpanel Integration
React.js Integration
Segment Integration
Sentry Integration
Slack Integration
Vercel Integration
highlight.run Changelog
5.0.0
5.0.1
5.1.0
5.1.1
5.1.2
5.1.3
5.1.4
5.1.5
5.1.6
5.1.7
5.1.8
5.2.0
5.2.1
5.2.2
5.2.3
Tips
Content-Security-Policy
Local Development
Monkey Patches
Performance Impact
Proxying Highlight
Session Search Deep Linking
Troubleshooting
Upgrading Highlight
Menu
Docs / Welcome to Highlight / Getting Started / Backend / Server / tRPC Backend

tRPC Backend

Highlight's @highlight-run/node package includes a tRPC compatible error handler, which will automatically report backend errors to Highlight and link them to the frontend sessions that caused them.

Getting Started

In order to use the backend sdk, we recommend using one of our Client SDKs (with H.init()) so that errors are properly matched from your sessions to your backend errors. In your javascript environment, it would look like something like this:

H.init('<YOUR_PROJECT_ID>', { ... tracingOrigins: true, networkRecording: { enabled: true, recordHeadersAndBody: true, }, ... });
Copy

The full guide for initializing Highlight in your client can be found here and more information about setting up frontend/backend mapping for any stack can be found here.

Lastly, see H.init() for a full sdk reference.

Adding Highlight to your Backend

Import the @highlight-run/node package

# with npm npm install @highlight-run/node # with yarn yarn add @highlight-run/node
Copy
Handle errors

When you're exporting an API handler, use Handlers.trpcOnError as your onError function. Here's an example with tRPC + Next.js:

// pages/api/trpc/[trpc].ts import { createNextApiHandler } from '@trpc/server/adapters/next' import { Handlers } from '@highlight-run/node' export default createNextApiHandler({ // ... your config onError: Handlers.trpcOnError, })
Copy

If you're already doing your own error handling logic in a custom onError function, you can call this handler with the error and req arguments.

// pages/api/trpc/[trpc].ts import { createNextApiHandler } from '@trpc/server/adapters/next' import { Handlers } from '@highlight-run/node' export default createNextApiHandler({ // ... your config onError: ({ error, req }) => { // ... your own error handling logic here Handlers.trpcOnError({ error, req }) }, })
Copy
Verify

To view and resolve the recorded error, log into app.highlight.io/errors and open your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. You can also view frontend sessions where the error was thrown, and see the individual request which caused the error.