uniapp 微信小程序sourcemap映射

这篇具有很好参考价值的文章主要介绍了uniapp 微信小程序sourcemap映射。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp 微信小程序sourcemap映射

错误捕获

由于微信小程序中没有window对象,不能通过window.onerrorwindow.onunhandledRejection方法进行全局的监听。不过我们也可以使用以下几种方法。

使用try…catch

将可能出现的错误的代码使用try...catch包裹

try{
  cont
} catch(e) {
  console.log(e)
}

添加Vue.config.errorHandler处理函数

该方法用于指定指定组件的渲染和观察期间未捕获错误的处理函数。
Vue.config.errorHandler接受三个参数

  • errorerror对象
  • vm:组件实例
  • info: 是 Vue 特定的错误信息,比如错误所在的生命周期钩子。

main.js文件里添加函数

Vue.config.errorHandler= function(err, vm, info) {
	console.log(err);
	console.log(vm);
	console.log(info);
}

不过这种方法没办法捕获异步错误。

添加onError钩子

onError方法只接受一个参数 —— error对象字符串。

App.vue文件中添加onError钩子。

onError(e) {
  console.log(e)
}

该方法可以捕获同步、异步的错误,但是无法处理资源加载错误,而通过组件(比如image上的error监听,并不能获取到代码的行列信息,因此本文不讨论这种错误)。

解析error对象

如果要使用sourcemap来定位错误,就需要获取到对应代码的文件、行列信息。通过上面的方法获取error对象则是需要解析(解析出行列信息用于定位错误代码位置)。

通常获取的获取的错误信息如下:

uniapp 微信小程序sourcemap映射
为了更好映射出源码所在位置,我们需要把错误信息解析成下面的格式

stack : {
	url: '',
	func: '',
	lineno: '',
	colno:''
}

以下是部分解析错误的部分代码,详细代码可以查看errorParser


function errorParser(e) {
  const chromeRegex =
    /^\s*at (?:(.+?\)(?: \[.+\])?|.*?) ?\((?:address at )?)?(?:async )?((?:<anonymous>|[-a-z]+:|.*bundle|\/)?.*?)(?::(\d+))?(?::(\d+))?\)?\s*$/i;
  const chromeEvalRegex = /\((\S*)(?::(\d+))(?::(\d+))\)/;
  const parts = chromeRegex.exec(line);
  if (parts) {
    const isEval = parts[2] && parts[2].indexOf("eval") === 0;

    if (isEval) {
      const subMatch = chromeEvalRegex.exec(parts[2]);
      if (subMatch) {
        parts[2] = subMatch[1]; // url
        parts[3] = subMatch[2]; // line
        parts[4] = subMatch[3]; // column
      }
    }

    return createStackFrame(
      parts[2],
      parts[1] || UNKNOWN_FUNCTION,
      parts[3] ? +parts[3] : undefined,
      parts[4] ? +parts[4] : undefined
    );
  }
}
function createStackFrame(url, func, lineno, colno) {
  const frame = {
    url,
    function: func,
  };

  if (lineno !== undefined) {
    frame.lineno = lineno;
  }

  if (colno !== undefined) {
    frame.colno = colno;
  }

  return frame;
}

解析成这样的对象后续使用sourcemap进行映射时就可以很清晰明了。
uniapp 微信小程序sourcemap映射

sourcemap映射

sourcemap的生成/下载

使用uniapp来搭建微信小程序项目,需要使用两份sourcemap

  1. 一份是将uniapp项目编译成微信小程序的映射
    hubuilder工具上点击发行小程序,在弹窗中勾选生成sourcemap即可。
    uniapp 微信小程序sourcemap映射
    这样在打包的目录中就会生成一个.sourcemap文件夹:
    uniapp 微信小程序sourcemap映射

  2. 另一份是微信小程序压缩后的映射
    有两种方式可以获取这份sourcemap:

    • 在上传代码后点击下载sourcemap
      uniapp 微信小程序sourcemap映射

    可能下载的sourcemap中的mappings字段全是分号(;),可以尝试下勾选将js编译成ES5后重新上传。

    • 在We分析中下载
      uniapp 微信小程序sourcemap映射

sourcemap映射

使用source-map库来映射源码。

在小程序中报错:
uniapp 微信小程序sourcemap映射
将错误上报在node服务中(至于怎么上报不在文章的探讨范围内,因此本文直接将生成一个对象来讲解)

const error = {
	url: 'app-service.js',
	lineno: 5210,
	colno: 13
}

app-service.js对应的sourcemap文件是app-service.js.map

const { SourceMapConsumer } = require("source-map");
const fs = require("fs");
const error = {
  url: "app-service.js",
  lineno: 5210,
  colno: 13,
};
const rawWxMap = fs.readFileSync(__dirname + `/${error.url}.map`, "utf-8");

