错误的简易前端监控实现
2024-02-17 01:05:02
简化问题
错误监控一直以来都是后端开发人员的噩梦，不断有人为新的日志库和不同的工具编写代码，希望能够追踪错误来源，但现在前端代码越来越重，错误监控也变得更加复杂，也是时候将前端错误监控提上日程了。
问题1：简化日志收集
首先尝试解决一个问题，如何收集我们的 JavaScript 错误呢？我们可以把 console.error() 重写一下，它会记录下所有出错的信息。
const log = console.log;
console.log = function () {
log.apply(console, arguments);
window.storeError(arguments);
}
通过重写 console.log 方法，我们实现了将所有错误信息转发到一个 storeError 函数，并且把 storeError 挂载到 window 上，以便在我们的 HTML 中调用。然后在 HTML 中引入代码。
<script>
window.addEventListener('error', (event) => {
storeError({
errorMessage: event.error.message,
errorUrl: event.error.filename,
errorLine: event.error.lineno,
errorColumn: event.error.colno,
errorStack: event.error.stack,
});
});
</script>
注意： 这里我们只收集基本的信息，因为复杂的信息不容易传输。
问题2：简化发送
我们已经有了错误信息，但是现在怎么把它们发送到一个服务器上呢？我们使用 fetch() 方法发送一个 POST 请求。
<script>
const storeError = (errorInfo) => {
fetch('/api/error', {
method: 'POST',
body: JSON.stringify(errorInfo),
headers: {
'Content-Type': 'application/json',
},
}).then((res) => {
if (res.ok) {
console.log('Error sent successfully!');
} else {
console.error('Error sending error!');
}
}).catch((err) => {
console.error('Error sending error!', err);
});
};
</script>
问题3：简化存储
现在我们在服务器上有了所有的错误信息，我们需要存储它们以便查看。我们创建一个 MongoDB 数据库，并使用 Mongoose 来定义我们的错误模型。
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const errorSchema = new Schema({
errorMessage: String,
errorUrl: String,
errorLine: Number,
errorColumn: Number,
errorStack: String,
timestamp: {
type: Date,
default: Date.now(),
},
});
const Error = mongoose.model('Error', errorSchema);
然后我们可以通过 POST 请求将错误信息存储到数据库中。
app.post('/api/error', async (req, res) => {
const error = new Error(req.body);
await error.save();
res.sendStatus(200);
});
问题4：简化界面
我们已经有了错误信息，并且存储在了数据库中，现在我们需要一个界面来查看它们。我们可以创建一个简单的 Node.js 服务器，它会读取数据库中的错误信息，并将其显示在一个 HTML 页面上。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Errors</h1>
<ul>
<% errors.forEach((error) => { %>
<li>
<%= error.errorMessage %>
<br>
<%= error.errorUrl %>
<br>
<%= error.errorLine %>
<br>
<%= error.errorColumn %>
<br>
<%= error.errorStack %>
</li>
<% }); %>
</ul>
</body>
</html>
我们可以使用 Express.js 来创建一个简单的 Node.js 服务器。
const express = require('express');
const app = express();
// Get all errors
app.get('/errors', async (req, res) => {
const errors = await Error.find();
res.json(errors);
});
// Start the server
app.listen(3000);
这样就完成了一个简单的错误监控程序，它可以收集、存储和显示 JavaScript 错误。当然，这是一个非常简单的例子，在实际生产环境中，您可能需要考虑更多的功能，例如错误分组、错误过滤、错误告警等。
集成第三方错误追踪服务
如果您不想自己编写错误监控程序，也可以集成一个第三方错误追踪服务，例如 Sentry、Bugsnag 或 Rollbar。这些服务可以开箱即用，并且提供丰富的功能，例如错误分组、错误过滤、错误告警等。
1. Sentry
Sentry 是一个流行的错误追踪服务，它提供了一个 JavaScript SDK，可以轻松集成到您的前端应用程序中。
import * as Sentry from '@sentry/browser';
Sentry.init({
dsn: 'YOUR_DSN',
});
2. Bugsnag
Bugsnag 是另一个流行的错误追踪服务，它也提供了一个 JavaScript SDK，可以轻松集成到您的前端应用程序中。
import Bugsnag from '@bugsnag/js';
Bugsnag.start({
apiKey: 'YOUR_API_KEY',
});
3. Rollbar
Rollbar 是一个流行的错误追踪服务，它也提供了一个 JavaScript SDK，可以轻松集成到您的前端应用程序中。
import Rollbar from '@rollbar/rollbar';
Rollbar.init({
accessToken: 'YOUR_ACCESS_TOKEN',
});
集成第三方错误追踪服务后，您就可以使用这些服务提供的功能来跟踪和报告 JavaScript 错误。
