Sentry를 활용한 에러 모니터링 및 트래킹

import express from "express"; import * as Sentry from "@sentry/node"; import * as Tracing from "@sentry/tracing"; // or using CommonJS // const express = require('express'); // const Sentry = require('@sentry/node'); // const Tracing = require("@sentry/tracing"); const app = express(); Sentry.init({ dsn: "******", integrations: [ // enable HTTP calls tracing new Sentry.Integrations.Http({ tracing: true }), // enable Express.js middleware tracing new Tracing.Integrations.Express({ app }), ], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, }); // RequestHandler creates a separate execution context using domains, so that every// transaction/span/breadcrumb is attached to its own Hub instanceapp.use(Sentry.Handlers.requestHandler()); // TracingHandler creates a trace for every incoming request app.use(Sentry.Handlers.tracingHandler()); // All controllers should live here app.get("/", function rootHandler(req, res) { res.end("Hello world!"); }); // The error handler must be before any other error middleware and after all controllers app.use(Sentry.Handlers.errorHandler()); // Optional fallthrough error handler app.use(function onError(err, req, res, next) { // The error id is attached to `res.sentry` to be returned // and optionally displayed to the user for support. res.statusCode = 500; res.end(res.sentry + "\n"); }); app.listen(3000);

import React from "react"; import ReactDOM from "react-dom"; import * as Sentry from "@sentry/react"; import { Integrations } from "@sentry/tracing"; import App from "./App"; Sentry.init({ dsn: "******", integrations: [new Integrations.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, }); ReactDOM.render(<App />, document.getElementById("root")); // Can also use with React Concurrent Mode // ReactDOM.createRoot(document.getElementById('root')).render(<App />);

const webpack = require('webpack'); const SentryWebpackPlugin = require("@sentry/webpack-plugin"); module.exports = { mode: 'production', // other webpack configuration devtool: 'source-map', entry: './react.js', output: { filename: 'app.js' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env", "@babel/preset-react"], }, }, }, ], }, plugins: [ new SentryWebpackPlugin({ // sentry-cli configuration - can also be done directly through sentry-cli // see https://docs.sentry.io/product/cli/configuration/ for details authToken: "******", org: "org-name", project: "react-test", release: "HEAD", // other SentryWebpackPlugin configuration include: ".", ignore: ["node_modules", "webpack.config.js"], dryRun: false, }), ], };

import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter, Route } from 'react-router-dom'; import * as Sentry from "@sentry/react"; import { Integrations } from "@sentry/tracing"; Sentry.init({ dsn: "******", integrations: [new Integrations.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, }); const Home = () => { return ( <div> Hello React! </div> ) } const DebugReact = (props) => { return ( <div> Hello {props.name} <button onClick={methodDoesNotExist}>Break the world</button> </div> ); } const App = () => { return ( <BrowserRouter> <Route exact path="/react" component={Home}/> <Route path="/debug-react" component={DebugReact}/> </BrowserRouter> ); } ReactDOM.render(<App />, document.getElementById("root"));

const express = require('express'); const Sentry = require('@sentry/node'); const Tracing = require("@sentry/tracing"); require('express-async-errors'); const app = express(); // noinspection JSCheckFunctionSignatures Sentry.init({ dsn: "https://9a229fb3851d4752ab9d3be939512ea6@o1002481.ingest.sentry.io/5962851", integrations: [ // enable HTTP calls tracing // new Sentry.Integrations.Http({ tracing: true }), // enable Express.js middleware tracing new Tracing.Integrations.Express({ app }), ], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, }); // RequestHandler creates a separate execution context using domains, so that every // transaction/span/breadcrumb is attached to its own Hub instance app.use(Sentry.Handlers.requestHandler()); // TracingHandler creates a trace for every incoming request app.use(Sentry.Handlers.tracingHandler()); app.use(express.static('./dist')); // All controllers should live here app.get("/", (req, res) => { res.send("Hello world!"); }); app.get("/debug-sentry", () => { throw new Error("My first Sentry error!"); }); const RejectedPromise = async () => { return Promise.reject('test reject'); } app.get("/debug-next", async (req, res, next) => { return RejectedPromise() .then(() => { res.send("Success"); }) .catch((err) => { next(err); }) }); app.get("/debug-manual", (req, res) => { try { // noinspection ExceptionCaughtLocallyJS throw new Error("Manual Sentry error"); } catch (err) { Sentry.captureException(err); } res.send("Normal Result"); }); const resultStr = `<html lang="ko"> <head> <title></title> </head> <body> <div id="root"></div> <!--suppress HtmlUnknownTarget --> <script src="app.js"></script> </body> </html>`; app.get("/react", (req, res) => { res.send(resultStr); }) app.get("/debug-react", (req, res) => { res.send(resultStr); }) app.get('/favicon.ico', (req, res) => res.status(204)); // The error handler must be before any other error middleware and after all controllers app.use(Sentry.Handlers.errorHandler()); // Optional fallthrough error handlerapp.use((err, req, res, next) => { // The error id is attached to `res.sentry` to be returned // and optionally displayed to the user for support. // noinspection JSUnresolvedFunction,JSUnresolvedVariable res.send(res.sentry + "\n"); }); app.listen(8081);