我使用库https://www.stacktracejs.com/找到了解决方案。

StackTrace.report() 方法将获取地图并为您提供所需的未缩小信息！

所以现在我的 React Boundary 看起来像这样。我仍然使用 window.onerror 来确保我捕获了所有内容。

首先，确保将stacktrace-gps和添加stacktrace-js到您的 package.json

import React, { Component } from "react";
import StackTrace from "stacktrace-js";

window.onerror = function(msg, file, line, col, error) {
  StackTrace.fromError(error).then(err => {
    StackTrace.report(
      err,
      `//${window.location.hostname}:${process.env.REACT_APP_LOGGER_PORT || 3334}/jsnlog.logger`,
      {
        type: "window.onerror",
        url: window.location.href,
        userId: window.userId,
        agent: window.navigator.userAgent,
        date: new Date(),
        msg: msg
      }
    );
  });
};

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  componentDidCatch(error, errorInfo) {
    this.setState({ error });
    StackTrace.fromError(error).then(err => {
      StackTrace.report(
        err,
        `//${window.location.hostname}:${process.env.REACT_APP_LOGGER_PORT || 3334}/jsnlog.logger`,
        {
          type: "React boundary",
          url: window.location.href,
          userId: window.userId,
          agent: window.navigator.userAgent,
          date: new Date(),
          msg: error.toString()
        }
      );
    });
  }

  render() {
    if (this.state.error) {
      //render fallback UI
      return (
        <div className="snap text-center">
          <p>We're sorry — something's gone wrong.</p>
          <p>Our team has been notified</p>
        </div>
      );
    } else {
      //when there's not an error, render children untouched
      return this.props.children;
    }
  }
}

export default ErrorBoundary;

首先，创建源映射很重要。我通过在 webpack 配置中添加devtools来创建源映射来做到这一点。它的简短片段如下：

devtools: "source-map",
new UglifyJsPlugin({
  sourceMap: true
})

创建源映射后，我使用了库https://www.stacktracejs.com/。

但是，为了减少生产中的包大小，我没有导入整个堆栈跟踪包。我通过分离客户端代码和服务器端来实现。

客户端：我导入了error-stack-parser。这将创建一个对象，其中包含文件名、行号、列号和函数名。我将使用它创建的对象发送到服务器。

import ErrorStackParser from "error-stack-parser";

componentDidCatch(error) {
   let params = {stackframes: ErrorStackParser.parse(error)};
   let url = 'https://example.com';
   axios.post(url, params)
}

在服务器端，我导入了“stacktrace-gps”和“stackframe”并使用它来查找它，从源映射中获取实际代码的行号和列。

const StackTraceGPS = require("stacktrace-gps");
const request = require("request");

var logger = function(req, res) {
  let stackframes = req.body.stackframes;
  let stackframe = new StackFrame(
    stackframes[0]
  ); /* Getting stack of the topmost element as it contains the most important information */

  /* We send extra ajax function to fetch source maps from url */
  const gps = new StackTraceGPS({
    ajax: url => {
      return new Promise((resolve, reject) => {
        request(
          {
            url,
            method: "get"
          },
          (error, response) => {
            if (error) {
              reject(error);
            } else {
              resolve(response.body);
            }
          }
        );
      });
    }
  });

  gps.pinpoint(stackframe).then(
    info => {
      console.log(info); /* Actual file Info*/
    },
    err => {
      console.log(err);
    }
  );
};

这减少了包的大小，并使您能够在服务器端记录错误。