TL;DR: С помощью библиотеки smapped-traces и OpenTelemetry вы можете захватывать ошибки в браузере и разрешать их против ваших source maps на собственных серверах, без необходимости использовать Sentry.
Введение: контекст и актуальность
В продакшене фронтенд-код обычно обфусцирован — преобразован в машинно-читаемый, но не человекопонятный JavaScript. Это делает код более безопасным, но создает проблему: когда что-то ломается в браузере пользователя, stack trace становится практически нечитаемым. В разработке же код остается человекопонятным, и ошибки указывают непосредственно на нужный файл, функцию и строку.
Sentry долгое время решал эту проблему, предоставляя возможность разрешать source maps на своих серверах. Однако теперь вы можете сделать это самостоятельно с помощью библиотеки smapped-traces и OpenTelemetry.
Основная часть с примерами кода
Установка и настройка smapped-traces
Для начала установите библиотеку smapped-traces:
npm install smapped-traces
Затем настройте OpenTelemetry для захвата ошибок:
import { TraceExporter } from 'smapped-traces';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
const provider = new WebTracerProvider();
provider.addSpanProcessor(new BatchSpanProcessor(new TraceExporter()));
provider.register();
Захват ошибок
Теперь вы можете захватывать ошибки в браузере и отправлять их на ваш сервер:
window.addEventListener('error', (event) => {
const span = provider.getTracer('smapped-traces').startSpan('error');
span.setAttribute('error.message', event.message);
span.setAttribute('error.stack', event.error.stack);
span.end();
});
Разрешение source maps
На сервере используйте smapped-traces для разрешения source maps:
const { resolveSourceMaps } = require('smapped-traces');
app.post('/errors', async (req, res) => {
const { stack } = req.body;
const resolvedStack = await resolveSourceMaps(stack);
console.log(resolvedStack);
res.sendStatus(200);
});
Практическое применение
С помощью smapped-traces вы можете:
- Автономность: Не зависеть от сторонних сервисов вроде Sentry.
- Конфиденциальность: Хранить source maps на своих серверах, что повышает безопасность.
- Гибкость: Интегрировать решение в существующие системы мониторинга и логирования.
Заключение
Использование smapped-traces и OpenTelemetry позволяет вам эффективно отлаживать ошибки в продакшене без необходимости полагаться на Sentry. Это решение обеспечивает автономность, конфиденциальность и гибкость, что делает его отличным выбором для senior frontend-разработчиков.