Sentry 无法使用 ConsoleCapture 捕获所有控制台错误

Question

我在 Next.js 应用程序中使用 Sentry 捕获控制台错误时遇到问题。

所以问题是，在我们无法访问的库中的某个地方，我们遇到了以下 WebSocket 错误 WebSocket is already in CLOSING or CLOSED state

在chrome调试面板中很明显

但未发送到 next.config.js

中使用此代码初始化的哨兵

const withPlugins = require('next-compose-plugins');
const { withSentryConfig } = require('@sentry/nextjs');
const { CaptureConsole } = require('@sentry/integrations');

const nextConfig = {
    assetPrefix: process.env.PUBLIC_URL || '',
    reactStrictMode: true,
    poweredByHeader: false,
    future: {
        webpack5: true,
    },
}

const sentryOptions = {
    silent: true,
    environment: process.env.NODE_ENV,
    integrations: [
        new CaptureConsole({
            levels: ['error'],
        }),
    ],
    errorHandler: (err, _invokeErr, compilation) => {
        compilation.warnings.push('Sentry CLI Plugin: ' + err.message);
    },
};

module.exports = withPlugins(
    [
        [(config) => withSentryConfig(config, sentryOptions), {}]
    ],
    nextConfig,
);

而sentry.client.config.js是

import * as Sentry from '@sentry/nextjs';
import { CaptureConsole } from '@sentry/integrations';
import { Integrations } from '@sentry/tracing';

Sentry.init({
    dsn: '...',
    attachStacktrace: true,
    environment: process.env.NODE_ENV,
    release: process.env.RELEASE,
    sampleRate: 1,
    tracesSampleRate: 0.2,
    integrations: [
        new Integrations.BrowserTracing({
            beforeNavigate: (context) => ({
                ...context,
                name: window.location.pathname,
            }),
        }),
        new CaptureConsole({
            levels: ['error'],
        }),
    ],
});

尽管另一个 console.error 消息已成功发送到 Sentry。

也许那个错误没有用 console.error 打印并在较低级别处理？那我们怎么记录呢？

Answer 1

将其作为一个方向而不是一个完整的解决方案，它不是直接的，而不是依赖 CaptureConsole - 你能不能不听 socket.onclose 并使用 Sentry.captureException(发送错误负载？

捕获socket异常

获取所有打开的websockets

const sockets = [];
const nativeWebSocket = window.WebSocket;
window.WebSocket = function(...args){
  const socket = new nativeWebSocket(...args);
  sockets.push(socket);
  return socket;
};
setTimeout(() => {
  // or create a button which, when clicked, does something with the sockets
  console.log(sockets);
}, 1000);
// via :

或使用wshook

https://github.com/skepticfx/wshook

一旦完成并且所有套接字都在运行，标记到 onclose 并将其发送到哨兵

exampleSocket.onclose = function (event) {
   Sentry.captureException(...args) 
};

Sentry 无法使用 ConsoleCapture 捕获所有控制台错误

Sentry not capture all console errors with ConsoleCapture

javascript

websocket

error-handling

next.js

sentry