How to connect monitoring tools to Replit

Before integrating any monitoring tool, create accounts on the services you plan to use. For Sentry, sign up at sentry.io and create a new project for Node.js or your language of choice. Copy the DSN (Data Source Name) string from the project settings. For LogRocket, sign up at logrocket.com and create a new project to get your App ID. Store both values in Replit Secrets immediately rather than pasting them into code.

Open the Secrets tool from the left sidebar Tools dock. Add each monitoring credential as an App Secret. Create SENTRY_DSN with your Sentry DSN string as the value, and LOGROCKET_APP_ID with your LogRocket App ID. These values are encrypted with AES-256 and never appear in your source code. Remember to also add these same secrets in the Deployments pane configuration before publishing, because workspace secrets do not transfer to deployments automatically.

Open the Shell terminal and install the Sentry SDK for your language. For Node.js, run npm install @sentry/node. Initialize Sentry as early as possible in your application entry point, before any other imports that might throw errors. Sentry automatically captures unhandled exceptions and unhandled promise rejections. You can also capture specific errors manually with Sentry.captureException. In production, Sentry groups similar errors, tracks frequency, and sends email or Slack alerts.

1// src/server.js - Initialize Sentry before other imports
2import * as Sentry from '@sentry/node';
3
4Sentry.init({
5  dsn: process.env.SENTRY_DSN,
6  environment: process.env.REPLIT_DEPLOYMENT === '1'
7    ? 'production'
8    : 'development',
9  tracesSampleRate: 0.2, // Sample 20% of transactions
10});
11
12import express from 'express';
13
14const app = express();
15
16// Sentry request handler must be first middleware
17app.use(Sentry.Handlers.requestHandler());
18
19// Your routes here
20app.get('/api/data', (req, res) => {
21  // If this throws, Sentry captures it automatically
22  res.json({ status: 'ok' });
23});
24
25// Sentry error handler must be before other error handlers
26app.use(Sentry.Handlers.errorHandler());
27
28app.listen(3000, '0.0.0.0');

For React frontend apps, install LogRocket from the Shell with npm install logrocket. Initialize it in your main React entry file before rendering the app. LogRocket records user sessions including clicks, scrolls, network requests, and console output. You can replay these sessions in the LogRocket dashboard to see exactly what the user experienced when an error occurred. Since LogRocket runs in the browser, the App ID is exposed in client-side code, but this is safe because LogRocket App IDs are designed to be public.

1// src/main.tsx - Initialize LogRocket for frontend
2import React from 'react';
3import ReactDOM from 'react-dom/client';
4import LogRocket from 'logrocket';
5import App from './App';
6import './index.css';
7
8// Initialize LogRocket only in production
9if (import.meta.env.PROD) {
10  const appId = import.meta.env.VITE_LOGROCKET_APP_ID;
11  if (appId) {
12    LogRocket.init(appId);
13  }
14}
15
16ReactDOM.createRoot(document.getElementById('root')!).render(
17  <React.StrictMode>
18    <App />
19  </React.StrictMode>
20);

External uptime monitoring services like UptimeRobot, Pingdom, or Better Uptime need an HTTP endpoint to check periodically. Create a dedicated health check route that returns a 200 status when the app is healthy. Include useful metadata like uptime, memory usage, and database connectivity status. This endpoint also serves as Replit's deployment health check, which must respond within 5 seconds. Keep it lightweight with no heavy database queries or external API calls.

1import pg from 'pg';
2
3const pool = new pg.Pool({
4  connectionString: process.env.DATABASE_URL,
5});
6
7app.get('/health', async (req, res) => {
8  const health = {
9    status: 'ok',
10    uptime: process.uptime(),
11    timestamp: new Date().toISOString(),
12    memory: {
13      heapUsed: Math.round(process.memoryUsage().heapUsed / 1024 / 1024),
14      heapTotal: Math.round(process.memoryUsage().heapTotal / 1024 / 1024),
15    },
16    database: 'unknown',
17  };
18
19  try {
20    await pool.query('SELECT 1');
21    health.database = 'connected';
22  } catch {
23    health.database = 'disconnected';
24    health.status = 'degraded';
25  }
26
27  const statusCode = health.status === 'ok' ? 200 : 503;
28  res.status(statusCode).json(health);
29});

Replit Console shows standard output, but structured JSON logging makes it much easier to search and filter logs in production. Replace console.log with a simple logger that outputs JSON with timestamps, log levels, and contextual data. This format works with log aggregation tools if you send logs to an external service. For most Replit projects, Console output combined with Sentry error tracking is sufficient, but structured logs help when debugging complex issues that do not throw errors.

1// src/logger.js - Simple structured logger
2function createLogger(service) {
3  const log = (level, message, data = {}) => {
4    const entry = {
5      timestamp: new Date().toISOString(),
6      level,
7      service,
8      message,
9      ...data,
10    };
11    console.log(JSON.stringify(entry));
12  };
13
14  return {
15    info: (msg, data) => log('info', msg, data),
16    warn: (msg, data) => log('warn', msg, data),
17    error: (msg, data) => log('error', msg, data),
18  };
19}
20
21export default createLogger;
22
23// Usage:
24// import createLogger from './logger.js';
25// const logger = createLogger('api');
26// logger.info('Request received', { path: '/api/data', method: 'GET' });