function originalUniappBundlePosition() {
  SourceMapConsumer.with(rawWxMap, null, (consumer) => {
    const info = consumer.originalPositionFor({
      line: error.lineno,
      column: error.colno,
    });
    originalPosition(info);
    console.log(info);
  });
}

originalUniappBundlePosition();

此时解析出来的是对应第一份的sourcemap,还需要在映射一次才能解析出uniapp项目中的源码。
uniapp 微信小程序sourcemap映射
方式跟上面的一样,根据这个映射我们就可以快速定位到源码错误的地方了。
uniapp 微信小程序sourcemap映射
源码异常的地方:
uniapp 微信小程序sourcemap映射文章来源地址https://www.toymoban.com/news/detail-505694.html

到了这里,关于uniapp 微信小程序sourcemap映射的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 微信小程序:更新

    冷启动 :如果用户首次打开,或小程序销毁后被用户再次打开,此时小程序需要重新加载启动,即冷启动。 热启动 :如果用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时小程序并未被销毁,只是从后台状态进入前台状态,这个过程就是热启动。 启动时

    2024年02月02日
    浏览(42)
  • uniapp微信小程序分享

    uniapp微信公众号H5端分享:uniapp微信公众号h5端分享_停留的章小鱼的博客-CSDN博客 1、全局分享(每个页面胶囊都可以分享) !!!在根目录下新建utils文件夹下新建share.js文件,复制下方代码: !!!在main.js文件导入并挂载: 2、单页面分享:(在onLoad同级挂载)

    2024年02月12日
    浏览(71)
  • uniapp 微信小程序 分包

    1、manifest.json内添加如图所示: 2、在与pages同级上创建各个分包的文件夹 把需要分包的文件对应移入分包文件夹内 3、page.json内修改分包文件的路径 比如: 3、页面内跳转路径修改 比如:

    2024年02月13日
    浏览(54)
  • uniapp微信小程序分包

    目录 一. 分包的概念 1. 什么是分包 2. 分包的好处 3. 分包后项目的构成 4. 分包加载规则 5. 分包体积限制 二. 分包的方法 1. 分包后的目录结构 2. 配置manifest.json 3. 配置pages.json 4. 全局修改分包文件路径 1. 什么是分包 2. 分包的好处 3. 分包后项目的构成 4. 分包加载规则

    2024年02月11日
    浏览(53)
  • uniapp 微信小程序分包

    uniapp项目编译到微信小程序上传代码时提示体积过大,这个时候就要做优化了,大致就以下几个方面 1.减少或压缩本地图片 2.删减重复代码,删减无用CSS样式 3.减少无用组件引用 这个时候做完发现也优化不了多少体积,代码包还是过大,所以就要用到分包了 分包步骤 1.在p

    2024年02月14日
    浏览(48)
  • uniapp 微信小程序:扫码

    HBuilderX 创建一个新项目,直接用默认模板 添加一个【扫码】按钮,绑上点击事件。 使用 uni.scanCode 调起客户端扫码界面,扫码成功后返回对应的结果。 界面 演示 camera 之 scanCode模式扫码 扫码结果: HBuilderX 创建一个新项目,直接用默认模板 添加一个 camera 组件,如下调整。

    2024年02月08日
    浏览(47)
  • uniApp配置微信分享 uniApp跳转微信小程序

    最近在做uniApp时需要跳转微信小程序进行支付,以为和跳转支付宝小程序支付一样简单结果让我发狂,跳转微信代码其实很简单就是下面这一段,但是要配置一大推东西 提示:plus为App端默认的系统参数,不用引入或者其他操作            ios跳转跳转微信小程序还需要配置

    2024年02月09日
    浏览(63)
  • uniapp构建微信小程序

    1.全局安装 npm install -g @vue/cli 2.创建项目 vue create -p dcloudio/uni-preset-vue my-project vue create -p E:projectuni-preset-vue my-project 3.启动项目(微信小程序) npm run dev:mp-weixin 4.微信小程序开发者工具导入项目 进入微信开发者工具,导入项目 E:projectmy-projectdistdevmp-weixin 项目目录 在js 的

    2024年04月15日
    浏览(21)
  • 微信小程序uniapp记住密码

    在请求登录接口成功后,我们需要判断用户是否勾选记住密码,如果是,则将记住密码状态、账号信息存入本地。 下次登录时,获取本地的记住密码状态,如果为true则获取本地存储的账号信息,将信息回填登录表单。 但是如果密码直接存在缓存里,很容易出问题,现在我们

    2024年02月03日
    浏览(42)
  • uniapp微信小程序 --下拉菜单

    就是原生写这个本来就是一件很简单的事情,但是uniapp里面不支持selct,他封装了东西应该是,插件市场试了好几个也不太行。最后还是找到一个博主的写的很好,记录一下。 这是封装好的需要什么样式自己调整 使用 博主地址附上https://www.cnblogs.com/OrochiZ-/p/15910440.html

    2024年03月26日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包